WhoBuilt

From Gaming to Productivity: how Microsoft is using React Native across a portfolio of experiences

Sep 25, 2023· 25 min· 3.2K views·Watch on YouTube

Speakers

Kalif, an engineering manager at Microsoft, explains how Microsoft uses React Native across desktop, Office, Windows, gaming, and AI experiences at a Callstack event.

Microsoft’s React Native adoption

Kalif says Microsoft is committed to React Native and uses it for mission-critical features reaching hundreds of millions of monthly users. He describes a team with expertise across the stack, including JavaScript engines, JSI, layout, Fabric, and core UI components. He says nearly every major Microsoft application uses React Native in some way.

React Native inside existing products

Kalif shows React Native features embedded in native apps, including Word’s commenting pane and contact cards that adapt their appearance to each platform. He also highlights the Windows 11 Start menu’s recommended files and apps section, describing it as a major operating system entry point. These examples illustrate Microsoft’s mainly brownfield approach: adding focused React Native experiences to existing applications.

Experiences across accessibility, gaming, and AI

Kalif demonstrates an Office accessibility assistant that flags issues such as low contrast, document structure, and image alt text. He shows the Xbox app, which is built with React Native and supports game discovery and purchases. He also describes a Copilot pane ported from the web to Mac and Windows, with much of the web code reused.

Investing in desktop React Native

Kalif says Microsoft supports React Native for Windows and macOS, maintains component libraries, and contributes to open source. At the time of the talk, Windows 0.72 followed the mobile release by two days, while the macOS release had arrived that day. Hermes was supported on macOS and nearing production readiness on Windows; the new architecture remained experimental on both platforms.

Getting started with desktop apps

Kalif says mobile React Native skills transfer to desktop and points developers to Windows and macOS setup guides. He recommends earlier talks on Windows accessibility and macOS app setup, and mentions Expo Orbit as a macOS app built with React Native. He encourages developers to try the tools and share feedback through GitHub and other community channels.

Takeaways

  • React Native can add focused features to large native applications without replacing the surrounding app.
  • Shared React Native code can still accommodate platform-specific appearance and behavior.
  • Desktop support can extend the reach of teams already building with React Native on mobile.
  • Treat new architecture support as experimental where platform maintainers have not recommended production use.
  • Reusing web code can help move an experience to desktop quickly while preserving an application-native feel.

Mentioned in this talk

Search inside this talk

What was claimed 14

Show all 14 facts

Related talks