Microsoft teams use React and React Native across products including Word, PowerPoint, and Excel. Layne says the framework helps teams share business logic and UI while building experiences that still feel suited to each platform. Office’s long history and varied platforms make sharing more code especially useful.
React Native @ Microsoft
Speakers
Micah Lewis, a Microsoft PM focused on Windows UI, and EJ Layne, a Microsoft PM focused on Office experiences, discuss Microsoft’s use of React Native at React Native EU 2019, hosted by Callstack.
Layne describes a shared people card experience and Excel cards for stock and geographic data. The cards work across multiple platforms. Fast Refresh also lets developers see UI changes within seconds, shortening the feedback loop compared with waiting minutes.
Lewis distinguishes the existing C# implementation of React Native for Windows from a newer version built on Facebook’s shared C++ core. The team was targeting React Native 6 support and working on APIs for desktop input, gamepads, accessibility, theming, and animations. Microsoft was also exploring React Native for Mac.
Layne describes extending Microsoft’s UI Fabric controls to native platforms, with accessible defaults and styling based on Fluent Design. Lewis covers Windows debugging support in VS Code and App Center services, including preview versions of Auth and Data. The speakers invite community feedback and contributions to their open source work.
Takeaways
- Share UI code across platforms while tailoring the finished experience to each platform.
- Use fast refresh to shorten the time between a UI change and seeing its effect.
- When adopting React Native for a new platform, plan for platform APIs, accessibility, theming, performance, and debugging.
- Build reusable controls with accessible defaults, while leaving room for app specific styling.
- Open source platform work can support internal product needs and give other teams shared improvements.
Mentioned in this talk
Search inside this talk
What was claimed 15
- uses
Microsoft 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 atMicah Lewis is PM atMicrosoft
“I’m a PM at Microsoft.”
YouTube Unverified2 sources· Talk
- usesEJ Layne uses React Native
“Most recently, I’ve been working on React Native.”
YouTube Unverified1 source· Talk
- role at
“I’m a PM primarily focused on Office experiences.”
YouTube Unverified1 source· Talk
- uses
“Word, PowerPoint, and Excel”
YouTube Unverified1 source· Talk
- integrates withReact Native for Windows integrates with
Hermes Agent“we've had Hermes in React Native for Windows for some time”
7:26inUnlocking the next generation of desktop app with React NativeYouTube Verified2 sources· Talk
- built
“we’re also working to bring React Native to the Mac”
YouTube Unverified1 source· Talk
- featureFabric: Styled, accessible controls by default
“It contains styled, accessible controls by default.”
YouTube Unverified1 source· Talk
- integrates withFabric integrates with Fluent Design
“connected to the Fluent Design System”
YouTube Unverified1 source· Talk
- featureReact Native for Windows: New implementation based on Facebook’s common C++ core
“a new implementation of React Native for Windows based on the common C++ core Facebook provides”
YouTube Unverified1 source· Talk
- metricReact Native for Windows: Version 5.9
“we’re at version 5.9”
YouTube Unverified1 source· Talk
- feature
VS Code: Debug React Native Windows apps without requiring the Chrome debugger“debug your React Native Windows app in VS Code without requiring the Chrome debugger to be running”
YouTube Unverified1 source· Talk
- featureApp Center: Auth and Data services available in preview
“There are two new services they’re introducing that are actually available today in preview.”
YouTube Unverified1 source· Talk
- usesCodePush uses React Native
“And, of course, there’s CodePush.”
YouTube Unverified1 source· Talk
