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 Aquí. 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.
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...
El objetivo de la experiencia móvil siempre ha sido la personalización. Desde el punto de vista del software hasta el tamaño de los propios teléfonos, nunca ha habido una talla única.
You can save from many angles by outsourcing app development and focusing on growing your business instead. Still, when it comes to outsourcing, you must work with those with the needed experience. Key takeaways: Understanding the increasing demand for mobile app...
As augmented reality’s use cases expand with new developments and capabilities, usability testing couldn’t be more critical. Many consider the end user from professional, personal, and recreational standpoints. Key takeaways: Understanding the current state of...
The tech world is constantly changing, so innovative strategies for development companies are vital. Standing out among the noise isn't easy without the right approach. Key takeaways: Learn about the current state of innovation in software development Understanding...
Don’t leave holiday revenue on the table. Learn how Firmly.ai’s innovative approach to shoppable ads can help you make the most of your holiday ad budget and create memorable shopping experiences for customers.
Integrity matters in software and mobile app development. Stay competitive with these 7 core values for development companies. Key takeaways: Core values provide guidance and unity of direction, helping your development team be more functional and efficient. These...
The corporate world is undergoing several changes with numerous technological advancements. Develop brand experiences with augmented reality (AR) to deliver an unmatched personalized and memorable experience. Key takeaways: The current climate of brand experiences and...
Mobile marketing has become an indispensable digital component for businesses that want to remain relevant in today’s market demands and economy. Here’s how to stay competitive with mobile marketing: Key takeaways: More than half of website traffic today comes from...
Offering your customers, a brand experience they’ll never forget comes with a few considerations. Reaching that point requires A/B testing and an immersive experience they can enjoy. With the help of A/B testing and immersive experiences like augmented reality,...
Schedule time to meet with our team at Groceryshop 2023 to find out how we can amplify your brand through digital experiences, including mobile apps, XR, spatial computing, and conversational AI.
[On-Demand Webinar] Amplifying Engagement: The Tech-Driven Transformation of the Retail Customer Experience
Explore the transformative impact of technology on unified digital retail customer experiences and the impact on customer engagement. Discover the power of creating seamless interactions across various digital channels, enabling businesses to foster deeper connections with their customers.