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.
React Native and Components in a Nutshell React Native is an extensible cross-platform framework where you can quickly build apps/platforms using reusable components. React Native has taken off as the framework of choice for cross-platform development as...
When it comes to managing your company’s inventory, there is no doubt that you need tools that are flexible and responsive enough to handle the many moving pieces (pun intended) of your operation. Today, these inventory management tools can even be...
As an extension of your brand, your mobile app should have its own distinct voice that communicates authentically with your consumers. Considering the major drivers of ‘how’ and ‘why’ consumers interact with your app will inform the most authentic way for...
For some time there has been a push for cloud computing and why organizations should switch from on-prem servers and buy a ticket to the cloud. Most of the buzz seems to be well grounded, as there are many advantages to moving to the cloud. Let’s take a...
As we have done in previous years, Shockoe will be attending MWC19 Barcelona in a few weeks. Formerly known as the Mobile World Congress, this is the largest mobile event in the world and we are looking forward to learning more about leading-edge...
We've got our sunscreen packed and we're ready to lend our knowledge at Future Stores Miami by speaking and moderating on digital unification for retail customer experiences. Future Stores brings together retail executives from across the country to...
If you go to a diner and the server is super nice, gets your food out fast & makes sure you never have an empty glass - you’ll factor that into deciding to go back to eat there. However, you probably won’t tell your friends or leave a review. Yet; if...
With the rise of Amazon and it’s 2-day, next day & even same day shipping the bar for fast shipping and therefore efficient warehouse communication to support it has been raised drastically. Luckily the constant leaps in mobile technology can be...
With the plethora of mobile apps available, most consumers assume that their preferred brands have one available. A recent study found that 57% of consumers want to interact through mobile with brands to which they’re loyal. This has some big implications...
What are software architecture patterns? When writing software, engineers encounter many of the same problems over and over again. Because of this, design patterns have been defined that give engineers a reusable way to solve these commonly occurring problems....