Hello there, My name is Darshan Ponikar. I work as Software Engineer at GeekyAnts. I look forward to sharing my insights on React Native's new architecture.
I brainstormed the new term JSI in React Native in the past few months. I had many questions, like why does React Native need a new architecture?
Understanding the current architecture problem will affect developers who code in React Native and so on. I tried to connect the dots, and here I am.
I will share my experience with React Native architecture. In this blog, you will learn what JSI is, whether it is faster than the bridge architecture, and, most notably, as React Native developers, do we need to know new concepts to build a React Native app?
Let's recap some good memories of react native before we jump on the new architecture part.
Consider these different environments as universes. With that help, universes can send data back and forth, and we have a bridge.
Everything happens through this bridge. The bridge is responsible for the communication between these universes.
Sometimes the bridge becomes too slow because,
- JS universe sends data back and forth.
- The process of serializing/deserializing takes time.
- Some data needs to be queued hence the delay in response.
In this scenario, the bridge can't handle the load, and eventually, users experience a lag.
We see that bridge is not sufficient for communication. The React Native wizards (React Native core team) identified this problem and started searching for a replacement for this bridge.
The React Native wizards came up with a new way to communicate between universes. They named it JSI. Don't worry, and I was utterly shocked like you. Let's deeply understand this.
I know this is a little unclear. Let me break this down.
JSI eliminated two significant problems.
1. Data doesn't need to be queued.
2. Data doesn't need to be serialized/deserialized.
This probably looks like magic and doesn't make any sense at first. Let's understand the story behind the JSI.
On the Native iOS side, We can write C++ code along with Objective C. This lets us write JSI binding.
On the Android side, we can't write C++ code directly, so We need JNI., which lets us interact with C++ code through JNI. This way, we can bind our Native Java method to C++.
This method can be synchronous because it seems like it is implemented in JS (but it is not).
So now we have a decent knowledge of how JSI is working under the hood. Let's understand how data is sent between different universes.
In old architecture, everything was sent in a JSON format. JSI does type casting like any other language. We can get data as strings, numbers, arrays, or objects.
So when we are going to write a JSI module, we can type cast data as number, string, array and object.
JSI is a foundation of a new architecture. This was a basic understanding of what JSI is. However, React Native Architecture has three pillars: Fabric, Codegen, and Turbo modules. We will talk about these pillars in upcoming blogs.
I hope you have gained some knowledge by reading this blog. Please share your thoughts in the comment box.
You can contact me on Twitter - Darshan Ponikar, if you want to know more about the new architecture.