React Native — A Bridge To Project Fabric — Part 2

In the previous post, I explained the way the bridge lets JS thread communicate with the Native thread and vice-versa.

In this post, I am going to break the process of opening the React Native app from the moment you click on the app icon to the moment the app opens to small parts and explain each relevant term inside it.

Let’s go!

In order to understand how RN creates the views in the background, I will need to explain to you some fundamental terms.

1. UIManager — Responsible on the native side. This is the main thread where the iOS/Android app is running. It has access to the UI which can be changed only by it.
2. JS Thread — Run all the bundled main.bundle.js file which contains all the logic of the app & the React Native behavior and components.
3. Shadow Node/Tree — Represent a tree of the mutable native side of the app. It supposes to help follow the UI changes inside the app (if it helps it has kind of the same relationship between the Virtual DOM and the DOM in ReactJS.
4. Yoga — Its job is to calculate the layout. It is a C engine created by Facebook that knows how to convert a flexbox-based layout into the native host layout system.

After you got some fundamentals lets take a flow of opening an app and I will describe what happens behind the scenes on each step =>

1. User click on the app logo
2. UIManager thread — loads all the native side and the native modules (remember? Text, Button, Image and much more..)
3. It tells the JS thread that it is ready and now the JS side loads all the main.bundle.js which contains all js and react logic + components
4. It sends a message thought the bridge (JSON message) that will tell the native side how to create the UI. It is important to mention that all the communication through the bridge is asynchronous and sent in batched action to avoid blocking the UI while it happens. Here is an example =>

5. The shadow thread gets the message and first, it creates the UI tree

6. From there it uses the Yoga layout engine to take all the current flexbox- based styles and convert it to native layout width, height, spacing..

7. Now the UIManager do its thing and show the UI on the screen like that =>

That’s it, those are the main steps that happen only when you lunch the app.

There are some great advantages by using this architecture in RN

• UI is not blocked -> User experience feels smoother
• No need to write native code — most of the code can be javascript using RN library
• Performance is getting closer to native
• Everything is done without you need to control it and fully understand it

But, where you can find advantages, you can always find some disadvantages and in the next post, I am going to explain about the new architecture which supposes to avoid them — Project Fabric.

I will be happy to get some Claps and if you also want to follow me on twitter to see the slides and lectures I started giving about it you are welcome to follow here

Feedbacks are also welcome! Thanks for reading (:

My lectures about this subject

• React Week NYC 2019 (English) — https://youtu.be/k1Y6C11QX5c
• React Next 2019 (English) — https://youtu.be/_IiDHmAPH28
• Reversim 2019 (Hebrew) — https://youtu.be/2eZ4G-loZkY
• Podcast episode (Hebrew) — https://www.ranlevi.com/2019/07/23/osim_software_react_native_bridge/