REACT NATIVE NEW ARCHITECTURE

Estimated read time 2 min read

React native new architecture (0.68) is releasing 2022 which has some of the new terms like JSI, FABRIC, TURO MODULE and codegen. here we will do a comparison of existing architecture vs New

JSI ( Javascript Interface)

FABRIC

TURBO MODULE

CODE GEN

JAVASCRIPT INTERFACE (JSI)

Current Architecture :

  • There was a bridge between the JavaScript thread and the Native thread
  • Interaction between JS thread and Native thread is asynchronous

New Architecture :

  • Bridge will be replaced by JSI
  • JSI decoupled from Javascript Engine
  • JSI has written in C++

FABRIC

Current Architecture :

  • Using Bridge interact between JS thread and Native thread
  • Slow Transfer Rate
  • Performance issues on some of the use cases like implementation Scrolling list due to JS & UI threads are not in Sync.

New Architecture :

  • FABRIC — new Rendering system
  • UI interactions executed synchronously
  • Shadow tree will be immutable and shared between JS & UI threads

TURBO MODULES

Current Architecture :

  • All the Modules need to be preloaded before the App starts, it will cause the performance issues when the app launches

New Architecture :

  • Holds the reference of the modules and allows them to load whenever required.
  • Improve the start time of the Applications.

CODEGEN

  • Automate the compatibility between the JS thread and Native Thread
  • Generate native code at build time instead of run time
  • Define Interface elements used by Turbo Module and Fabric

Note: We will cover the migration of existing code to new Architecture in the next Article.

Reference:

 https://reactnative.dev/architecture/overview

https://link.medium.com/oc8Zbr1ncpb

Loading...