WhoBuilt

Our Journey of Making React Native a Preferred Choice

Sep 22, 2023· 30 min· 2.7K views·Watch on YouTube

Speakers

Microsoft principal software engineer Tommy Nguyen and senior software engineer Lorenzo Sciandra, a React Native release maintainer, present at React Native EU 2023 about Microsoft’s developer tooling and experiments to make web code work across React Native platforms.

Making tooling invisible

Nguyen and Sciandra describe Microsoft’s use of React Native across apps including Outlook, Word, PowerPoint and Excel, as well as Windows, macOS and Xbox. Teams work across separate repositories, platforms and React Native versions, facing issues such as large bundles and upgrades that take months. Their goal is a developer experience where teams can focus on their work rather than the tooling.

Tools for testing and upgrades

Microsoft built a reusable React Native test app so teams can try features without maintaining a separate native app, and it supports React Native versions 0.64 through 0.72 with nightly checks against the current nightly build. RNX Kit provides more than 20 standalone JavaScript tools, including Metro plugins and a CLI replacement. Sciandra says its tree-shaking plugin has cut bundles by up to 50 percent internally; Renault reduced a bundle from 18 MB to 4 MB, largely by removing unused Font Awesome icons.

A faster React Native upgrade

Sciandra says upgrading from React Native 0.68 to 0.71 creates a large diff that would be difficult to repeat across many teams. Combining React Native Tests, which handles native files, with RNX Kit’s Align Dependencies tool reduced a live upgrade from 0.71 to 0.72 to three changes in about four seconds. The presenters then built and ran the upgraded app on iOS and Android.

Exploring universal web code

After describing improvements to setup and upgrades, Nguyen and Sciandra turn to requests to reuse features across apps and bring existing web code to React Native. Sciandra demonstrates importing a web app’s battery-level code into a React Native app, while explaining that the demo does not solve the broader compatibility problem. React Native lacks browser Web APIs such as Navigator’s getBattery, and their survey identified around 200 APIs to consider.

An experimental, collaborative plan

Sciandra says the team wants to prioritize Web APIs based on actual usage, avoid shipping implementations that an app does not need, and make the work open source. Their RFC proposes support across iOS, Android, Windows and macOS, and they are discussing the direction with Meta. The implementation remains experimental, and the presenters invite community input rather than recommending adoption.

Takeaways

  • A reusable test app can reduce the burden of maintaining native test projects across teams.
  • Nightly checks against upcoming React Native versions can help teams address breakages before a release.
  • Combining dependency compatibility checks with automated native-file handling can make upgrades much smaller.
  • Measure bundle-size savings on real apps, since unused dependencies can account for substantial weight.
  • Prioritize cross-platform API work by actual product needs, and keep experimental implementations clearly labeled.

Mentioned in this talk

Search inside this talk

What was claimed 14

Show all 14 facts

Related talks

Our Journey of Making React Native a Preferred Choice, Lorenzo Sciandra, Tommy Nguyen · WhoBuilt