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.
This past December, Shockoe hosted our annual Hackathon. Seven teams gathered with the goal of creating a working and fully-functional application within a 48-hour window. This year's theme was to create an application related to any common daily activity. But here's...
Inc. Magazine Unveils Its First-Ever List of D.C. Metro’s Fastest-Growing Private Companies— The Inc. 5000 Series: D.C. MetroNEW YORK, February 26, 2020 – Inc. magazine today revealed that SHOCKOE is No. 203 on its inaugural Inc. 5000 Series: D.C. Metro list, the most...
You’re charged with mobilizing your workforce with an internal development team that lacks the training required.How do you get out of this Catch 22? Now, we’ve got a situation: Imagine 40,000 employees across 30 countries – many who are constantly on the go – still...
For many developers, regular expressions are arcane magic at best, impenetrable nonsense at worst. I once felt the same way, until in a caffeinated mania I plunged in headfirst and discovered a fascinating and endlessly useful world under the surface. Five years...
When one of our clients approached us with the idea of building an entirely new customer engagement app for their grocery stores, we were very excited. Their goal was to build a mobile application that customers could use to learn about products, find them in the...
Let's socialize Twitter Instagram LinkedIn Using Technology to Support the Supply Chain Workforce and Its Processes While computing in the supply chain is nothing new, many existing systems are running on bulky and dated equipment, limiting the flexibility and...
The Americans with Disabilities Act requires websites to be accessible or risk being discriminatory against those with disabilities and be slapped with a fat lawsuit. Many companies have fallen victim to these lawsuits for their websites like Domino’s Pizza, Beyoncé,...
Dominion Energy Virginia launches their first consumer-facing mobile app today, which was designed and developed by Shockoe. The “Outage Center” app is focused on reporting and checking the status of customers’ power outages in a user-friendly way, by giving automatic...
Shockoe is proudly sponsoring GDS's 20th CMO Insight Summit on December 2-4 2019. The summit brings together senior marketing decision-makers & business leaders from across North America in Carlsbad, California. Drawing on experience within their organizations,...
A female leader’s diatribe against gender-biased leadership trendsLast year a group of Project and Engagement Managers at Shockoe participated in a two-day training session to earn our SAFe Scrum Master certifications. I really enjoyed the training, except for one...