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.
Last week we were put into a room with 70+ executives who almost universally shared the same sentiment: there is a vital need to focus on technology growth and expansion after a year of protection and entrenchment. Studies show the return of shopping confidence in...
In 1999, a prophetic Aaron Sorkin wrote a line for one of his characters in the West Wing when discussing the “next big thing” the President should be focused on: "In the 20s and 30s it was the role of government. In the 50s and 60s it was civil rights. The next 20...
Marketing leaders face new challenges around acquisition, retention, and loyalty due to evolving customer behaviors and accelerating digital change due to the epidemic. Shockoe recently joined a group of 70+ senior executives at a summit where these issues were laid...
Those in the business of national defense have a grasp on use cases. They understand how AR/VR could impact the future. But there are major hurdles in getting from here to there. The National Defense Industrial Association (NDIA) brought together industry leaders who...
The Mobile Connect Conference is an invitation-only event that brings together 75 of North America's most influential and innovative executives in retail. While virtual this year, it was worth every minute. From lectures to roundtables to one-on-one conversations,...
Handling payments within an application can be a daunting task. As a developer, you want to handle the user’s payment information securely. There are many options available to handle payments, but when selecting an implementation you need to consider your...
As developers, we often encounter challenges when tasked with introducing new features to an existing application, especially if the application had been built on an older technology stack. One inevitable decision that we as developers have to make is whether...
In the world of product development, we are often always saying “user” _______. User-centered design, user analytics, user personas, user journeys, etc, etc.It’s a term that holds importance because it is a genuine focus on the end-user experience. It’s also often...
Jeb Mease is a Business Process Consultant with Dominion Energy, although his 18-year career at the company has gone through several permutations. As a business lead in the Emergency Preparedness Center, he was tapped to oversee Dominion Energy’s first consumer-facing...
WWDC, Apple’s worldwide developer conference, took place this year despite current events impacting the world. The event highlights almost all of the new software, hardware, and tools Apple users can look forward to in the upcoming year. Typically this conference is...