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.
Building For iOS and Android
For app developers, it isn’t always apples and oranges –or, in this case, Apple or Android. There are similarities and differences between developing applications for iOS and Android. To help host Tyler Kern clarify them, Kern enlisted the expertise of two Shockoe...
How Android 12 Tackles Mobile Experience Personalization
The goal of the mobile experience has always been personalization. From a software perspective down to the size of the phones themselves, one size fits all has never been the case.
Answered: Your Most Burning Questions About the Product Design Engineer Job Description
What does a day in the life of a product design engineer at Shockoe look like? It depends. Key Takeaways: The product design engineer job description spans the entire development pipeline One day’s activities may differ from the next depending on the stage of a...
The Exciting Reality About Working in Product Design for an App Development Company
There are plenty of opportunities in the field of app development, but it’s essential to understand what to expect. A digital product designer has to be adaptable, creative, and collaborative to succeed in this very popular and exciting career. Key takeaways: Review...
Webinar: Creating a Customer Journey through Digital Experiences
Supporting the customer journey with digital experiences: Insights from Carsten Krause Key takeaways Organizations must map out the customer journey and understand the needs and pain points of the target group to effectively support the task with digital experiences....
What Is a Product Development Strategy and Why Is It Important?
A product development strategy is a reliable roadmap for building a successful product or service to maximize customer satisfaction. Read on to learn more. Key Takeaways: A product development strategy describes how you’ll transform your product idea into reality. It...
Strategy: Coordinating Engineering, Product, and Design
Bringing quality products to market requires the collective input of the engineering, product, and design teams. Here’s how this trifecta model can make your company more effective and efficient. Key takeaways: A trifecta brings the engineering, product, and design...
How to Develop an NFT That Stands Out
When it comes to NFT development, having the right technical expertise is just part of the challenge. To create a successful NFT requires creative design, marketing prowess, and an exciting digital experience to build a piece of digital art worth having. The Shockoe...
Growth Marketing Can Improve the Digital Customer Experience
A growth marketer can revise strategies to help grow your customer base, leading to increased profits. With a data-driven approach, a growth marketer can make a significant difference in how you connect with the target customer demographic. Key takeaways: Learn what a...
Understanding Growth Marketing and Its Importance to Businesses
When marketing your business, it’s crucial to employ targeted methods that yield results and appeal to the consumer. Growth marketing is key to these efforts. Here’s why. Key Takeaways: The goal of growth marketing is customer acquisition to create an engaged, loyal...
A Comprehensive Guide to Product Design Engineering
Product design engineering offers a creative, collaborative, iterative approach to problem-solving to set you apart from the crowd. Key Takeaways: Design engineering focuses on creating efficient and effective systems, products, or applications for user needs. It...
5 Crucial Factors to Create a Winning Product Development Strategy
A sound product development strategy is essential to make an impact in today's competitive market. Here is how to create a successful strategy that aligns with your company’s goals and objectives. Key Takeaways: Businesses should establish clear, concise product...