React Native — A Bridge To Project Fabric — Part 1

In the last couple of years, React Native became one of the most popular platforms for mobile apps development. It filled some of the gaps that some developers had while asking themselves: Should I develop a mobile app using native languages or a hybrid app using web development knowledge(JS, Html, CSS using Cordova or Ionic for example)?

Using RN requires a knowledge of web technologies like the above and also React experience since it’s mostly based on it and its mechanism. So with a little bit more effort than using libraries like Cordova and a lot less effort than writing code in two native languages: Swift & Kotlin, you get a middle ground which gives you a native-like experience by writing almost 100% javascript code.

While I am playing with some code, reading many posts and watching tons of videos on YouTube and learning about The Bridge, which is the current architecture of RN at least until version 0.60, I found some more and more material about a big change in this architecture. It’s called — Project Fabric

Those new materials are not 100% organized and do not contain enough real projects for example since it’s work in progress (WIP) by the Facebook React Native team and its contributors. To get the real image of the new architecture that actually starts to make sense, I had to read and watch the same materials 2–3 times, summarise them and try to read some of their WIP code.

I would not tell you it was an easy job, but for me, definitely a rewarding one. I learned so much from this process of diving into this code and decided to write a series of 3 posts to spread some more light on the current architecture & the future one.

These will be the posts

Part 1 (current) — Intro and what is this Bridge that everyone is talking about and what is the “magic” behind it?

Part 2 - How does the engine behind React Native works? Giving an example of flow.

Part 3- The advantages and disadvantages of the bridge and what is next? Project Fabric

Let's start this part by explaining where React Native stands compared to other options.

In the image above, I took part in the libraries you can use (of course that there are hundreds more) to develop a mobile app that you can upload to a store (App Store, Google Play..)

I would divide those platforms into three (right to left):

1. Native. It means you want to write your app using a native language like Swift for iOS or Kotlin for Android. You will defiantly get here the best performance and you will be able to get the most out of the device hardware and native APIs. But, it requires learning two different programming languages, maintaining two different repositories of projects and has probably a double amount of bugs and maybe even two different development teams.
2. Hybrid. If you are a web developer or have a team of web developers who are already familiar with JS, HTML, CSS and maybe some frontend lib (not required), you can take them and with some more steps using Cordova/Ionic make your website a mobile app or just develop a mobile app. Here we learn only one development stack and using only one team. But, we might pay in a limitation on the performance side, hardware limitations and other device abilities we want to access like : GeoFencing.
3. Native-Like (also kind of Hybrid in a way). This is the category where React Native stands in. You learn JS, HTML, CSS and using your web development team that might also know React lib or need to learn it. But now they can have a little higher learning curve than the Hybrid options. They learn to React Native lib and might need to open the project in some cases in XCode or Android Studio (IDEs for iOS and Android) but the code they write will be relevant to both iOS and Android platforms and in this case, there are fewer limitations than the Hybrid option. The performance will be almost like you wrote native code and you will be able to access hardware a lot easier if we are talking again about the example of GeoFencing as a use case.

Now that we understand where RN stands, let compare a case of using Cordova as a use case of Hybrid app between RN app

As you can see in the image above, the app which used Cordova is hosted as a web view inside a real native component called the UIView (in case of the example of iOS). Generally, it’s more like a browser inside a mobile app and everything is affected by that. If you want an example from the web dev world, it’s more similar to an iframe inside a web app.

The left side shows how it works in React Native. Each component in the RN Javascript library (Text, Button, Image..) has a corresponding native component written in the native language. So differently that most new RN developers think, it’s not compiling to native code, it’s mapped to a corresponding component in the native side.

When we write this part of code inside a render function of an RN component this way =>

Part of the pre-written native component will look like that behind the scenes =>

If we take iOS as an example, this is the inner code of a native module in RN =>

To summarise, the RN team already created and mapped all the native modules for you. What you need to do is just write what you love — javascript code using RN components and library. All the rest will be transparent to you as a developer and will work like a “magic”.

But you know, magic is not real (sorry Santa), especially in coding.

Now that we are ready to put our legs inside the water before we dive, let’s do it!

So it seems that you just write js code and it’s just working. Let me start explaining step by step how this architecture is built. The best place to start is the Bridge.

Each side has its own thread: JS and Native (that has more but we will talk about them later).

The thread can communicate with the bridge with JSON messages containing: module id, method id to use and data if needed. They are not aware of each other directly and do not share the same memory.

It’s like the message broker pattern. When you have backend services written in different languages, how will you communicate between them?

A queue is a great solution many people use. You send the queue JSON/XML message in an agreed format and each service knows how to read it and translate it to action on his side. So this queue is the Bridge.

This is an example of how the communication looks, a message is sent to the bridge. From creating new views and show on the screen + its styles to setting children on the mobile side and doing some actions =>

For the curious ones here, to see the bridge messages on the console, just put the following snippet into the index.<platform>.js file =>

Now we understand how it communicates and starting to break the magic.

• Calls js code from objective-c and vice-versa. RN uses JSCore which is more fit to iOS and already built-in there.
• JS Engine knows to convert JS to machine language and work much more efficiently.

Chrome, for example, uses V8 and this is not just luck that this one of the most popular and fastest browsers.

This is one of the reasons that if you have an android app it takes more time to load since it’s bundling JSCore to its project.

But here is a spoiler announcement from the last ChainReact conference by Mark Horowitz. Hermes which is a JS Engine ideal for RN is available to use since version 0.60.2

Now that we broke some of the magic of the Bridge, we are ready to deep dive and give an example flow of opening an RN app and explain how the JS and Native side are actually communicating with the help of the bridge and much more interesting architecture parts in the next post.

• Credits to unsplash.com and Freepik.com for part of the image resources (relevant for all 3 parts)

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/