Since 2018 React Native team has been investing a lof of time and effort to re-build the current framework architecture.
Last March 30, 2022 React Native version 0.68 was launched with a whole new main core implementation to get closer to Google Flutter framework..
In this article I’ll try to keep things simple and explain the following main topics:
This is the first React Native version that offers support of the new architecture. It’s still in experimental mode, so implementing the new architecture is still optional.
Probably you will find external libraries that are still not using the new architecture and they won’t work correctly, but React documentation explains how to migrate them here.
I would recommend to at least try to upgrade your current application to see the errors and libraries that you will need to change or prepare yourself when the new architecture to become a standard.
Let’s see what changes from now on:
Current architecture 👴
React Native (old) architecture has basically 3 layers:
– JSON – The communication between JS and Native layers happens via asynchronous JSON serialization.
Native Responsible to render the native UI interface.
Current problems 🤯
React Native is a powerful framework that I’ve been using by big companies for years, but after implementing a couple times I could list the following biggest problems in my opinion related to this architecture:
Big app equals slow app
I know that a lot of developers will say that’s not true and it is probably the way that I’m implementing the code or apps I should split my screen in smaller components, etc. But the point here is that new frameworks such as Flutter improves the performance that is not a big issue anymore comparing to React Native, and this is also a reason why they are re-building the whole core.
The app breaks and not even React can explain why
If you have never implemented an app and had to roll back everything because an internal error inside the asynchronous serialization is happening and the error is meaningless, probably you didn’t experimented everything that React Native can offer to you. It’s frustrating that suddenly your app crashes and the information is a long time ago lost in all these JSON parses that it’s impossible to understand what’s going on inside your app, there’s no guarantee that the data will reach on the other side (bridge x JSC) on time.
Synchronous Native components are impossible (without penalties)
Because of its own nature of being asynchronous, synchronous native components cannot be accessed directly in the current architecture without a workaround which can introduce other strange errors and slowing down the communication between the layers. It’s almost a nightmare.
New architecture 👶
Old bridge replacement:
- Fabric – The re-architecture of the UI manager.
- TurboModules – Allows the component to be loaded only when there are needed to optimize the app loading time.
New benefits 👶
- Access to native asynchronous native code with the new synchronous render