WhoBuilt

React Native at Scale: How Microsoft is betting big on React Native to target BILLIONS of users

Sep 27, 2022· 12 min· 3.5K views·Watch on YouTube

Speakers

Stephen Moyes, a program manager on Microsoft’s React Native team, presents with software engineer Shivan and Windows contributor Slobo at React Native EU about how Microsoft uses React Native across mobile and desktop.

Microsoft’s many-platforms strategy

Moyes describes React Native as a way to build experiences for Microsoft products across mobile and desktop. He connects that approach to React Native’s vision for iOS, Android, desktop, web, VR, and native platforms, and says Microsoft is investing in iOS, Android, Windows, and macOS.

Keeping desktop React Native close to core

Moyes says the Windows and macOS teams aim to keep desktop React Native capable and current with React Native core, including Hermes by default and the new architecture. Windows rebases had taken less than a week in recent releases; he notes macOS still had work to do, with version 0.68 released on July 7.

React Native in Windows Settings

Slobo demonstrates the Microsoft Account page in Windows 11 Settings, built with React Native inside an otherwise native C++ and XAML app. The team can load a development bundle, change a feature flag, and see the page update with payment method details. Moyes points to Windows-specific modules that expose native SDK and presentation APIs.

Office mobile experiences and runtime choices

Shivan describes React Native experiences in Word, Excel, PowerPoint, and Office apps, including the Office mobile app’s Feed tab, which shipped recently and serves millions of users on iOS and Android. Microsoft moved some mobile features from V8 to Hermes and uses a shared JavaScript instance for long-running features, while creating other instances on demand. Shivan says these choices reduced runtime memory and bundle size.

Investing in the React Native community

Shivan says Microsoft is also working on developer tooling and a smoother experience for React Native developers. He recommends Adam Foxman’s talk on changing React Native from within, while Moyes points viewers to Microsoft’s React Native talks and resources.

Takeaways

  • Choose a JavaScript engine and hosting model based on each feature’s startup and resource needs.
  • A brownfield React Native screen can fit into a native app while preserving platform look and feel.
  • Keep desktop implementations aligned with core releases to reduce the lag in adopting platform improvements.
  • Expose native platform APIs through modules when an experience needs capabilities beyond shared UI.
  • Investing in developer tooling can support both internal products and the wider ecosystem.

Mentioned in this talk

Search inside this talk

What was claimed 12

Show all 12 facts

Related talks