The Future of React Native with Fabric Test
The main criticism of any cross-platform mobile development framework is inevitable if small, loss of performance when juggling native elements and cross-platform elements; if your app calls to a device camera, Bluetooth, microphone, or otherwise, you are familiar with the loss of precious milliseconds. React Native is looking to dispel this criticism with its upcoming updates in Fabric and Turbo Modules.
What is React Native?
With that kind of support, adoption, and ease of use, you would assume that they’ve solved the issue of performance, right? Not until now with Fabric and Turbo Modules.
What is the Problem?
How Do We Fix This?
Using Turbo Modules
Here’s where Fabric and Turbo Modules come in.
Here’s a version using JSI where the picture host object is referenced rather than called/translated:
Using Fabric to Manage UI
React Native will be able to run certain heavier calls synchronously, prioritized over other UI elements, to return information quicker to reduce the chance of flickering by using their new UI Manager dubbed Fabric.
Per Valentin Shergin, an engineer at Facebook, Fabric focuses on the following top strategies:
- Using C++ for cross-platform “shadow” layer (in place of the Layout layer above)
- Immutable data structures (Shadow Trees, Props, Events)
- Shared memory ownership (between JS and native)
- Type-safe data structures
- Opt-in synchronous execution where it benefits performance, the UI responsiveness and simplifying inherently-synchronous interop APIs.
Ram N depicted the benefits of this new system with the following diagrams. In this initial diagram, you see the current method, where dotted lines represent an asynchronous call, blue boxes represent background processes, and green boxes represent the UI thread.
Using Fabric, you can prioritize certain calls to be prioritized and sent synchronously, as shown in the onScroll event below. The user would receive the information they’re expecting while scrolling much faster since they don’t need to wait for an asynchronous call to be completed.
Why Is This Exciting for React Native?
React Native is a widely used framework that allows businesses to streamline their cross-platform app dev, but, like any cross-platform development, the creeping annoyance of lacking performance with native modules is always a criticism brought up during discussions of which framework is best. With these changes, businesses can worry less about the optimization of their experiences and can know that they’re delivering an experience close to native.
When Can I Optimize My Apps?
Fabric and the use of Turbo Modules are still in development, but you can follow their progress via their Github thread. You can also find Ram N’s full talk from the 2018 React Conference here. In the meantime, check out our React Native white paper on how we can help you deliver your business value using React Native cross-platform dev.
Cameron uses his experience in app and analytics strategy for healthcare, finance, government, and logistics apps with a focus on emerging technologies to deliver on customer-centric product development. When not devouring research on the latest and greatest, you can find Cameron hiking, playing soccer, reading a book, or continuing his education.
For new design projects, blank artboards can strike fear in many designers. Approaching a new task with a blank slate is never easy, especially under a deadline or without a clear objective. That blank rectangle can be the biggest block to any momentum in getting a...
In 2017 Google announced first-class support for Kotlin on Android at Google I/O, and shortly after I started looking into using Kotlin for our Android projects here at Shockoe. It took a few years before we officially started using Kotlin as our preferred language...
Have you ever had multiple emulators or physical devices or a combination of the two attached at once? It's frustrating to shut off or unplug your devices in order to single out the one that needs to be targeted. Look no further, adb includes a command line switch to...
In June of last year, I was at work minding my design business when our COO asks to meet with me. When we sat down to talk, he asked me to make our company’s Mascot (the Mobile Monster) in 3D in two months. I got to say I was a little surprised. Not just surprised,...
While React Native is a great framework for cross platform development, the process to upgrade from one version to another is generally painful. If you created a new application this time last year, it was most likely running on version 0.56. Today the latest version...
When building a solution with use cases that span desktop and mobile, React is a go-to choice. It can be used to create responsive web apps that render beautifully across form factors. Certain projects, however, call for a more native app solution on mobile. React...
Like any generational label, the boundaries of what birth years are considered Generation Z are hazy, loose, and basically up anyone’s own interpretation. Gen Z is characterized as having grown up in the age of internet and social media. They don’t know a world...
The last few weeks we have focused on web service design using Node.js with Express. So far we have covered getting started with express, using EJS to create web pages, and creating a push notification server. Today we will go over how to save data on your node...
The Case for Design Systems Maybe you want to build a design system. Maybe you don’t. Maybe you have no idea what one is. Regardless of where you’re at on the scale, you need one. Does your life depend on it? Well, no probably not. But does the success of your product...
With the rise of AR integration in many mobile apps, we are beginning to see a clear delineation between what drives meaningful and lasting loyalty versus momentary enjoyment. While creating a momentary boost to brand visibility & traffic these kinds of augmented...