News

5 Years in, React Native Facing Re-Architecture

• By David Ramel
• June 19, 2018

Though it debuted in early 2015, Facebook's game-changing, open source React Native technology for building mobile apps has actually been under development for five years.

That's how long originator Facebook has been adapting its popular Web development JavaScript library -- React -- to create native mobile Android and iOS apps purely with JavaScript.

With lessons learned during that time, it's now facing a major re-architecture to provide more flexibility and integrate the framework better with native infrastructure in hybrid JavaScript/native apps.

"With this project, we'll apply what we've learned over the last 5 years and incrementally bring our architecture to a more modern one," Facebook engineering manager Sophie Alpert said in a blog post titled "State of React Native 2018" last week. "We're rewriting many of React Native's internals, but most of the changes are under the hood: existing React Native apps will continue to work with few or no changes."

One of the lessons learned concerned the original premise of a single asynchronous, serializable and batched bridge used to translate JavaScript code into native calls. While providing many benefits, that approach was eventually deemed to cause problems.

"An asynchronous bridge means you can't integrate JavaScript logic directly with many native APIs expecting synchronous answers," Alpert said. "A batched bridge that queues native calls means it's harder to have React Native apps call into functions that are implemented natively. And a serializable bridge means unnecessary copying instead of directly sharing memory between the two worlds. For apps that are entirely built in React Native, these restrictions are usually bearable. But for apps with complex integration between React Native and existing app code, they are frustrating."

To lessen such frustration, the re-architetcure will focus on three major changes internally:

• A new threading model: "Instead of each UI update needing to perform work on three different threads, it will be possible to call synchronously into JavaScript on any thread for high-priority updates while still keeping low-priority work off the main thread to maintain responsiveness."
• New async rendering capabilities: "To allow multiple rendering priorities and to simplify asynchronous data handling."
• A faster and more lightweight bridge: "Direct calls between native and JavaScript are more efficient and will make it easier to build debugging tools like cross-language stack traces."

Facebook, which open sourced React Native in 2015, is also seeking input from the community to better support it by serving React Native users better and by making the project easier to contribute to.

Alpert promised more details on the re-architecture project as work progresses this year. For a look at how the news was received in the developer community, you can see this Hacker News post.