The original address: formidable.com/blog/2019/l…

Lorenzo Sciandra

Release time: April 16, 2019

The React Native redesign, first announced in 2018, is a massive effort by Facebook to address some of the long-standing issues with this cross-platform mobile solution.

In this series, we’ll provide an overview of the major elements that make up React Native’s new architecture. We will avoid showing code to make this explanation as easy to understand as possible, and will share our excitement about this new implementation.

In this final article, we will tackle the last block of the old architecture diagram introduced in the first article.

Instead of iterating directly over the code, most of the changes come from how the previous elements are refactored.

  • New React and CodeGen
  • JavaScript interface (and JSC)
  • The Fabric and TurboModules

React Native, on a more conceptual level, wants to be “agnostic” to its Native platform. This is a key feature that enables third party implementations such as React-Native Web and React-Native Windows.

In addition, the Facebook team doesn’t own either iOS or Android, so this last approach doesn’t delve “vertically” into these behaviors; However, the overall size of the React-Native code base involved can be reduced “horizontally”.

This effort is called “Lean Core,” and it is also an aspect of rearchitecting, where community help is fundamental. At a high level, this approach is intended to extract the code currently living in the main React Native repository into its own repository.

This has two main benefits: reducing the weight of generated applications and allowing elements not directly used by Facebook to be properly maintained. The latter has received less attention in the past because of the complexity of modifying the code owned by Facebook.

So if we were to replace this fourth block and use it to create a complete graph of React Native’s new architecture, this would be the result.

As you can see, the Facebook team’s complex efforts affected many different aspects of the React Native way of working without significantly affecting the developers who use it. This is no small feat!

The benefits of the new architecture will greatly increase the quality and performance of applications developed through React Native, which will become less and less different from “pure Native” apps.

When will these changes be ready and available? This mammoth effort will most likely reach a conclusion around the fourth quarter of 2019 or the first quarter of 2020, but there is no firm date yet. Since the Facebook team is publicly working on this redesign, you can keep an eye out for updates. In writing this article, we can sum up as follows.

  • The new React = supports 16.8 starting with version 0.59 (Suspense is partially available since 16.6)
  • CodeGen = Development in progress in main repository (dedicated discussion)
  • JSI = is already on the main release, available since 0.59 (but there is currently no direct documentation on how to use it) (dedicated discussion)
  • TurboModules = Development processes in the main warehouse (dedicated discussion)
  • Fabric = Development progress in the main repository (dedicated discussion)
  • Lean core = continuous, see this question for details (dedicated discussion)

For most of the points above, I’ve attached a link to a special conversation on GitHub that contains the latest information, so stay tuned for those that are up to date.

Overall, we think this work demonstrates several major enhancements to React Native. It’s an exciting time to be a React Native developer, and we hope this series of articles will help you get a better handle on the huge changes that are coming your way.

If so, be sure to share this post with your developer friends or contact follow-up questions on Twitter (DMs is open).

As you can imagine, we hope this blog series has inspired your excitement about just how powerful these changes are and how they will affect your codebase without requiring any rewrites.

All aboard the hype train

Other parts.

The first part of the second part | | in the third section

We would like to thank Kadi and Carlos of the Formidable team for vetting this series of articles and making sure they are correct, Mark for the graphics, and Amy for her editorial work. Special thanks to Eli White and Rick Hanlon of the Facebook React Native team for proofreading the draft and making sure it’s correct.

www.deepl.com translation