Return to Answer

I know there are already many answers to it but after reading all these I felt no one explains what is the architectural difference between these two and how these two works so I believe there is still room for explanation.

Now you know what is SPA, So as you know it's a web app so it will use HTML elements for running into the browser and also used JS for handling all the functionality related to these elements. It used Virtual DOM to render new changes in the components.

1. Javascript Interface which allows us to register methods with the Javascript runtime. These methods are available via the global object in the Javascript world.

2. The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code in Android.

3. Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++ On iOS writing, this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use directly.

4. On android however we have to go the extra mile to do this through JNI.

5. These methods can be fully synchronous which means using async/await is not mandatory.

I know there are already many answers to it but after reading all these I felt no one explains the architectural difference between these two and how these two works so I believe there is still room for explanation.

Now you know what is SPA, So as you know it's a web app so it will use HTML elements for running into the browser and also use JS for handling all the functionality related to these elements. It used Virtual DOM to render new changes in the components.

1. Javascript Interface which allows us to register methods with the Javascript runtime. These methods are available via the global object in the Javascript world.

2. The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code on Android.

3. Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++ On iOS writing, this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use now.

4. On android however we have to go the extra mile to do this through JNI.

5. These methods can be fully synchronous which means using async/await is not mandatory.

React is a JS library which is used to make beautiful, flexible, performant single page web applications, So now a question will appear in your mind what is single page web app.

A single-page application is an app that works inside a browser and does not require page reloading during use. You are using these types of applications every day. These are, for instance: Gmail, Google Maps, Facebook, or GitHub. SPAs are all about serving an outstanding UX by trying to imitate a “natural” environment in the browser — no page reloads, no extra wait time. It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on. SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js, React.js, Vue.js. Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy, and workable fashion.

All of the React code is executed inside JS thread and the final value passes to the native thread which draws a layout on the screen with the final value.

JS thread performs all of the calculations and passes data to native, How?

React uses an Async Bridge to pass data to Native thread in JSON format is called React-Native

So we use Native components for making a presentational view in react-native and use that bridge to communicate between these two different worlds.

Update: React-Native is now going through re-architecuter phase and facebook team is trying to remove async bridge to communicate between JS and native synchronously the major part of this re-architecuter is JSI(Javascript interface) and fabirc.

JSI: JSI removes the need for a bridge between Native(Java/ObjC) and Javascript code. It also removes the requirement to serialize/deserialize all the information as JSON for communication between the two worlds. JSI is opening doors to new possibilities by bringing closes the javascript and the native worlds.

Below are the main things which JSI is offers.

1. Javascript Interface which allows us to register methods with the Javascript runtime. These methods are available via the global object in the Javascript world.

2. The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code in Android.

3. Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++ On iOS writing this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use directly.

4. On android however we have to go an extra mile to do this through JNI.

5. These methods can be fully synchronous which means using async/await is not mandatory.

Fabric: Fabirc is a new UI layer which allows us to communicate with the native UI components synchronous, According to the docs.

Fabric is React Native's new rendering system, a conceptual evolution of the legacy render system. The core principles are to unify more render logic in C++, improve interoperability with host platforms, and to unlock new capabilities for React Native. Development began in 2018 and in 2021, React Native in the Facebook app is backed by the new renderer.

React is a JS library that is used to make beautiful, flexible, performant single page web applications, So now a question will appear in your mind what is single page web app?

A single-page application is an app that works inside a browser and does not require page reloading during use. You are using these types of applications every day. These are, for instance: Gmail, Google Maps, Facebook, or GitHub. SPAs are all about serving an outstanding UX by trying to imitate a “natural” environment in the browser — no page reloads, no extra wait time. It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on. SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js, React.js, and Vue.js. Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy, and workable fashion.

All of the React code is executed inside the JS thread and the final value passes to the native thread which draws a layout on the screen with the final value.

JS thread performs all of the calculations and passes data to the native, How?

React uses an Async Bridge to pass data to a Native thread in JSON format is called React-Native

NOTE: New architecture does not rely on the bridges anymore it used JSI and fabric for the communication between native and JS code which happened synchronously(it's explained in the below section).

So we use Native components for making a presentational view in react-native and use that bridge to communicate between these two different worlds.

Update: React-Native is now going through a re-architecture phase and the Facebook team is trying to remove the async bridge to communicate between JS and native synchronously the major part of this re-architecture is JSI(Javascript interface) and fabric.

JSI: JSI removes the need for a bridge between Native(Java/ObjC) and Javascript code. It also removes the requirement to serialize/deserialize all the information as JSON for communication between the two worlds. JSI is opening doors to new possibilities by bringing close the javascript and the native worlds.

Below are the main things which JSI offers.

1. Javascript Interface which allows us to register methods with the Javascript runtime. These methods are available via the global object in the Javascript world.

2. The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code in Android.

3. Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++ On iOS writing, this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use directly.

4. On android however we have to go the extra mile to do this through JNI.

5. These methods can be fully synchronous which means using async/await is not mandatory.

Fabric: Fabric is a new UI layer that allows us to communicate with the native UI components synchronously, According to the docs.

Fabric is React Native's new rendering system, a conceptual evolution of the legacy render system. The core principles are to unify more render logic in C++, improve interoperability with host platforms, and unlock new capabilities for React Native. Development began in 2018 and in 2021, React Native in the Facebook app is backed by the new renderer.

So let's talk about React first because React-Native also based on react and the same concept of JS is been used there.

React-Native used to make beautiful cross-platform mobile apps(Android, iOS) using React.

JS thread is fast enough to execute JavaScript and the native thread is also fast enough to execute native code but as React used async bridge to communicate between these two worlds, overloading this bridge causes performance issues.

So let's talk about React first because React-Native is also based on react and the same concept of JS is been used there.

React-Native is used to make beautiful cross-platform mobile apps(Android, iOS) using React.

JS thread is fast enough to execute JavaScript and the native thread is also fast enough to execute native code but as React used the async bridge to communicate between these two worlds, overloading this bridge causes performance issues.

Update: React-Native is now going through re-architecuter phase and facebook team is trying to remove async bridge to communicate between JS and native synchronously the major part of this re-architecuter is JSI(Javascript interface) and fabirc.

JSI: JSI removes the need for a bridge between Native(Java/ObjC) and Javascript code. It also removes the requirement to serialize/deserialize all the information as JSON for communication between the two worlds. JSI is opening doors to new possibilities by bringing closes the javascript and the native worlds.

Below are the main things which JSI is offers.

1. Javascript Interface which allows us to register methods with the Javascript runtime. These methods are available via the global object in the Javascript world.

2. The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code in Android.

3. Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++ On iOS writing this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use directly.

4. On android however we have to go an extra mile to do this through JNI.

5. These methods can be fully synchronous which means using async/await is not mandatory.

Fabric: Fabirc is a new UI layer which allows us to communicate with the native UI components synchronous, According to the docs.

Fabric is React Native's new rendering system, a conceptual evolution of the legacy render system. The core principles are to unify more render logic in C++, improve interoperability with host platforms, and to unlock new capabilities for React Native. Development began in 2018 and in 2021, React Native in the Facebook app is backed by the new renderer.