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.

Three Reasons Flutter is a Viable Cross-Platform Framework

Three Reasons Flutter is a Viable Cross-Platform Framework

Flutter, as you may know from one of our previous blogs, is Google’s cross-platform mobile development framework. Flutter has recently entered beta as of February 27th. I have only been working with this framework for about a month here at Shockoe, but in my limited exposure, I have seen the many ways in which Flutter can improve our delivery to clients.

 

For most products in any field, there are two important aspects of development: time to market and product quality. If there are ways for us as a company to improve these areas we have an obligation to look into them. With that in mind, I was eager to explore Flutter. Here are three reasons I believe Flutter is a viable cross-platform framework.

 

1. Flutter’s Implementation of Widgets.

 

One of the key fundamentals of Flutter is that everything is a widget. I really like this concept as Google provides many out-of-the-box options to help speed up development. Flutter doesn’t have a bridge to the native world as many other cross-platform frameworks have. Instead, Flutter controls every pixel on the screen, which allows for various great options for custom UI to be tailored to a client’s every need. With that, the widget catalog also gives developers a plethora of options to mimic native controls. This enables any idea to use the catalog to create a beautiful product without compromising quality. The following graphic gives a great visual of how widgets can be laid out for specific components:

 

Flutter’s-Implementation-of-Widgets

 

The section above is made up of four types of widgets. The parent row would be the outermost element containing 3 columns which each contain an icon and text. There’s a huge advantage to having a widget for seemingly almost everything, and the list will only continue to grow.

 

2. Fantastic Debugging Tools.

 

Flutter includes plenty of tools that have sped up development, including one of my personal favorites: the hot reload. With almost any update to the UI, you can use hot reload to instantly see all changes made. Additionally, Flutter offers plug-ins for multiple IDE’s (VS Code, IntelliJ). I personally use IntelliJ and the plug-in provides autofill, debugging, among many others features. Debugging within the IDE contains an abundance of options, but overall, my favorite is the debug painting tool. This tool allows the developer to see the borders on all of their widgets along with the paddings and margins to help clarify where a widget might need to be adjusted.

 

Fantastic-Debugging-ToolsAnother notable feature is the toggle platform tool which allows users to see the UI differences between iOS and Android with the click of a button on the IDE. This debugging tool helps keep development quick and efficient while maintaining quality across platforms.

 

3. Flutter’s Great Documentation.

 

When I was introduced to Flutter, I was excited and daunted by the task of learning a new language. As I started to dive into the documentation and was pleasantly surprised by how thorough it was. It made it extremely easy to start creating applications. Flutter uses Dart, which is a programming language developed by Google. A Javascript or Java developer should be able to transition to Dart with relative ease.

 

Overall, I’m excited to see the future of Flutter. As the community grows, I’m looking forward to seeing the plug-ins that are created and the new projects we will undertake at Shockoe! I have confidence that if a client comes to us with an idea, we will exceed their every need using Flutter to increase development speed without compromising quality.

 

 

 

Editor’s Note: 

Check out the latest from our developers!

SQL vs NoSQL, the ultimate database match

Comparing React Native to Axway Titanium

Kotlin: Three Reasons To Start Using It Today