The Future of React Native with Fabric

The Future of React Native with Fabric

 

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?

React Native Logo

What is React Native? React Native is the cross-platform framework built by Facebook for building apps for Apple, Android, and other devices in the future, and is used for apps today like Bloomberg, Walmart, Uber, and others. The React Native framework uses Javascript for building its Components and allows developers to call directly to native modules using Objective C and Java within its code.

 

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?

 

Javascript is a performant language used all over the web, so this should be a simple problem to solve, right? Not quite. As Ram N from Facebook explained at the 2018 React Conference, React Native applications work currently by moving across 3 different layers: platform/UI, layout, and Javascript.

 

React native platform UI layout Javascript frame

 

In order to display Javascript on the platform, you need to pass it through a layout handler and React Native typically handles this in an asynchronous manner. This communication needs to be asynchronous due to the typical disparity of load: the UI layer usually does the least amount of work, where the Javascript layer is where business and product logic is handled. To make things worse, when moving between the layout and Javascript layers, information needs to be converted to serialized JSON and back again, causing extra effort to return the results from the Javascript layer.

 

React native platform UI layout Javascript JSON

 

In an example highlighted by Ram, a user could be scrolling through a long list of data points quickly, which is sending the onScroll event to the Javascript layer requesting more information for their user in an asynchronous method, usually. This is the critical point in a mobile app user experience that differentiates between a great app and a good app: the screen flickers, sputters and fails to load the content at the speed that the user needs it, and the user is taken out of their experience.

React native platform RAM Loading

 

How Do We Fix This?

 

Valentin Shergin, one of Facebook’s engineers depicted this problem in the below nightmare diagram, emphasizing that, by using these three layers, we’re stuck with repetitive calls across these layers and lost performance as a result (or, as he calls it, a non-flattened experience). This repetition causes inefficiencies in memory distribution across Javascript and native.

 

Javascript and Native without flattening and with flattening reach native

 

Using Turbo Modules

 

Here’s where Fabric and Turbo Modules come in.

 

Through a method Facebook is dubbed JSI or Javascript Interface, a unified lightweight API able to be used by any Javascript VM. React Native can focus on the conversation between Javascript and Java/Objective C, and emphasizes hosting objects and exposing methods/variables to Javascript. Javascript can avoid making the heavy calls of serialized JSON by referencing objects in JS rather than calling to them directly and focusing on calling native elements first.

 

Ram N explained this with a Camera module; here’s the module using the current method, where serialized JSON is being passed between the platform and Javascript to get the picture host object:

 

RAM N Camera module Javascript

 

Here’s a version using JSI where the picture host object is referenced rather than called/translated:

 

RAM N Camera module Javascript

 

Once the JSI has called the JSI host object, methods can be called on the object using Javascript, and returned values themselves can even be classified as host objects.

 

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.

With Fabric, you’ll be able to worry less about relying on non-performant asynchronous calls and can instead only make costly calls out to Javascript objects when absolutely necessary.

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.

 

Ram N React Native initial diagram

 

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.

 

React Native New Way

 

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 Hall

Cameron Hall

Mobile Strategist

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.

How a Track and Trace System Can Optimize ROI (In 6 Steps)

How a Track and Trace System Can Optimize ROI (In 6 Steps)

In logistics, the visibility of your product in transit is essential to promote your brand’s reliability and capability. It is an expectation, not an added benefit, for a consumer to know where a product is and when they can expect it.

We’ve previously talked with you about supply chain management, and the strengths of your track and trace system can directly influence the available impact of your supply chain by increasing transparency around your products in transit; if you lose sight of your products between order and fulfillment, then delivery speed, loss prevention, and, most importantly, your revenue are data points needing to be gathered after the fact rather than real-time.

1. Decrease your computing footprint, Increase your mobility

Realizing the capacity of inventory and the effectiveness of your logistics infrastructure is not a function only needed in an office or in a space where a desktop computer can be present, it’s something you need on you all the time. With over 4 and a half billion smartphone users worldwide, a handheld computer that is low cost, scalable, and widely compatible is the ideal track and trace terminal. Reduce the cost of maintaining the hardware and peripherals of a desktop solution and by focusing on the devices currently used by employees, and equipment costs and the operational costs of training can be reduced drastically.

2. Visualize your products in transit

Understanding exactly where a delivery vehicle and associated shipment is at any point in time can help both distribution and client project payment and inventory, but to understand where the delivery vehicle needs GPS. While GPS in vehicles is typically reserved for luxury or premium vehicle packages, GPS in smartphone devices is an expectation in 2018. Avoid the additional cost to provide GPS for delivery resources, and rely on the GPS available from the phone of a driver. By adding the data provided by other smartphone and GPS users worldwide using the APIs of Google Maps, Bing Maps, and other affordable solutions, you can gain access to real-time traffic data to better analyze expectations around delivery.

3. Centralize your data and integrate legacy systems

Knowing the multitude of systems needed to manage inventory and resources, whether enterprise resource planning (ERP), enterprise asset management (EAM) field service management (FSM), warehouse management system (WMS), or inventory management system (IMS), there are often more individual interfaces available that can be managed by one person or one team. With a mature user experience informed by business goals, bring the data and interactivity of the systems housing your data into a simple and accessible mobile solution via APIs and integrations, reducing the need to rely on different interfaces and compatibility models. Bringing all of the data around your track and trace system together can help build comprehensive business intelligence reporting needed for your business, helping you build a clear, real-time understanding of your capacity in the palm of your hand.

4. Use machine learning to project costs and capacity

Historically, resource projection and calculation would require analytics software on a powerful desktop computer in the organization, and are susceptible to human error from manually maintained functions. With the strength of cloud computing in your hand, leverage complex AI and machine learning models to build accurate and informed projections based on historical, competitive, and real-time data to be able to make decisions for the future of your resources through services like Google’s Tensorflow and Microsoft’s Azure ML. The cost of intelligently anticipating the needs of your product are increasingly affordable, and the benefits are available from your phone.

5. Ditch peripherals. Scan and tag products from your smart device

To measure and manage your inventory quickly, less is more: less mobile terminals, barcode scanners, and extra peripherals needed to validate barcodes and identifying information to update inventory. With a mobile device, you can scan your barcode, look at a QR code using your smart glasses, detect RFID or NFC tags on boxes, or even have your phone recognize your product based on its appearance with machine learning. Your bank recognizes your check when you use mobile deposit, so why shouldn’t your track and trace system be able to understand a barrel of your material based on an OSHA label? Whether by using visual recognition software on the device or by checking a label against a library of images stored in the cloud, reduce the cost of managing inventory by focusing on your mobile device.

6. Start your mobile track and trace system with Shockoe

By leveraging the power and proliferation of mobile interactions, your track and trace system can be more visible and more all-encompassing to keep up with demand and to promote profitability real-time. In bringing your track and trace system to mobile, you elevate your business goals and realize your logistics footprint from your pocket.

For more on how we’ve helped our partners implement a successful track and trace system, read about our Drive app built for J.B. Hunt.

Cameron Hall

Cameron Hall

Mobile Strategist

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.