Microsoft Embeds React Native in Windows 11 and Office for 1B Users

微软在 Windows 11 和 Office 中嵌入 React Native，覆盖 10 亿用户 维护树外桌面平台使微软能够在现代系统中部署统一的跨平台界面，而无需重写已有数十年历史的底层 C++ 代码库。 Chiara Mooney 和 Shiven Mian 介绍了微软如何利用树外平台（React Native for Windows 和 React Native macOS）为桌面端与移动端提供生产级体验，触达超过十亿用户。他们重点展示了实际应用场景，包括像 Xbox PC 这样的全新项目（Greenfield），以及嵌入在旧有 C++ 代码库中的棕地（Brownfield）集成，例如 Microsoft Office 的“现代批注”和个人信息卡片（Persona card）。本次演讲涵盖了针对桌面环境特有的无障碍支持、高对比度主题以及键盘导航的技术解决方案，同时介绍了微软的一套开源开发者工具，包括 React Native Test App (RNTA)、Fluent UI React Native 和 rnx-kit。最后，演讲者鼓励移动端工程师利用这些成熟的框架将其代码库拓展至桌面端目标平台。 微软维护着面向 Windows 和 macOS 的树外 React Native 目标平台，为 Windows 11、Office 和 Xbox 等产品中覆盖超过十亿用户的生产界面提供支持。 (3:08) React Native for Windows 既支持通过 react-native-xaml 映射原生 XAML 控件，也支持通过 Fluent UI React Native 提供 JavaScript 样式的跨平台组件。 (5:57) 与其完全重写 20 世纪 80 年代的旧代码库，微软大力采用棕地集成方案，将诸如“现代批注”和个人信息卡片等共享跨平台、跨应用组件嵌入到原生 Office 宿主中。 (19:24) 为了解决开发迭代速度和依赖项偏离的问题，微软开源了一系列开发工具，包括用于平台套件测试的 react-native-test-app (RNTA)，以及用于仓库依赖对齐和摇树优化的 rnx-kit。 (25:11)

## Background 本内容由技术大会主办方 Infinite Red 于 2023 年 6 月 1 日发布在 YouTube 平台上，记录了微软软件工程师 Chiara Mooney 与 Shiven Mian 在 Chain React 2023 大会上的技术分享。视频简介指出，本场演讲深入剖析了微软内部开发人员在构建与使用 React Native Windows 过程中的技术探索、演进历程与面临的工程挑战。 ## TL;DR 微软工程师深入介绍了 React Native for Desktop（特别是 Windows 与 macOS 平台）的技术架构与在微软企业级生产环境中的规模化落地实践。演讲展示了 Windows 11 开始菜单推荐区、设置账户页以及全平台 Office 套件中的 Persona Card 等如何依托 React Native 实现高效开发与跨端共享代码。面对桌面端交互和微软严苛的质量底线，团队重构了包含高对比度、键盘导航在内的底层无障碍（Accessibility）体系，并开源了 React Native Test App (RNTA)、Fluent UI React Native (FURN) 和 rnx-kit 等工程工具链，帮助开发者扫平大型 Brownfield 混合工程中跨平台跨应用的研发痛点。 ## Atmosphere & style 整场演讲呈现出典型大厂工程师严谨务实、自信沉稳的技术布道风格。Chiara 和 Shiven 配合默契，从操作系统的实机演示自然过渡到庞大陈旧代码库的架构剖析，既有调侃 Office 保留着“比自己还老”的 80 年代 C++ 代码的轻松幽默，又有面对十亿级用户质量红线时的严谨专业。现场氛围既接地气又充满硬核工程说服力，向社区开发者清晰传递出微软坚定押注并深度赋能 React Native 桌面生态的诚意与决心。 ## Bulletin - [03:08](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=188s) 微软正在全面押注 React Native for Desktop，不仅将其用于 Windows 11 开始菜单“推荐”区和设置账户页等系统级核心入口，还将其覆盖至 Xbox PC 客户端以及 Office 全家桶。 - [11:28](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=688s) 面对横跨四大平台（Windows、macOS、iOS、Android）的数十亿用户规模，微软将桌面端无障碍支持（如高对比度模式 Dusk、纯键盘导航与 Narrator 屏幕阅读器）内置在底层运行时中。 - [18:53](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1133s) 针对庞大历史 C++/C# 原生工程的 Brownfield 嵌入场景，微软通过 Persona Card 和 Modern Comments 等实践验证了跨端跨应用的业务代码高复用模式。 - [25:11](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1511s) 微软开源了 React Native Test App (RNTA)、Fluent UI React Native 以及企业级工具集 rnx-kit，帮助开发者在无需掌握桌面 C++ 专业知识的情况下高效开发与验证跨平台应用。 ## Key takeaways - [03:08](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=188s) React Native for Desktop 由 react-native-windows 与 react-native-macos 两个树外扩展（out-of-tree）包构成，致力于提供与上游核心库对齐的 API 及 Fabric 新架构演进能力。 - [03:08](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=188s) Windows 11 开始菜单的“推荐”板块和设置中的“账户”页面均 100% 采用 React Native 构建，证明该平台能够承载工业级操作系统核心体验。 - [05:57](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=357s) 桌面端演进面临追赶上游同步、保障原生视觉质感（通过 react-native-xaml 与 fluent-ui-react-native 解决）以及通过严苛微软质量标准三大挑战。 - [09:10](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=550s) 桌面端与移动端在无障碍理念上存在本质差异：移动端以触控为主，桌面端则必须深度适配键盘焦点流转、鼠标交互以及多模态控制器。 - [11:28](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=688s) 通过 AppTheme API，React Native for Windows 能够原生支持 Dusk 等高对比度模式，并抹平不同操作系统间屏幕阅读器的焦点导航行为差异。 - [13:45](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=825s) Xbox PC 客户端作为大型 Greenfield 纯 React Native 桌面应用，实现了全程支持纯键盘导航与高对比度辅助模式的工业级水准。 - [18:53](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1133s) Office 和 Windows 等代码库规模达数亿行且包含上世纪 80 年代的 C++ 历史代码，推倒重构并不现实，混合嵌入（Brownfield）是唯一可行路径。 - [22:15](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1335s) Persona Card 实现了跨 Word、Excel、Teams 等多款产品及四大平台的共享单一代码库，同时在桌面端采用悬停和模态窗口、在移动端采用全屏展示等系统级差异化适配。 - [25:11](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1511s) 开源工具 React Native Test App (RNTA) 将四端原生宿主工程抽象为轻量 npm 包，使纯 JavaScript 开发者摆脱编译沉重原生宿主工程的测试瓶颈。 - [27:25](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1645s) 开源的 Fluent UI React Native (FURN) 与企业级工具链 rnx-kit（包含 align-deps 依赖管理和基于 esbuild 的打包优化）构成了微软内部支撑数十亿用户产品的基石。 - [29:04](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1744s) 微软持续向 React Native 核心仓贡献底层工程，呼吁开源社区共同参与多平台建设与实践反馈。 ## Detailed walkthrough ### [00:00](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=0s) 开场介绍与核心主旨 在 Chain React 2023 大会第一天的尾声，微软软件工程师 Chiara Mooney 与她的搭档 Shiven Mian 共同登台进行演讲。Chiara 首先介绍了自己的技术背景与职责：她是 React Native for Windows 平台的核心维护者之一，主导该平台的无障碍访问（accessibility）支持以及软件包的版本发布流程；同时，她也是广受欢迎的社区模块 `react-native-webview` 的维护者，负责维护其中所有与 Windows 相关的源代码。她的搭档 Shiven Mian 同样是微软的软件工程师，将在演讲的后半部分登台分享。 Chiara 开门见山地指出，社区开发者之所以聚集在 Chain React，是因为大家热爱 React Native，热爱它所孕育的出色应用体验与极佳的开发体验。然而，如果开发者能够将 React Native 的所有优势扩展到桌面端（Desktop），甚至以极低的代码迁移成本将现有的移动端 App 移植到桌面平台，开发潜能将被成倍放大。这就是“React Native for Desktop”项目的核心使命。针对这次演讲，Chiara 给现场开发者定下了三个明确的收获目标：“第一，你可以使用 React Native 构建桌面端应用程序；第二，目前有许多微软自研产品正运行在 React Native 之上；第三，当你们为移动端开发 React Native 应用时，我们也希望你们能同时考虑到桌面端。”（“The first is that you can build desktop applications with react native. The second is that many Microsoft products are currently running on react native and the third is that as you build react native applications for mobile we want you to think of desktop too.”） ### [03:08](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=188s) 什么是 React Native for Desktop 与生产环境落地验证 Chiara 在现场发起了一次举手调查：大部分参会者都听说过 React Native for Desktop，但真正亲手尝试使用过的人则相对较少。对此，Chiara 详细阐释了 React Native for Desktop 的技术定位：它并非单一库，而是一个由微软工程师在开源社区共同维护的跨平台工程，核心由两个关键的“树外扩展”（out-of-tree）包组成——`react-native-macos` 与 `react-native-windows`。它们为 React Native 增加了针对 macOS 和 Windows 操作系统的构建目标。目前两套平台不仅已经与上游核心库保持了 API 对齐（API parity），而且正在推进将新架构（Fabric）引入 React Native for Desktop 的技术演进。 面对开发者最关心的现实问题——React Native for Windows 是否真正稳定可靠、能否撑起工业级的大型生产环境应用？Chiara 直接用 Windows 操作系统自身的顶级入口进行了有力解答。她展示了 Windows 11 开始菜单（Start menu）的界面截图，并指出普通用户根本无法从肉眼分辨出哪些部分是用传统原生技术写的，哪些部分是 React Native 构建的。事实上，开始菜单的核心模块之一——“推荐”（Recommended）版块，正是完全基于 React Native 构建并运行的。除此之外，Windows“设置”（Settings）应用中的“账户”（Accounts）管理页面，同样是 100% 使用 React Native for Windows 打造的，其系统交互与视觉动效与原生系统组件浑然一体。Chiara 由此强调了一个核心观点：“Windows 正在押注 React Native。我们选择押注这个平台，是因为我们不仅在微软的部分体验上信任它，而且在我们面向用户的核心体验上也信任它。”（“Windows is betting on react native. We're betting on this platform because we're choosing to trust this platform with not only some experiences at Microsoft but some of our key experiences for our users.”） ### [05:57](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=357s) 平台演进历程与面临的三大核心挑战 为了让 React Native for Windows 达到如今能够承载核心系统组件的成熟度，微软团队在构建平台的演进路径上克服了重重阻碍。Chiara 将这段演化历程归纳为三大核心挑战： 1. **追赶与同步（Playing Catch-up & Remaining Synced）：** 桌面端项目是在 React Native 核心生态已经相当成熟之后才启动的。团队的第一阶段任务是奋力追赶上游代码库，实现 API 功能对齐。随后更艰巨的任务是如何在上游不断推出新特性、架构演进和弃用旧 API 时，长期保持严密的双向同步。平台的目标是让 React Native 核心的所有价值和功能都能完整体现在 React Native for Windows 中。 2. **原生外观与视觉一致性（Native Look and Feel）：** 对于桌面用户而言，UI 的视觉连贯性至关重要。微软团队开发并维护了关键社区模块来解决原生质感问题： - `react-native-xaml`：直接将 Windows 操作系统底层的 XAML UI 组件库包装并暴露给 React Native，无论是微软内部团队还是开源社区开发者均可直接调用最纯正的原生 Windows 控件。 - `fluent-ui-react-native`：立足于 React Native 既有的核心跨平台组件（如 `View`、`Text` 等），通过 JavaScript 样式层注入微软 Fluent Design 设计语言规范，使基础组件具备地道的 Windows 原生控件视觉效果。 - 跨平台常用模块适配：团队主动针对 `webview`、`datetimepicker` 等跨平台高频社区模块提供深度 Windows 平台支持。 3. **达到微软的企业级质量标准（Microsoft Quality Standards）：** 所有在 Windows 上运行的应用，尤其是微软第一方发布的产品，都必须通过极度严苛的质量合规审查，涉及性能、稳定性及可访问性等多个维度。 ```mermaid flowchart TD accTitle: React Native for Windows 架构与 UI 方案 accDescr: 展示 React Native 代码如何通过 XAML 封装层或 Fluent UI 样式层最终呈现在 Windows 系统界面上。 subgraph UserLayer["应用层 (Application Layer)"] A["React Native 业务代码<br>(JS / TS)"] end subgraph NativeBridge["组件与样式方案 (Bridge / Styling)"] B["react-native-xaml<br>(直接暴露原生 XAML 控件)"] C["fluentui-react-native<br>(Fluent Design 样式包装层)"] D["核心组件 / 跨平台社区模块<br>(View, Text, WebView 等)"] end subgraph PlatformLayer["Windows 系统层 (Windows OS Target)"] E["Windows 原生 UI 渲染引擎<br>(XAML / Fluent UI)"] F["系统级入口落地<br>(Windows 11 开始菜单推荐区 / 设置账户页)"] end A --> B A --> C A --> D B --> E C --> E D --> E E --> F ``` ### [09:10](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=550s) 桌面端无障碍标准（Accessibility）的重构与落地 针对严苛的“微软质量标准”，Chiara 着重拆解了她亲自负责的无障碍体系（Accessibility）。移动端与桌面端在无障碍理念上存在本质差异：React Native 诞生于移动设备，其核心交互模型和无障碍 API 体系天然围绕“触控”（Touch）作为第一输入法来设计；然而在桌面操作系统中，主要交互输入方式不可避免地切换成了“键盘”（Keyboard）与“鼠标”（Mouse）。 在 Windows 系统级质量合规中，所有第一方应用在发布前都必须接受严格的无障碍审核，标准涵盖： - 屏幕阅读器（Screen Reader，如 Windows Narrator）导航及发音行为的一致性； - 完整的键盘导航链路与无焦点遗失（Focus Trapping / Tab 导航）； - 高对比度主题与辅助配色方案（Theming / High Contrast）的自适应； - 针对键盘、鼠标、游戏手柄等多模态输入控制器的无缝适配。 Chiara 指出，内部应用团队在选择技术栈时，该框架必须拥有产出完全符合无障碍法规应用的能力。为此，React Native for Windows 团队采取了一套系统性解决方案：首先，在底层百分之百对齐 React Native 核心现有的可访问性属性与方法（例如 `accessible`、`focusable`、`setAccessibilityFocus` 等）；其次，大幅扩展针对 Windows 平台专有的能力接口，为开发者补充了极其丰富且可深度定制的高级键盘事件、鼠标交互以及控制器 API，使开发者既能享受 React Native 跨平台的声明式开发范式，又能完全满足桌面级原生无障碍规范。 ### [11:28](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=688s) 高对比度模式与平台无障碍行为对齐 Chiara Mooney 继续深入探讨 React Native 在 Windows 系统中的无障碍（Accessibility）建设。React Native 本身支持浅色模式（Light Theme）和深色模式（Dark Theme），但在 Windows 生态中，还存在至关重要的“高对比度模式”（High Contrast Mode）。通过现场展示的 Windows 设置账户页面截图，可以清晰看到同一套应用在深色模式与 Dusk 主题高对比度模式下的显著视觉差异。将 React Native 引入 Windows 操作系统时，最关键的目标之一是保持视觉一致性（Visual Coherence）并提供原汁原味的系统级原生质感，而这种视觉一致性必须完整延续到高对比度模式中。为此，团队封装并公开了名为 `AppTheme` 的 API，让上层应用能够主动检测当前是否处于高对比度模式，并精准获取应用应当使用的具体高对比度配色方案。 ```mermaid flowchart TD accTitle: React Native Windows 无障碍适配体系 accDescr: 展示从系统层 AppTheme 检测到规范对齐，再到文档与应用验证的完整闭环。 subgraph Platform["底层平台能力"] A["系统主题状态变化"] --> B["AppTheme API 检测"] B --> C["高对比度调色板 Dusk 等"] D["跨平台焦点行为调研"] --> E["对齐 Windows 屏幕阅读器规范"] end subgraph DevEco["开发者生态与验证"] E --> F["文档指引与 API 最佳实践"] F --> G["应用团队集成接入"] G --> H["React Native Gallery 持续验证"] end ``` 在解决视觉显示的同时，另一个关键挑战是匹配 Windows 原生无障碍行为习惯，确保其交互规范符合 Windows 用户的心理预期，而不是生硬套用 iOS 或 Android 的逻辑。演讲屏幕上展示了对比 iOS、Android、Windows 和 macOS 间屏幕阅读器（Screen Reader）焦点行为变化的详细表格。Chiara Mooney 强调，平台团队承担了最繁重的调研工作： > “The big takeaway from all this information is that we've done the research on accessibility so that you don't have to.” - `AppTheme` API 承担高对比度状态监听与颜色系统下发的核心职能。 - 重点消除跨系统差异：Windows 桌面端的屏幕阅读器导航与移动端触控焦点流转规范存在本质区别，团队确保了平台层开箱即用。 - 底层无障碍能力实现后，工作重心转向开发者沟通与文档建设，指导业务团队正确使用无障碍 API。 --- ### [13:45](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=825s) 自动化验证与标杆落地应用 仅仅提供接口和编写文档并不能杜绝无障碍体验的退化，持续的验证机制必不可少。Chiara Mooney 介绍了目前已上架 Microsoft Store 的 **React Native Gallery** 应用。该应用完全基于 React Native for Windows 开发，对外集中展示了当前平台所支持的全套组件库与交互示例。微软团队将其作为无障碍自动验证的标准试验场，进行常态化的合规性与易用性检测，确保不仅达到强制性的无障碍合规指标，还能为所有残障辅助用户提供顺畅愉悦的交互体验。 在实际生产落地方面，除了先前展示的 Windows 11 开始菜单（Start Menu）与 Windows 设置账户页（Accounts Page）外，Chiara Mooney 重点展示了 **Xbox PC** 客户端。该应用整个界面完全采用 React Native for Windows 编写。现场播放的演示中，Xbox PC 客户端不仅稳定运行在高对比度模式下，而且全程通过纯键盘导航（Keyboard Navigation）完成复杂游戏库的浏览与焦点切换，展示了高质量的桌面级无障碍水准。最后，Chiara 回应了社区关于 macOS 的关切，明确指出虽然本次分享以 Windows 为主，但同套无障碍设计原则与底层适配工作同样已经在 React Native for macOS 上落地。 --- ### [16:24](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=984s) 微软级质量标准与数十亿用户规模挑战 演讲交接给 Shiven Mian。Shiven 就职于微软 Office 产品研发组，主要专注于 React Native Android 架构与 JavaScript 运行时基础设施。桌面端 React Native 属于脱离官方核心维护树的“Out-of-tree”平台，维护此类平台充满了特殊的技术挑战；特别是微软内部还要直接依托该平台来承载主力核心业务，因此在交付前必须确立极其严苛的质量底线。Shiven 指出，团队在平台底层守住这些指标，就是为了让广大的上层业务开发者彻底免除后顾之忧： > “So we ensure that these quality standards are upheld within the platform itself so that you don't have to worry about them and you can focus more on doing your best work.” 除了无障碍之外，微软内部衡量跨端平台能否进入生产环境的核心质量维度包括： - **可靠性（Reliability）**与**版本支持策略（Version Support）** - **国际化本地化（Localization）** - **运行时性能（Performance）** - **安全性与隐私合规（Security & Privacy）** - **系统原生外观与操作质感（Native Look and Feel）** 面对数十亿（Billions）横跨 Windows、macOS、iOS 和 Android 四大平台的用户，这些质量标准显得尤为苛刻。采用 React 和 React Native 的微软主力产品线涵盖 Microsoft Office（Word、Excel、PowerPoint）、Outlook、Teams、Windows 操作系统内嵌组件、Power Apps 以及 Xbox PC 端。不同业务在架构选择上呈现出多元化：既有像 Xbox PC 这样从零全新开发的纯原生 React Native 应用（Greenfield 应用），也有大量在庞大既有原生工程中内嵌 React Native 模块的混合应用（Brownfield 应用）。 --- ### [18:53](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1133s) Office 的混合架构与跨端跨应用代码共享 作为 Brownfield 应用的典型代表，Shiven 展示了 Windows 平台 Microsoft Word 中的“新式批注”（Modern Comments）功能。该评论侧边窗格实质上是一个独立的 React Native 实例，宿主在一个完全非 React Native 的原生宿主容器中运行。这种嵌入式体验在 Office 全套套件的桌面与移动端中被广泛复用。 使用 React Native 实现此类跨端体验面临着独特而严峻的历史包袱。微软的 Office 和 Windows 拥有世界上最庞大的生产代码库之一，生产环境中运行的代码量达到数亿行（Hundreds of millions of lines of code），且绝大多数基于 C++ 和 C# 构建。这些工程往往比 React Native 本身更古老，甚至部分底层逻辑仍保留着上世纪 80 年代的 C++ 代码。Shiven 开玩笑说： > “As a matter of fact, Microsoft Office still has code from the 1980s in production, which also means it's older than me.” 在此背景下，妄图用 Greenfield 模式推倒重构完全不切实际，Brownfield 是唯一的现实路径。然而，在支持跨平台（Cross-platform）的同时，跨应用（Cross-app）代码共享提出了极高的工程要求： | 核心跨端诉求 | 业务工程痛点与目标 | |:--- |:--- | | **跨应用代码复用** | Modern Comments 不仅横跨四端，还必须在 Word、Excel、PowerPoint 之间共用同一套单一 JavaScript 代码库。 | | **原生外观与交互质感** | 桌面端与移动端设计语言天差地别，必须在共享业务逻辑的同时，无缝适配平台特定的设计风格与交互范式。 | | **轻量级跨端测试与验证** | 允许原本只懂移动端的 JavaScript 开发者，在不具备 Windows/macOS 平台专业 C++ 领域知识的前提下，快速添加桌面端支持并进行闭环调试迭代。 | ### [22:15](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1335s) 跨平台生产落地典范：Persona Card 实机演示与差异化适配 微软内部部署范围最广的 React Native 体验之一便是 Persona Card（个人资料卡）。该体验内置于微软各类 Office 应用中，用于快速查看当前账户的详细信息、组织架构以及近期的协作动态。演讲者展示了在 Android 版 Microsoft Word 中的运行效果：用户在应用左上角点击头像后，便会呼出 Persona Card 全屏界面。用户可以直接查阅联系方式、归属的组织架构详情，并跟踪近期的活动记录（例如近期编辑的文档、往来邮件等）。这本质上是一个寄宿在原生 Microsoft Word 外壳内的 React Native 模块。演讲者强调，虽然它是跨平台技术构建的，但在 Android 上运行时几乎具备“原生般的性能和符合 Android 系统调性的原生外观”。 目前，Persona Card 已经全面覆盖四大桌面与移动平台（Windows、macOS、iOS、Android），并广泛集成到 Word、Excel、PowerPoint、Teams、Outlook、SharePoint、OneNote 等 Office 家族应用中。虽然背后的代码仓库是统一的，但团队在各平台上进行了细致入微的交互与视觉定制： - **容器与展示形式**：在 iOS 和 Android 移动端，界面设计为全屏呈现；而在 Windows 和 macOS 桌面端，它主要以鼠标悬浮（Hover）浮窗的形式出现。 - **窗口放大机制**：桌面端支持窗口最大化操作，用户点击头像图标后，Persona Card 会展开为一个以 Modal 弹窗形态呈现的更完整视图（该视图同样由 React Native 构建）。 - **平台视觉细节**：各平台的圆角弧度遵循各自系统规范（例如 macOS 的圆角更为柔和）；界面返回按钮均采用各自平台的原生风格图标；“显示组织”（Show Organization）按钮在 Windows 上仅展示纯文本，而在 Mac 和 iOS 上则带有一个原生箭头符号，Android 端的设计也各有不同。 业务开发者只需要学习 React Native，就可以借助针对桌面平台的适配方案，让功能跨平台、跨应用平滑运行。演讲者总结道：“And even though we have these subtle design customizations to make the experience look native, majority of the code here is shared across the platforms, and that is why it was so compelling for us to use React Native and actively maintain React Native for desktop.” ```mermaid flowchart TD accTitle: Persona Card 单一代码库跨平台架构 accDescr: 展示单个 React Native 业务代码库如何通过平台定制层输出至四大平台并集成到多款 Office 应用中。 subgraph Core["共享代码与定制层"] SharedCode["单一 React Native 代码库\n(业务逻辑、数据管理)"] Adaptation["平台定制层\n(移动端全屏 vs 桌面悬停/模态\n原生圆角、系统返回键与组织图标)"] SharedCode --> Adaptation end subgraph Platforms["目标平台"] direction TB Desktop["桌面端 (Windows / macOS)"] Mobile["移动端 (iOS / Android)"] end subgraph HostApps["承载应用 (Brownfield 宿主)"] Apps["Office 套件: Word, Excel, PowerPoint,\nTeams, Outlook, SharePoint, OneNote..."] end Adaptation --> Desktop Adaptation --> Mobile Desktop --> Apps Mobile --> Apps ``` --- ### [25:11](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1511s) 破解跨平台测试痛点：React Native Test App (RNTA) 尽管单一代码库带来了巨大的代码复用红利，但在超大规模开发中，跨平台测试与验证（Testing and Validation）往往成为瓶颈。尤其在混合工程（Brownfield）场景下，React Native 寄宿于庞大的原生工程中（如 Microsoft Office 整体代码库极其庞大冗长）。当开发者只是想验证一个纯 JavaScript 业务界面的小改动、或者进行跨平台框架升级时，往往不得不去编译整个沉重的原生工程，甚至需要手动修改各种深层原生平台配置文件。如果团队维护着多个独立的 Brownfield 特性，为每一个特性维护专用的测试宿主 App 并随着 RN 版本不断升级维护，将产生巨大的时间浪费。 为了让开发者能够“只专注于 JavaScript 代码即可完成跨平台快速验证”，微软开源了 **React Native Test App**（简称 **RNTA**）。RNTA 本质上是一种“以 npm 包形式交付的平台底座”（Platform as a package），具备以下关键特性： - **全平台测试宿主封装**：它作为一个轻量薄层，将 Windows、macOS、iOS、Android 四个平台的原生托管加载逻辑全部封装好。开发者无需再为各个平台维护复杂的原生外壳工程。 - **免触碰原生代码与按需覆盖**：日常调试中开发者完全不需要处理原生代码；但如果业务包含原生自建模块，RNTA 也保留了完整的原生控制能力。 - **多平台与多版本矩阵测试**：开发者只需要在 RNTA 的 `package.json` 中添加对 `react-native-windows` 或 `react-native-macos` 的依赖，或者通过交互式命令行 CLI 工具，就能快速勾选目标平台，并在新老不同版本的 React Native 环境间无缝切换测试。开发者可以直接在项目里引入 RNTA 启动即用，相关文档与实现均托管在 GitHub 上的 Microsoft React Native Desktop 仓库中。 --- ### [27:25](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1645s) 开发者体验基石：Fluent UI React Native 与 rnx-kit 除了测试框架，微软在开发者体验（Developer Experience）上还持续开源并维护了两大核心工具链： 1. **Fluent UI React Native (FURN)**： - 它是微软基于自身的 **Fluent Design System** 构建的开源跨平台 React Native 组件库。 - 组件在开箱即用状态下就全面内置了**无障碍辅助功能（Accessibility）**、平台专属的主题定制（Platform-optimized theming）与设计令牌（Design tokens）。 - FURN 组件与 React Native 官方内置的原生组件具有极高的互操作性，同时兼具卓越的渲染性能，能够帮助外部开发者快速搭建兼具平台专属质感且高保真的一致体验。 2. **rnx-kit (`aka.ms/rnxkit`)**： - 专为大型团队和企业级 React Native 开发打造的工具集，主打高性能与高可扩展性。 - 内置了用于解决大仓依赖冲突与版本收敛的 **`align-deps`** 依赖管理工具。 - 内置开箱即用的 TypeScript 自动化校验机制。 - 深度整合基于 **esbuild** 的高效率 Tree Shaking（代码摇树优化）及打包加速插件。 演讲者特别强调，无论 FURN 还是 rnx-kit，都绝非仅停留在实验室阶段的玩具项目，而是微软内部用来向数以亿计用户交付核心商业应用时每天所依赖的生产力工具。微软已将它们完全开源，并真诚地欢迎开源社区共同参与贡献、反馈和完善。 --- ### [29:04](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1744s) 总结与展望：桌面端跨平台生态的大规模交付 在演讲的总结部分，演讲者为现场希望在周一回到工作岗位后向团队汇报核心收获的工程师们划定了重点。微软在移动和桌面端的 React Native 领域有着极其坚定的战略投入。尽管长期维护像 React Native for Windows 与 React Native for macOS 这样独立于 React Native 核心仓之外的 Out-of-tree 跨平台运行时充满技术挑战，但它为产品带来的回报是巨大的：更广泛的平台支持直接转化为更大的用户规模与更高的商业化变现空间。 演讲者重申了微软在该技术栈上的核心承诺： - **严苛的交付质量标准**：无障碍（Accessibility）等企业级特性被深层植入到底层运行时中，绝不敷衍妥协。 - **无缝的开发者体验**：让工程师能够在不具备 Windows 或 Mac 底层系统领域专业知识的前提下，快速构建、验证并迭代拥有平台原生质感、高度共享代码的应用。 - **跨场景弹性支持**：无论是从零构建的全新桌面项目（Greenfield），还是需要引入跨平台新特性的既有原生桌面大型工程（Brownfield），工具链均提供了全面覆盖。 演讲者总结道：“React Native desktop today powers experiences in Microsoft reaching a billion users, and we know firsthand the challenges that come when working with multiple Brownfield experiences and making it work at scale.” 正是因为体会过规模化落地的全部阵痛，微软才通过平台层与工具层的投资来扫平阻碍。 最后，演讲者号召社区参与开源共建，并预告了生态内的后续重点内容： - **React Native 核心层演进**：微软团队在过去数月中积极向 React Native Core 贡献了大量看不见的底层工程工作，推荐参会者关注次日清晨由 Lorenzo Sciandra 主讲的开场演讲《The Work That You Don't See》。 - **优质学习资源与同类演讲**：访问官网 `aka.ms/react-native`；回顾 Saad 在 App.js 针对 React Native for macOS 的深度技术分享（已在 YouTube 发布）；关注 Chain React 次日由 Christoph 带来的专题演讲，了解 Meta 如何将 Messenger 桌面端应用从 Electron 彻底重构迁移至 React Native。 ### [32:42](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1962s) 总结寄语与大会致谢 演讲者在分享的尾声再次强调了开源社区对于 React Native Windows 乃至整个多平台生态的重要性。他们表示非常期待看到开发者未来能够基于这些技术构建出怎样的产品，并由衷重视社区在各个平台上所提交的代码贡献与实践反馈：“going to build and we really value contributions and feedback to all of these platforms”。团队真诚欢迎社区开发者积极参与项目建设，共同推动桌面端与多平台 React Native 的演进。 在演讲正式结束之际，两位讲者向 Chain React 2023 大会的主办方 Infinite Red 表达了由衷的感谢，感谢主办方的精心组织与邀请。同时，他们也向开场进行介绍的主持人 Ken 以及现场全神贯注聆听的观众致谢，并祝愿台下所有的参会者度过一个美好的夜晚，伴随着现场的掌声为整场分享画上了圆满的句号。 - **社区共建与反馈**：团队高度珍视开发者在各个平台提交的 issue、PR 与使用反馈，呼吁社区持续参与 React Native 跨平台生态的建设。 - **大会致谢对象**：特别感谢了主办方 Infinite Red 的组织与邀请、主持人 Ken 的开场介绍，以及现场参会者的支持。 ## Notable quotes > [03:08](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=188s) Windows is betting on react native. We're betting on this platform because we're choosing to trust this platform with not only some experiences at Microsoft but some of our key experiences for our users. — Chiara Mooney > [29:04](https://www.youtube.com/watch?v=kMJNEFHj8b8&t=1744s) React Native desktop today powers experiences in Microsoft reaching a billion users, and we know firsthand the challenges that come when working with multiple Brownfield experiences and making it work at scale. — Shiven Mian ## Mentioned Chiara Mooney, Shiven Mian, Microsoft, React Native, React Native for Windows, react-native-macos, react-native-webview, react-native-xaml, fluentui-react-native, React Native Gallery, React Native Test App (RNTA), rnx-kit, Windows 11, Microsoft Office, Microsoft Word, Microsoft Excel, Microsoft PowerPoint, Microsoft Outlook, Microsoft Teams, Power Apps, Xbox PC, SharePoint, OneNote, Persona Card, Modern Comments, Fluent Design System, Infinite Red, Chain React, Meta, Amazon, Expo, Lorenzo Sciandra, Saad, Christoph ## Video description Chiara Mooney & Shiven Mian, Microsoft An inside look at the journey and challenges of building and consuming React Native Windows by Microsoft developers. Slides from the talk: https://microsoft-my.sharepoint-df.com/:b:/p/chiaramooney/EfQD-GUSP-9ArEHGi-Zh0NIBs_ZVxDRGCVpuqsNpntvTVg?e=f9lHOy Chain React 2023 Chain React is a three-day event in Portland, Oregon exploring the latest in React Native. Leaders from companies like Meta, Amazon, and Expo all send their developers to Chain React to announce the latest news, make lifelong connections, and advance the industry. Chain React is hosted by the team at Infinite Red. Follow Chain React • Website: https://chainreactconf.com • Twitter: https://twitter.com/ChainReactConf • GitHub: https://github.com/infinitered/ChainReactApp2023 Connect with Infinite Red • Website: https://infinite.red [Source](https://www.youtube.com/watch?v=kMJNEFHj8b8)

[3:08] Chiara Mooney: Windows is betting on react native. We're betting on this platform because we're choosing to trust this platform with not only some experiences at Microsoft but some of our key experiences for our users. [29:04] Shiven Mian: React Native desktop today powers experiences in Microsoft reaching a billion users, and we know firsthand the challenges that come when working with multiple Brownfield experiences and making it work at scale.

[3:08] Chiara Mooney: Windows is betting on React Native; we're betting on this platform because we're choosing to trust this platform with not only some experiences at Microsoft, but some of our key experiences for our users.

[0:00] [Music] [0:08] [Music] [0:13] [Applause] [0:16] [Music] [0:20] thank you [0:28] [Music] [0:42] [Music] [0:48] thank you [0:55] awesome hi everybody we're so excited to [0:58] get the chance to talk to you today hope [1:00] you're having a great day of day one at [1:02] chain react so far [1:04] um my name is Kira and this is my [1:06] co-presenter Shivan [1:08] um and we're so excited to get to kind [1:11] of close out this first day [1:14] um so a little bit about us before we [1:15] get started like I said before I'm Kira [1:18] Mooney I'm a software engineer at [1:20] Microsoft and I work as one of the [1:21] maintainers of the react native for [1:23] Windows platform and I primarily focus [1:26] on accessibility I drive our package [1:29] releases and I'm also a maintainer of [1:32] the very popular webview Community [1:34] module I hope I help maintain all the [1:36] windows source code there [1:38] um and then my co-presenter Shivan is [1:39] also a software engineer at Microsoft [1:41] and he'll inter introduce himself a [1:43] little bit further on in the [1:45] presentation [1:47] so [1:48] we're all here because we love react [1:50] native there are so many great app [1:53] experiences that are shipped on this [1:54] platform we've heard a lot today about [1:57] amazing features of the platform and the [1:59] amazing developer experience [2:02] um but what if you could harness all of [2:04] the goodness of react native and be able [2:07] to build desktop apps and even further [2:10] what if you could take your current [2:11] existent mobile apps on react native and [2:15] be able to bring them to desktop with [2:17] minimal coding effort well this exists [2:20] and that effort is known as react native [2:22] for desktop and today our goal here is [2:25] to share a little bit more context about [2:27] what that platform is we're also going [2:30] to talk a little bit about some of the [2:31] current work being done on the platform [2:33] and then we'll share a little bit about [2:36] current in production experiences [2:38] running on react native for desktop and [2:41] our hope today is as you're walking out [2:43] of the conference Hall and heading off [2:45] to the mixer you're going to walk away [2:48] with three key takeaways the first is [2:51] that you can build desktop applications [2:53] with react native the second is that [2:57] many Microsoft products are currently [2:59] running on react native and the third is [3:01] that as you build react native [3:03] applications for mobile we want you to [3:05] think of desktop too [3:08] so I've just mentioned react native for [3:10] desktop and react native for Windows [3:12] could I see a show of hands in the [3:14] audience who's heard of react native for [3:16] desktop before [3:18] okay good number of hands raise your [3:21] hand again if you've ever tried using [3:23] react native for desktop [3:25] okay still a pretty good number of hands [3:27] but definitely fewer so let's talk a [3:30] little bit about what react native for [3:32] Windows is for those of you who haven't [3:34] heard of it before react native for [3:36] Windows is a part of a larger effort [3:38] known as react native for desktop and [3:40] it's made up of two packages react [3:42] native Mac OS and react native windows [3:45] and these are out of tree additions to [3:47] react native that add the additional [3:50] Target of the Mac OS and the Windows [3:52] operating system both of these platforms [3:55] are maintained in Open Source by [3:57] Microsoft developers and we currently [4:00] have API on pair API parity for both of [4:03] the platforms and work is currently [4:06] underway to bring Fabric in the new [4:08] architecture to react native for desktop [4:11] as well [4:13] so you might be asking yourself that all [4:16] sounds great [4:18] um but does react native windows work [4:20] and is it viable to have you know [4:23] industry grade apps in production uh [4:26] well to show that that is the case let's [4:28] take a look at an example this is the [4:31] Windows start menu and I'll ask you to [4:34] take a look at these two screenshots and [4:36] see if you can spot which sections of [4:40] this application are built with react [4:42] native [4:43] and most likely you're not going to be [4:45] able to spot what those sections are so [4:47] on the next slide here I've gone in and [4:49] highlighted uh in a dashed rectangle [4:52] which sections of the start menu are [4:54] currently running on react native and [4:57] that's the start menus recommended [4:59] section as you can see in these [5:01] screenshots there really is a seamless [5:02] look and feel between the sections of [5:04] the start menu that were built with the [5:06] traditional Windows Tech stack and the [5:09] sections of the start menu that were [5:10] built with react native which is really [5:11] exciting to see as another example let's [5:15] take a look at the settings application [5:18] this is the settings accounts page and [5:21] in this demo we're going to walk through [5:23] what that page looks like and this page [5:25] was entirely built using react native [5:28] for Windows once again we can see super [5:31] seamless Windows look and feel and once [5:34] again key Microsoft experiences that are [5:37] running on this platform [5:39] so what are the kind of some of the [5:40] initial takeaways here number one [5:43] Windows is betting on react native we're [5:46] betting on this platform because we're [5:49] choosing to trust this platform with not [5:51] only some experiences at Microsoft but [5:53] some of our key experiences for our [5:56] users [5:57] so let's talk a little bit about you [6:00] know what was the journey to get here [6:01] and what were some of the challenges [6:03] along the way in building the react [6:05] native for Windows platform [6:07] first off um was the challenge of [6:09] playing catch-up so the react native for [6:12] desktop effort was started after react [6:15] native had already existed and so our [6:17] first phase was to really bring [6:19] ourselves up to that state of API parity [6:22] and play catch up with what was [6:23] happening Upstream the second thing was [6:25] being able to remain synced with what [6:28] was happening Upstream as new changes [6:30] new features deprecations came in from [6:33] core ultimately our goal with facing [6:36] this challenge was that all of the value [6:38] of react native should also be available [6:40] in react native for Windows [6:43] the Second Challenge was native look and [6:46] feel if all of you are using react [6:48] native having a near native look and [6:51] feel in your app experience is probably [6:53] something of value to you that also [6:55] matters to us internally at Microsoft [6:57] and so visual coherence native look and [7:00] feel was the next challenge that we [7:02] really took a look at [7:04] we ended up building a couple of key [7:07] modules in order to support native look [7:10] and feel within react native for Windows [7:12] so the first one here was a community [7:14] module known as react native xaml now [7:17] xaml is the name that we use to describe [7:20] the UI library that is used for all of [7:22] the windows OS UI components and so [7:25] react native xaml was built as a react [7:27] native Community module to expose all of [7:30] those xaml components in react native [7:33] for Windows and this community module is [7:35] available to external and internal [7:37] developers alike in the community and so [7:40] if you'd like to you know play around [7:42] with a react native for desktop app you [7:44] can make use of this module as well the [7:47] second module that we implemented was [7:48] fluent UI react native once again the [7:51] goal of this was to add another option [7:53] for getting that Windows look and feel [7:55] in your native applications fluent UI [7:58] react native actually focuses on taking [8:00] the current set of core components that [8:03] the platform offers things like view [8:04] text Etc and adding JavaScript styling [8:08] on top of those core components to be [8:10] able to deliver controls that look like [8:13] Windows controls to a react native user [8:16] and then finally we also support a [8:19] number of the other kind of cross-plat [8:20] community modules in the platform things [8:22] like webview and date picker etc etc [8:27] the big takeaway here is all of this is [8:29] in the community for the community's use [8:32] internal and external developers alike [8:34] and windows gets to gain visual [8:36] coherence in the process as well [8:38] okay [8:39] and the final challenge that we hit was [8:42] being able to bring Microsoft quality [8:44] standards to the product apps shipped on [8:48] Windows in general have to live up to [8:52] the windows quality standards especially [8:54] those being shipped by Microsoft we want [8:56] to make sure that all of our developers [8:58] are able to give a great experience to [9:00] their users now Shivan a little bit [9:03] later in the presentation is going to [9:05] talk about some of these Microsoft [9:07] quality standards holistically but I'm [9:10] going to go ahead and dive into one of [9:12] those quality standards specifically [9:13] which is accessibility so let's look at [9:17] that specific quality standard pillar [9:19] and talk a little bit about how do we [9:21] handle accessibility for you [9:24] before we can talk about what we did [9:26] within react native Windows let's take a [9:28] look at what happens in regards to [9:30] accessibility within react native and [9:32] the core platform itself so within react [9:35] native there's a number of accessibility [9:36] props and methods and apis that [9:39] developers have access to in their [9:41] applications elements like accessible [9:43] focusable set accessibility Focus the [9:46] list goes on [9:48] the second thing is that in react native [9:51] there's a key focus on the primary input [9:53] method being touch this was a key thing [9:56] for us to note as we went into designing [9:58] rack native for desktop because we [10:01] wanted to make sure that we understood [10:03] the transition that in desktop the [10:05] primary input method shifts over to [10:08] keyboard and text keyboard and mouse [10:10] input [10:12] okay [10:13] so we've talked about what's happening [10:15] in react native but what's happening and [10:17] what's expected in terms of [10:18] accessibility behavior when it comes to [10:20] Windows [10:21] so for Windows Microsoft apps are all [10:25] evaluated on their accessibility this [10:27] criteria can include screen reader [10:29] Behavior keyboard navigation theming and [10:33] more and apps must account like I [10:36] mentioned on the last slide for keyboard [10:38] mouse and other controller input and [10:40] then finally [10:42] for our app teams internally whatever [10:45] selected app platform they choose it [10:48] must be able to produce compliant apps [10:50] that ship great experiences to all users [10:54] so let's talk about the journey that we [10:56] took to build react native windows and [10:59] have it offer a great accessibility [11:01] experience the first thing was API [11:03] parity so making sure that we [11:05] implemented all of react natives great [11:07] accessibility related methods [11:11] the next thing was to add additional [11:13] Windows specific apis to the platform [11:16] this included adding like a rich [11:19] customized keyboard experience and [11:21] customized Mouse experience making sure [11:23] those apis were exposed to our [11:25] developers and then additionally while [11:28] react native has light theme and dark [11:30] theme Windows also has high contrast [11:32] mode [11:33] so on these screenshots we can see an [11:35] example of high contrast mode in action [11:37] on the left we have that same Windows [11:40] settings accounts page I showed earlier [11:42] in dark mode and on the right we can see [11:46] that same application in the high [11:48] contrast mode of the dusk theme and you [11:50] can notice some of the differences [11:51] visually in these two screenshots before [11:54] I mention that one of the big important [11:57] things about bringing react native into [12:00] experiences within the windows OS was [12:02] visual coherence and offering that kind [12:05] of native look and feel and it was also [12:07] very important to us that visual [12:09] coherence carried over into the high [12:11] contrast modes as well so we exposed and [12:14] built an API called app Theme which [12:17] allows applications to detect if they're [12:19] in high contrast mode and if so which [12:22] specific high contrast colors should [12:24] that application be using [12:27] okay the next thing in the journey to [12:29] Bringing great accessibility to Windows [12:32] was to match Windows accessibility [12:35] behavior and make sure the Norms match [12:37] the windows OS in comparison to IOS and [12:40] Android so we have a table on this [12:43] screen that dives a little bit into some [12:45] of the screen reader Focus Behavior [12:47] changes between IOS and Android Windows [12:50] Mac OS Etc the big takeaway from all [12:53] this information [12:54] is that we've done the research on [12:57] accessibility so that you don't have to [12:59] we want you to be able to have and offer [13:01] a great experience to your users for the [13:04] apps that you're developing out of the [13:06] box [13:07] and have that be available and ready for [13:10] internal and external developers alike [13:14] cool so at this point we have all of the [13:17] functionality we need on the platform [13:19] side to offer great accessibility but [13:22] the next step was to really make sure [13:24] that our messaging to developers and our [13:26] developer documentation was super solid [13:29] in order to communicate to our [13:31] developers building applications [13:33] what are the accessibility apis to take [13:36] advantage of and use in their [13:38] applications this is where messaging to [13:41] all of our app teams has been super [13:42] critical in the process [13:45] so we have great accessibility we have [13:48] great apps The Next Step was to make [13:50] sure that we were continually validating [13:53] to make sure [13:54] um that our accessibility was con [13:56] continued to be in a great place so this [13:59] is the react native Gallery app [14:01] um it's an app running on react native [14:03] windows and it's actually currently in [14:04] the Microsoft store if you have any [14:06] interest in downloading it for yourself [14:08] and this app showcases the current set [14:11] of components that are supported on [14:13] react native windows and all different [14:15] kinds of of samples that you can switch [14:17] through and this app is regularly [14:20] validated in accessibility to make sure [14:24] that we continue to offer not only a [14:26] compliant experience but a delightful [14:28] experience to all users [14:31] so what is the status today [14:33] um currently we have a number of apps [14:36] running on react native for Windows [14:39] um that are compliant and are offering a [14:41] great accessibility experience we showed [14:43] two examples at the beginning of the [14:45] presentation [14:46] um which would be the start menu and the [14:49] Windows settings accounts page [14:51] um on this slide we're also showcasing [14:54] example of the Xbox PC app which is [14:56] written entirely in react native Windows [15:00] um and on this specific demo we can see [15:03] that app running in high contrast mode [15:05] and using keyboard navigation to [15:08] navigate the app so some of that great [15:10] accessibility functionality in action in [15:13] the demo [15:16] so what are the big things to take away [15:18] from from all of this we've done the [15:21] works that you get [15:23] out of the box accessibility and and you [15:25] might be watching all this and wondering [15:26] hey you know you mentioned Mac OS at the [15:28] beginning of the presentation like has [15:30] all of this been done for Mac OS as well [15:32] and the answer to that is yes today we [15:36] focused in on Windows but Mac OS has [15:40] also done work applied to their same [15:42] operating system to make sure they're [15:44] offering great accessibility and we'll [15:47] have some callouts at the end for recent [15:48] Mac OS talks if you'd like to learn more [15:52] but as I mentioned earlier accessibility [15:55] isn't the only quality standard that we [15:57] look at and and we care about in terms [15:59] of being able to ship a great platform [16:01] and so to expand on some of the other [16:03] quality standards that we've dived into [16:05] in the platform as well as to talk a [16:08] little bit more about some of the [16:10] cross-platform experiences that we're [16:12] currently shipping at Microsoft on react [16:13] native I'll go ahead and hand it off to [16:16] my co-presenter Shivan [16:21] [Applause] [16:24] uh yeah thanks Kara I'm Shivan I'm a [16:28] software engineer at the office product [16:29] group at Microsoft when I focus on react [16:32] native Android and our JavaScript [16:34] runtime architecture so as Kara [16:37] previously talked about there's a lot of [16:39] challenges that come in maintaining out [16:41] of free platforms like react native for [16:43] desktop and this is especially important [16:46] for us since we use these platforms to [16:48] build our own experiences and so there's [16:51] a number of quality standards that we [16:53] need to uphold before we ship anything [16:55] at Microsoft so we ensure that these [16:59] quality standards are upheld within the [17:01] platform itself so that you don't have [17:03] to worry about them and you can focus [17:05] more on doing your best work [17:08] and accessibility isn't the only [17:10] standard we uphold as she said there's [17:13] more as you can see so reliability [17:15] version support localization performance [17:17] security and privacy and the native look [17:19] and feel are just a few of the quality [17:22] standards that we pay close attention to [17:25] so adoption of our platforms by our own [17:29] apps and the community depends on react [17:32] native not only offering its value but [17:35] also whether it lives to these quality [17:36] standards so that we can ship [17:38] efficiently at scale and deliver value [17:41] to our customers and so can you [17:45] and all this is especially important at [17:47] the scale we work on um so few companies [17:50] have as many products and services as [17:52] Microsoft and few have as many users of [17:55] them so on your screen are a few of the [17:58] Microsoft products that use react and [18:00] react native to reach billions of users [18:03] across desktop and mobile and that is [18:05] Windows Mac OS IOS and Android and for [18:08] the purposes of the rest of the talk [18:09] these are the main four platforms that [18:11] we're going to look at and these apps [18:14] include Microsoft Office Outlook teams [18:16] Windows OS powerapps Xbox and many more [18:19] now all of these applications are very [18:23] differently that vary from each other [18:25] they're built for different purposes and [18:27] they vary in how they were built when [18:29] they were built and how they use react [18:31] native so some of these are Green Field [18:33] Labs which are built entirely using [18:35] react native an example of that is the [18:38] Xbox PC app that talked about earlier [18:40] and we also have XP applications that [18:43] are not built in react native but host [18:45] many react native experiences they're [18:48] known as Brownfield apps an example of [18:50] that is the Microsoft Office apps so [18:53] what you see here is the comments [18:56] experience in Microsoft Word on Windows [18:58] and this is also known as modern [19:00] comments and by that I'm talking about [19:03] this so This pane is a react native [19:07] experience which runs within a non-react [19:09] native application it's hosted in a [19:11] separate pane of its own within the [19:13] larger application and this is only one [19:16] of several react native experiences that [19:19] our Microsoft Office apps are currently [19:21] hosting across desktop and mobile [19:24] so let's talk about cross platformer but [19:26] using react native was a natural choice [19:29] for developing these cross-platform [19:31] experiences in our apps however going [19:34] cross-platform has some challenges [19:36] firstly when we talk of these [19:40] applications like office Windows OS [19:42] we're talking of some of the biggest [19:44] code bases in the world with hundreds of [19:47] millions of lines of code in production [19:49] and most of this code is written in [19:51] languages like C plus plus and C sharp [19:54] plus most of these applications are [19:57] really old like most of most have been [19:59] in use since before we invested in react [20:02] native and many of them are older than [20:05] react native itself as a matter of fact [20:07] Microsoft Office still has scored from [20:10] the 1980s in production [20:13] which which also means it's older than [20:15] me [20:17] so [20:18] so clearly it's infeasible to use the [20:21] Greenfield approach and completely [20:23] transition such huge Legacy applications [20:25] fully to react native how then are we [20:28] able to build reactive experiences in an [20:30] application like Microsoft Office for [20:32] that we build most of our applications [20:34] as Brownfield however there's one [20:36] additional factor that becomes important [20:38] when you go across platform and that's [20:40] code sharing [20:41] all four of the desktop and mobile [20:43] platforms Windows Mac OS iOS Android are [20:46] very different to each other and they're [20:48] natively they are built different and [20:50] overall it should be as easy as possible [20:52] for a feature developer to create [20:54] experiences for one platform and make it [20:56] work across all the platforms and across [20:59] different applications while mostly [21:01] using the same code base so the modern [21:03] comments experience I showed you earlier [21:05] is not just cross platform but it's [21:07] cross app it's used across word excel [21:10] PowerPoint and it's just one code base [21:13] so we want to be sharing as much code as [21:15] possible there's another important [21:17] factor that comes into play when going [21:19] cross-platform and that's something I [21:21] briefly mentioned earlier and that is [21:23] native look and feel so desktop and [21:26] mobile also have different design [21:28] languages and for every platform we want [21:31] our experiences to look native and [21:33] tailored to the platform that they run [21:35] on [21:36] and finally we want to be able to [21:38] validate and test these experiences [21:40] across these different platforms so the [21:43] developer experience should allow for [21:45] quick and seamless validation across [21:47] platforms so that any developer with an [21:50] existing mobile application can easily [21:53] add desktop support test and iterate [21:56] quickly while ideally just working with [21:58] the JavaScript code and not requiring [22:00] any domain language domain knowledge of [22:04] the desktop platforms [22:06] so how do we develop and enable [22:09] cross-platform experiences in these [22:11] applications using react native to [22:13] better answer this question I'm going to [22:15] walk us through one of our most widely [22:17] shipped react native experiences [22:19] and that's the Persona card so Persona [22:22] card is an experience within the [22:23] Microsoft Office applications that gives [22:25] you a review of your account details and [22:27] your recent activity to to Showcase this [22:30] experience I'll walk us through a quick [22:32] demo [22:33] so this is the Microsoft Word Android [22:36] application and so once you're logged in [22:38] so [22:41] here we go [22:46] yeah so this is a Microsoft Word Android [22:48] application once you're logged in [22:50] Persona card can be accessed from top [22:52] left and this screen that you see right [22:54] here this is the Persona card so this [22:56] entire screen and you can see your [22:58] contact information right here if you're [23:01] in an organization then you can see your [23:03] organization details [23:05] um you can also monitor your recent [23:07] activity like files edited and emails [23:11] and so on so this is a react native [23:14] application within the broader Microsoft [23:17] Word application in this case and as you [23:20] can see it had almost near native [23:22] performance and Native look and feel [23:23] tailored to the Android platform [23:28] so Persona card is currently available [23:29] across all the four desktop and mobile [23:32] platforms and it is in use across the [23:35] Microsoft Office apps like word excel [23:37] PowerPoint teams Outlook SharePoint [23:40] OneNote and so on [23:42] but if you look closely there are subtle [23:44] differences in how Persona card appears [23:47] across these platforms so for example if [23:51] you see it made more sense to keep the [23:53] experience as a full screen on IOS and [23:55] Android compared to a hover experience [23:57] on Windows and Mac OS [23:59] another example is the way the corners [24:02] are rounded so if you see like Mac OS [24:04] the rounded Corners are more natural uh [24:07] why why are we also have an expand [24:09] button to maximize Persona card on [24:12] desktop the maximization happens by [24:14] clicking on the profile icon and that [24:17] opens up a Persona card in like a modal [24:19] view which is also we built in react [24:21] native [24:22] in Mobile the back button as you see is [24:24] also tailored to the respective [24:26] platforms [24:27] and so is the design of the show [24:29] organization button so Windows one just [24:32] as text Mac and iOS have that arrow for [24:34] Android it's different so all of this is [24:37] tailored to their respective platforms [24:39] and this is all from one code base so [24:42] feature developers just need to learn [24:44] react native and then they can use react [24:47] native or our react native for desktop [24:49] platforms to make their apps work across [24:51] these platforms and across applications [24:53] and even though we have the have these [24:55] subtle design customizations to make [24:58] make the experience look native majority [25:00] of the code here is shared across the [25:03] platforms and that is why it was so [25:05] compelling for us to use react native [25:07] and actively maintain react native for [25:10] desktop [25:11] but we miss one important factor which I [25:13] previously mentioned and that is [25:15] testing and validation cross-platform so [25:18] testing and validation can be time [25:20] consuming at scale especially when you [25:22] have a lot of native code to deal with [25:24] developers just want to be able to [25:27] validate their experience without [25:29] building the rest of the native code [25:31] base which in the case of Microsoft [25:33] Office for example that's really huge so [25:36] even upgrading your experience may [25:38] require changing native platform files [25:40] which can be tricky if you're you know [25:42] working on a new platform or extending [25:44] to a new platform and if you have [25:47] multiple experiences like if you have a [25:49] Brownfield experience so many [25:52] maintaining test apps for all of them [25:54] and keeping them up to date with every [25:56] upgrade is also a time consuming process [25:59] so ideally developers should be able to [26:01] test and validate quickly across [26:03] platforms while only working with the [26:05] JavaScript code and keeping a consistent [26:07] developer experience across the [26:09] platforms for this one of the [26:12] Investments we've made is the react [26:14] native test app so so reactive test app [26:17] also known as rnta is essentially a [26:21] platform as a package so it provides you [26:23] test apps for all of the desktop and [26:26] mobile platforms so you can think of it [26:28] as a thin layer that's consolidating all [26:31] of the platform level hosting Logic for [26:34] all those platforms but it also acts as [26:36] an app of its own so what that means is [26:39] you only deal with the JavaScript and [26:42] you don't have to deal with the native [26:43] code anymore but if you do have native [26:46] code you still have full control over it [26:49] and testing on multiple platforms is as [26:51] simple as adding a dependency to react [26:54] native reactive windows or reactor to [26:56] Mac OS in the rnta package.json or we [27:01] have a CLI in which you can also pick [27:03] what platforms you want to test on you [27:05] can test on newer or older react native [27:07] versions and this supports Windows Mac [27:09] OS IOS and Android you can get started [27:11] today by just adding reactor test app to [27:14] your project and running in a test app [27:16] and you can find more details of this at [27:19] the Microsoft react native desktop repo [27:21] on GitHub or check some of our previous [27:23] talks on this [27:25] um lastly I'll quickly mention a few [27:28] other Investments that we have in [27:29] developer experience so first is fluent [27:32] UI react native or foreign and it's an [27:35] open source cross-platform react native [27:37] component library that uses Microsoft's [27:40] fluent design system and it allows you [27:43] to build beautiful experiences that feel [27:45] natural and tailored to the platform [27:47] like we talked about [27:48] so comp the components in foreign [27:52] compact with accessibility platform [27:55] optimized theming and design tokens out [27:57] of the box and they work well with the [28:00] stock react native components and [28:01] they're highly performant so I recommend [28:04] using these if you're interested in [28:06] checking out the flow and design system [28:07] or you want platform optimized [28:10] components for your applications and you [28:12] can find more details on the GitHub link [28:15] so another investment that we have has [28:18] been our next get which some of you [28:21] would have known or used and it's a set [28:23] of Highly performant and scalable tools [28:25] for react native developers and it's got [28:28] some great tools like align devs for [28:30] dependency management it has typescript [28:32] validation built in it's supposed free [28:34] shaking with es Bill and much more so do [28:36] check it out at AKA dot Ms or nxkit and [28:40] both fluent you are react native and rnx [28:43] kit are tools that we use internally to [28:45] build our applications and we use them [28:48] to ship apps to millions of people so [28:50] these are both open source projects and [28:52] we've really built these for in the [28:54] broader community that we all to use and [28:57] so we really welcome suggestions [28:58] feedbacks and contributions on these [29:01] tools [29:04] so to conclude and for those who are [29:07] going to go to work on Monday and you [29:08] want to say what did I learn this is the [29:09] slide you want to show [29:11] um so so overall we really wanted to [29:15] think about desktop Microsoft is heavily [29:18] invested in react native across desktop [29:20] and mobile and though there are [29:22] challenges in maintaining an out of free [29:24] platform like reacted windows or react [29:26] native Mac OS doing so makes our apps [29:29] better it helps make your apps better [29:31] and better and more platforms means more [29:34] scale even more users and monetization [29:37] for your apps so we are really committed [29:40] in our investment and what does that [29:42] mean that means ensuring these platforms [29:45] meet strict quality standards for [29:46] shipping such as accessibility and that [29:48] they are baked into the platform and [29:50] we've talked a lot about accessibility [29:51] today from the other speakers so and [29:54] this also means enabling a seamless [29:56] developer experience so that you can [29:58] build validator nitrate quickly this [30:00] means enabling developers to build [30:02] beautiful platform customized [30:04] applications while sharing as much code [30:07] as possible and finally this means doing [30:09] all of that without requiring domain [30:11] knowledge of the platform [30:14] so whether you've got a green field app [30:16] that you want to extend to desktop or a [30:18] native desktop app but you want to add [30:20] cross-platform features we have you [30:21] covered you can just focus on what's [30:24] important and that is your product all [30:26] of which is to say that react native [30:28] desktop is really built for scale and [30:31] more importantly it's built for you the [30:33] community [30:34] react native desktop today Powers [30:35] experiences in Microsoft reaching a [30:38] billion users and we know firsthand the [30:42] challenges that come when working with [30:44] multiple Bank experiences and and making [30:47] it work at scale so that is why you know [30:50] through these investments in the [30:52] platform and the tools we try to ensure [30:54] that developers using these platforms [30:57] that is you have a seamless development [30:58] experience and can really take your [31:00] applications to the next level that does [31:02] not mean we are perfect though that is [31:04] why we really want you all to get [31:06] involved so these are all open source [31:09] projects and we really welcome your [31:10] contributions and feedback to make them [31:12] better [31:14] and finally we've talked a lot about [31:16] react native for desktop today but a lot [31:18] of work has also going on in react [31:20] native core in the past many months to [31:22] make it better for everybody using react [31:24] native and for maintaining trust in the [31:26] platform to know more check out our very [31:29] own Lorenzo chandras talk tomorrow on [31:32] the work that you don't see where he [31:34] gives us a more detailed look into these [31:35] efforts to make react native core better [31:38] it's the first talk of the day tomorrow [31:39] so don't miss it [31:41] finally to know more and to see our past [31:44] talks head out head over to our website [31:46] aka.ms3 slash react native I also like [31:49] to mention two talks so one was at abjs [31:52] uh so those of you attended I've just [31:54] probably saw this but there's a talk on [31:56] react native from of Mac OS from my [31:58] colleagues from our colleague Saad and [32:01] this was a good in-depth talk on reacted [32:03] of Marcus and this is a great talk for [32:06] anybody looking to extend to Mac and I'd [32:08] highly encourage you to check out the [32:10] recording for this talk it's up on [32:11] YouTube there's another talk tomorrow a [32:14] chain react by Christoph on how meta [32:16] migrated the messenger desktop app from [32:19] electron to react native and I would [32:21] encourage you to attend this talk as [32:22] well [32:25] um finally it was our pleasure to talk [32:28] more about to talk about a react native [32:30] for desktop and share our own [32:32] experiences so please do reach out to us [32:36] on our GitHub and Discord we really uh [32:39] we can't wait to hear what you all are [32:42] going to build and we really value [32:44] contributions and feedback to all of [32:46] these platforms thank you so much for [32:48] organizing this conference infinite [32:50] thread thank you so much for inviting us [32:51] thanks to Ken for the great introduction [32:53] thanks all for listening have a good [32:55] night [32:58] foreign