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.
Android and iOS users have been at odds for over a decade. Each platform carving out its path and even stepping on each other's toes in the process. However, for many consumer app developers to pick a side would mean to ignore a large chunk of users....
I am awful at a lot of things. Baseball is one of them. Fighting games like Street Fighter is another. The only thing I am awful at that has really bothered me to any extent is my time and project management skills. When faced with a large project and a...
Inc. Magazine Unveils Its Annual List ofAmerica’s Fastest-Growing Private Companies—the Inc. 5000For the 3rd Time, Shockoe Appears on the Inc. 5000,Ranking No. 1051 With Three-Year Revenue Growth of 445 Percent RICHMOND, VA, August 14, 2019 – Inc. magazine...
We have a small but mighty design team here at Shockoe. Any given day one of us might be discovering needs from a client, drafting UI standards for another, then refining designs for the most intuitive and impactful experience. With so many facets to everyday...
Align Mobile Technology to Human Behavior Shockoe brings a holistic view of what it take to bring emerging technology to the edge. We bring a deep experience in mobile apps and the latest in AR and voice technology. Understanding the changing world of software...
Recently I was asked to update a Node.JS server to replace all of the standard REST endpoints with GraphQL functionality. The project I was working on had already seen me working with multiple technologies I had never used before but this one I had never...
People are choosing to work for longer for several reasons. They are living longer than previous generations. Changes to Social Security benefits, a decline in employer contributed retirement plans, along with the need to save more. They have more...
Have you ever considered remote work—either as an employee or an employer? We are. We’ve seen the momentum of companies offering remote flexibility and have heard the interest internally, but is it a viable option for us? About 90% of our team works at the...
The Meet-Up Overview: Shockoe would like to provide a space for the RVA React Native community to share its knowledge and grow together. There are many options today for creating mobile applications, and React Native is a great solution for a...
We're heading back to Boston! From August 19 - August 22, Shockoe will be attending and speaking at eTail East in Boston, Massachusetts. About eTail eTail is where the top minds in retail meet, collaborate and learn about what's disrupting the industry...