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.
Our Journey of Making React Native a Preferred Choice
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.
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.
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.
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.
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
- role atTommy Nguyen is principal software engineer at
Microsoft“I'm a principal software engineer at Microsoft.”
YouTube Verified3 sources· Talk
- builtTommy Nguyen built Outlook mobilehelped put React Native in the app
“I'm one of the people who put React Native in Outlook mobile.”
YouTube Unverified1 source· Talk
- works atTommy Nguyen works atMicrosoft
“I'm a principal software engineer at Microsoft.”
YouTube Unverified1 source· Talk
- usesMicrosoft uses React Nativein brownfield apps
“how Microsoft is using React Native at scale”
0:09inReact Native at Scale: How Microsoft is betting big on React Native to target BILLIONS of usersYouTube Verified14 sources· Talk
- integrates with
“We work closely with Meta, Callstack, and others.”
0:17inFrom Gaming to Productivity: how Microsoft is using React Native across a portfolio of experiencesYouTube Verified7 sources· Talk
- role atLorenzo Sciandra is senior software engineer atMicrosoft
“I'm a senior software engineer in the Office organization with Tommy.”
YouTube Verified5 sources· Talk
- works atLorenzo Sciandra works atMicrosoft
“I'm a senior software engineer in the Office organization with Tommy.”
YouTube Verified2 sources· Talk
- featureReact Native Test App: Packaged app lets teams test features and upgrade or downgrade React Native without touching native code.
“We wanted to make it so that you don't ever have to touch any native code.”
YouTube Unverified1 source· Talk
- featureRNXKit: Provides over 20 standalone JavaScript tool packages, with an optional CLI replacement.
“There are currently over 20 packages in there, all available on GitHub.”
YouTube Unverified1 source· Talk
- usesincludes plugins for
“Here you'll find everything we used internally at Microsoft, from plugins for Metro to presets and so on.”
YouTube Unverified1 source· Talk
- featureAlign Dependencies: Aligns dependency versions for a target React Native version and can reduce an upgrade to a few project changes.
“You can perform a React Native upgrade in just a few minutes.”
YouTube Unverified1 source· Talk
- metricAlign Dependencies: Live upgrade from React Native 0.71 to 0.72 took four seconds.
“It only took four seconds, and that was it.”
YouTube Unverified1 source· Talk
- metricReact Native Web APIs: Around 200 Web APIs remain after filtering those the team does not plan to support.
“There are still around 200.”
YouTube Unverified1 source· Talk
- featureReact Native Web APIs: Experimental effort aims to make selected Web APIs available across React Native platforms, with implementations chosen based on need.
“There are still around 200, which is a very big number.”
YouTube Unverified1 source· Talk
