The architecture behind React Native

Laura Beatris

Full Stack Engineer/Creator

LauraBeatris

LauraBeatris

LauraBeatris

Summary

• What's React Native?
• Building blocks overview
• Build process
• Runtime process 
• Bridge
• Tradeoffs
• New archicture

What's React Native?

• Cross-platform framework to build native apps
• Based on the React library
• Created by Facebook in 2015

Benefits:

• Support several platforms on a single codebase
• Not repeat business logic across multiple codebases
• Easier to manage a team of mobile engineers

React Native

React Native API (JS)

React Libs

C++

IOS Native Modules

Android Native Modules

Building Blocks Overview

Build Process

• Native code is compiled to binary
• JS code is bundled by the metro bundler and turns to a single file

APK

Runtime Process

• The JS VM (JavaScript Core) runs JS code 
• The main thread runs the native code on the OS

Bridge

• C++ module

• Gets data from one of either side -> serializes it as a string and pass it through the queue and deserialize it on arrival.

• Handles the communication between the JS thread and the Native thread

This process is Asyncronous

Tradeoffs

• The bridge is asynchronous and it can lead to delays in the UI 
• Slow startup time because of the huge amount of JS code to run 

And the new architecture of React Native is coming to solve these issues

New Architecture (JSI and new UI layer)

• Deprecation of the bridge in favor of the Javascript Interface (JSI)

• Other JS engines can be used instead of JS core

• Announced on 2018

• JavaScript can hold a reference to C++ Host Objects and invoke methods on them.

Fabric and TurboModules

• As mentioned before, the bridge handles the communication between the JS side and native side by asynchronously sending JSON messages

• The new architecture splits the bridge into two different building blocks:  Fabric and TurboModules

• Fabric: The re-architecture of the UI manager

• TurboModules: Handle the interaction with the native side

Lean Core

• Agnostic from native platforms

• Extract codes from the main RN repository to separate ones

• Allow a better maintenance of the community

• Reduces the weight of the generated app

The new architecture is the future of a lean multi-platform framework that is easy to customize with the power of C++

LauraBeatris

LauraBeatris

LauraBeatris