How the React Native Bridge works (and how it will change in the future)

a react native app is made up of two separate pieces the native code and the javascript code the problem is since it's two different languages they can't speak to each other they are isolated in their own little lonely worlds but luckily we have the react native bridge which is how the native code and the javascript code talk to each other without the bridge there is no way for the native code to send any information to the javascript code or vice versa but how does it work to figure that out let's look at what happens when an app starts up you tap the app icon and the operating system creates a main thread also called a ui thread and assigns it to our app the main thread spawns a javascript thread and then the shadow thread sometimes called the shadow tree now the shadow tree's job is to calculate the layouts that we define on the javascript side and send that information to the native side what if we want to disable a button we've created well to disable a button we set a property on the javascript side which will be sent over the bridge as a serialized json object updates to native views are batched together and sent over to the native side at the end of each iteration of the javascript event loop in addition to passing properties across the bridge we can also pass a function across the page to use as a callback say if a button is pressed then the native event is sent to the javascript site and the callback is executed now the majority of the time everything runs smoothly but like a real-life fridge you can occasionally get traffic jams when you have a big list of items and start scrolling really fast you might see a blank screen before the rest of the items are shown this is because the on scroll native event is being sent to the javascript thread the javascript thread sends the new layout information to the shadow tree the shadow tree calculates the layout and sends it back to the native side when scrolling fast you get a bunch of these events which causes a traffic jam across the bridge you also get performance problems when running complex animations so for example say we have an ios device running at 60 frames per second which gives it that nice smooth lifelike feel after one frame is shown you have roughly 16 milliseconds to run code and display the next frame if you take too long then the frame is dropped and your app appears unresponsive or just laggy so with complex animations it's best to say on the ui thread as much as possible now facebook is well aware of some of the performance hits when using the bridge and they've been working on a whole new architecture for react native that will address these performance issues they're implementing something called the javascript interface or jsi which will sit between the javascript code and the javascript engine currently react native runs on javascript core which is already part of ios because it runs a safari browser but javascript core has to be shipped with your android react native app and it has some performance issues on low end or older androids not to mention making the bundle larger but now we have hermes which is a lightweight javascript engine optimized for running react native on android so this new jsi will sit in between the javascript code and either javascript core or hermes or any other javascript engine we want to swap to as a side note when you run react native and debug mode it actually runs in chrome which uses the v8 engine in rare cases that can lead to some inconsistencies between how javascript runs in debug versus production swapping out javascript engines is nice and all but the real benefit to using jsi is the javascript side and the native side can finally talk to each other you will not have to serialize a json message and send it over the bridge to talk to the other side holy the new shadow tree will be written in c plus and shared across both sides currently all interactions over the bridge are asynchronous but in the future we will be able to synchronously execute actions over the bridge solving the performance issues around scrolling large lists that we just talked about this works because javascript will be able to have a reference to the c plus object and invoke methods on it at the time of this video jsi is mostly stable but still needs improvements before being production ready earlier i mentioned all native modules used by the javascript code have to be initialized on startup which can impact performance as a part of the new react native architecture that will change the javascript code will load only the module when it's actually needed no more using the old bridge because a javascript code can hold a direct reference to what is now called a turbo module this is going to improve startup times for apps that use a lot of native modules at the time of this video turbo modules seem to be mostly working but they haven't been officially released facebook is using turbo modules internally and react native reanimated recently released version 2 using turbo modules the new react native architecture is going to bring some awesome improvements to the platform and i'm super stoked on it it's kind of up in the air when jsi will be officially released it was supposed to be released mid-2020 but that didn't happen the first half of 2020 was pretty crazy so it's understandable and also at the same time every software project has to be released late it's a law of physics so anyways i'm not sure when this is going to be released but i want to know when do you guys think it's going to be released pick a date and post your prediction in the comments and let's see who gets the closest once it's actually publicly released thanks for watching guys there's more react native videos coming every week so make sure you subscribe

Channel: Jimmy Cook

Views: 13,257

Keywords: react native, programming, coding, tutorial, app, app development, ios, android, cross-platform, bridge, guide, react, javascript, swift, kotlin, java, objective c, javascript framework

Id: TU_kTuz2i9Y

Length: 6min 44sec (404 seconds)

Published: Thu Aug 06 2020

Reddit Comments

[u/q13214]

Literally was just about to Google this to prep for a project I'm starting tomorrow. Thanks a lot man.

[u/ijustclosedthewindow]

Awesome explanation!

[u/burnt1918]

What's meant by Native code?Java/Swift or machine code for each platform?

[u/gbland777]

This is extremely helpful! I was curious about the new reanimated package and how it worked. Now I understand better, thanks for sharing!!

[u/jsnoobie]

This is really good. Keep making vids man

[u/Riju_1999]

Amazing explain 💯

[u/teyiwpron]

Thank you!

[u/swyx]

very high production value! how long does it take to make a video like this! 🤯

i find it funny that RN is going synchronous just as React on the web is going async (or concurrent). both address perceived perf, just at different levels.

kudos and keep it up!

1 small piece of feedback - asking about predictions at the end didnt strike me as a good qtn to ask. everyone gonna be pulling numbers out of their ass anyway.

[u/IamAggressiveNapkin]

This will come in handy for a project I’m in the middle of planning, thanks!!