Bringing the New React Native Architecture to the OSS Community

Rate this content
Bookmark

At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app. Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system. But migrating an entire ecosystem to a New Architecture is no easy task. To support the whole community in this endeavour, we lined up a set of tools and materials that will help both app and library developers to join us in this journey. In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.

This talk has been presented at React Advanced 2022, check out the latest edition of this React Conference.

FAQ

The new architecture in React Native, often referred to as the 'new architecture', includes several key components: a new renderer called Fabric, a rewritten native module system known as Turbo Modules, and a component for type safety called CodeGen. Together, these allow for the removal of the JavaScript bridge in what is called 'bridgeless mode', enhancing performance and development efficiency.

The new architecture was introduced to address performance bottlenecks caused by the old JavaScript bridge, improve cross-platform functionality with shared C++ code, and enhance type safety with new components like CodeGen. It aims to optimize development by allowing for unified feature implementations across platforms and safer, more predictable code.

Developers will see changes in their project structures, including the presence of C++ code, and will need to adapt to new build tools and configurations for Android and iOS. The architecture brings enhancements like view flattening across platforms and type-safe code generation, ultimately aiming to improve performance and development workflows.

The key components of the new React Native architecture include Fabric (the new renderer), Turbo Modules (the rewritten native module system), and CodeGen (for type safety). These components work together to eliminate the traditional JavaScript bridge, enabling a more efficient and performant architecture.

Developers can migrate to the new architecture by following the official guides available on the React Native website. The process involves updating project settings, using new build tools like the React Native Gradle plugin or Cocoapods integration, and leveraging new features such as the CodeGen component for type-safe APIs.

Hermes is an in-house JavaScript engine developed by the React Native team, optimized for React Native apps. It enhances performance, reduces memory usage, and improves startup times. Starting from React Native 0.70, Hermes is the default JavaScript engine, although developers can choose to disable it if preferred.

The new React Native architecture supports multiple programming languages. For web development, TypeScript is now supported for writing spec files. On Android, Kotlin is fully supported, allowing developers to write apps without Java. iOS support for Swift is being explored, particularly how it interoperates with C++.

The new architecture for React Native was discussed starting in 2018, but it was fully rolled out internally by 2021. The process involved extensive development and testing to ensure compatibility and performance across the numerous applications using React Native within Facebook.

Nicola Corti
Nicola Corti
26 min
21 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The React Native community has been focusing on the new architecture, which aims to improve performance by rewriting internals using C++. The new architecture brings features like view flattening, CodeGen, and bridgeless mode. It also includes updates to build tools and JavaScript engine, such as Hermes. React Native 0.71 will include TypeScript types bundled in the NPM package, and Kotlin is fully supported on Android. The new architecture offers a transition from the legacy renderer and concurrent features, and there are resources available for migration and community support.

1. Introduction to React Native's New Architecture

Short description:

The hot topic in the React Native Ecosystem is the new architecture. Today, I'll talk about bringing the new architecture to the open source community and the challenges we faced. The new architecture is all about the bridge, aiming to get rid of the bottleneck. We rewrote our internals using C++, allowing us to write features and optimizations once and benefit every platform that uses React Native.

Hi everyone. Thank you very much for being on stage. As you heard before, well the hot topic in the React Native Ecosystem is the new architecture. So today, I have the pleasure to talk about bringing the new architecture to the open source community. And well you might have seen this talk already earlier in the year but a lot of things have changed and my team, the React team, has been developing a lot of new features and new improvements to let you enjoy the new architecture.

So today, we're going to focus on some of those as well. And well, a couple of words about myself, as mentioned, I'm an Android engineer on the React Native team, you can find me online as Kurtinico on Twitter and on GitHub. So let's get started because we have so much to cover.

And if you were to search React Native new architecture on Google or on YouTube today, you will find quite a lot of content and actually want to focus on some of it. Like specifically on YouTube, you will find those videos. And if you look at the dates, they're quite indicative on how much time we spent on building the new architecture. We started talking about it in 2018, but it's only until 2021 that we effectively fully rolled out the new architecture internally. And well, this is a testament to really how complicated this new architecture is.

And yeah, I want to stress again on the timeline here. We started in 2018 in Q2, and this started initially as a six-month project. Like literally we do planning every half at Meta and Facebook by then. And we just thought like, yeah, in six months, we're gonna make it and we're gonna update the internals and we're gonna benefit from it and everyone would be happy. That was not quite true because specifically inside the Facebook app, React Native is used extensively on thousands of surfaces and product engineers have been squeezing any possible performance gain from React Native, from the old architecture already. So trying to change the engine while the plane was flying quite fast turned out to be really challenging.

So it took us nearly three years and then we said, okay, so we are done. Amazing. How do we let the open source community now use it? And, well, here is basically more or less where I jumped in on the team and I realized this is like a really amazing and quite intricate challenge. So today we're going to focus on what are those challenges in details, what is in your architecture and what we're doing to let the open source community use it. So, if Gant hasn't convinced you already on why you want to look into the new architecture, let me reiterate.

So the new architecture is all about the bridge. Our goal is trying to get rid of this bottleneck. On top of that, we actually took a stance and did some pretty strong architectural changes, which will impact every React Native developer. First, we rewrote our internals using a cross-platform programming language, in this case, being C++. That's also the reason why a lot of developers came to us and told us, why do I see C++ code in my project? I'm not sure I want to see that. But the good thing of this is that now we can write features and optimizations just once in our shared render, and make sure that every platform that uses React Native are benefiting from it.

2. React Native's New Architecture

Short description:

View flattening is now available on both Android and iOS thanks to the new architecture written in C++. The CodeGen component eliminates string references and generates code based on your API representation. The new architecture serves as the foundation for future capabilities, including the fabric renderer, turbo modules, and bridgeless mode. The code gen simplifies writing platform-specific code by generating boilerplate. Additionally, there are other considerations, such as build tools, within the new architecture.

So, again, for example, view flattening previously was an optimization that was developed only on Android. And you had no view flattening on iOS. So now you can benefit from it because we wrote it in C++ and it's shared across all the platforms.

We also wanted to introduce type safety in our architecture. We wanted to get rid of having string references all over the places and this is possible thanks to a component called the CodeGen, which now generates code for you starting from a representation of your API that you provide to React Native.

And finally, you should think of the new architecture as the foundational stone for a lot of new capabilities that we'll be releasing in the future. Some of those haven't been released yet, some of those are in main, we haven't talked about it and so on, but there will be a lot of new features built on top of this new architecture. So, it's crucial that we have all the users move over to this new ARC because you will not benefit from new improvements from now on.

So, what is effectively the new architecture? We call it like the new architecture is like an umbrella term that helps us to reference a set of pillars, which are first our new renderer, which is codenamed fabric. You will find it all over the places in the web and in our documentation. Then we also rewrote a native module system and we codenamed this the turbo module. Then we introduced a component to provide type safety in our formula, which is called the code gen. And then when everything is in place, when you have all of your components that are fabric compatible and all of your modules, which are turbo modules compatible, you can effectively get rid of the bridge, and we call this the bridgeless mode.

So going into deep dive into all of those pillars will take me quite a lot of time, but I want just to give you a glimpse of the type safety I was mentioning before. So let me focus a bit on the code gen. So the idea behind the code gen is that we let you write like a spec file, like a representation of how your API should look like. So in this case, you're going to provide a spec file, which, as we thought, answer the ultimate question, and you're going to register it. And the code gen will work specifically here on this function, and will understand that this is something that expects a stringing input and returns a number in output. From this information, the code gen generates Android and iOS code. So we're going to like create a lot of boilerplate that, historically, developers would like to write.

As we rolled out the new architecture, we realized that it's not just about those core components. There are a lot of other corollaries and things that we have to look into, one of it being the build tools. Meta things are a little bit different internally than how they are in the open-source space. Specifically, inside Meta, we build everything with Buck.