React Native Series #1 — The Architecture Wars. An Introduction to The New Architecture

In the world of mobile application development, React Native has emerged as a game-changer. It’s a framework that allows developers to write mobile applications in JavaScript and have them run natively on both iOS and Android devices.

But as with any technology, it’s not without its challenges. The original architecture of React Native, while innovative, had its limitations. To address these, the team behind React Native introduced a new architecture.

This article aims to provide an insight into this new architecture, especially for developers who are not deeply involved in mobile development but are curious about the evolution of React Native.

The Need for a New Architecture

The original architecture of React Native was built around a component called “The Bridge”. This component was responsible for communicating between the JavaScript layer and the native layer. However, it had several limitations. It was asynchronous, single-threaded, and imposed extra overhead due to serialization and deserialization of data. These limitations led to performance issues and made the framework less flexible.

The new architecture was introduced to address these challenges. It aims to improve performance, simplify the interoperability between JavaScript and native, and make the framework more lightweight. This is achieved through several key changes in the way React Native works.

The Pillars of the New Architecture

The new architecture of React Native is built on three main pillars: JavaScript Interface (JSI), TurboModules, and Fabric.

JavaScript Interface (JSI)

JSI is a unified, lightweight API that allows JavaScript to directly call native code and vice versa. This is a significant departure from the old architecture where communication between JavaScript and native code had to go through “The Bridge”. By enabling direct communication, JSI eliminates the need for serialization and deserialization, thereby reducing overhead and improving performance.

TurboModules

TurboModules are a new system for defining native modules in React Native. Unlike the old native modules, TurboModules are lazily initialized, meaning they are only loaded when they are actually used. This can lead to significant performance improvements, especially for apps with a large number of native modules. Additionally, TurboModules have type-safe APIs, which can help prevent bugs and improve developer productivity.

Fabric

Fabric is a new UI layer in React Native that aims to improve the performance of complex views. It allows for concurrent rendering, which can lead to smoother animations and transitions. Fabric also makes it easier to work with native components in React, providing a more seamless integration between the JavaScript and native layers.

Codegen: The Unknown Hero

While not officially a pillar of the new architecture, Codegen deserves a special mention. It’s a tool that can be used to avoid writing a lot of repetitive code. It’s not mandatory to use Codegen, but it can save a lot of time by generating scaffolding code. Codegen is invoked automatically by React Native every time an iOS or Android app is built, ensuring that the latest changes are always included in the build.

Conclusion

The new architecture of React Native represents a significant step forward for the framework. It addresses many of the limitations of the old architecture and introduces new features that make the framework more efficient and easier to work with. Whether you’re a mobile developer or not, it’s an exciting development to watch. Stay tuned for more articles in this series where we’ll dive deeper into each of these pillars and explore how they’re changing the future of mobile development with React Native.

• Tags:
• React Native
• React