React Native at Microsoft Torino Hacknight Apr 2021 🧐 ⚛ 

• Senior Software Engineer @ Microsoft • React Native core maintainer & releaser • London based a.k.a. @kelset Lorenzo Sciandra Oh hi 

Let’s talk about Open-Source usage in a ”bigcorp” While some concerns will probably be too strict, I hope that the key takeaways can be useful to everyone. 

Let’s level the playing field But first, what’s React Native? 

Explaining RN #1 React Native is a cross-platform mobile solution to use JavaScript to control native (Android, iOS) experiences. It does so via an interface that allows two-way communication between the sides. JavaScript JS/Native interface Android/iOS 

Explaining RN #2 The JavaScript code you write is React-like and gets bundled in the native app via Metro. The bundle is used by the JavaScript engine of the mobile app to control the native side via async JSON messages. ~React Bridge Native UI JS Bundle Native Modules Mobile app JSC JSON JSON JSON METRO 

Explaining RN #3 Because of the limitations of the current architecture, a new one is in the works. There is currently no estimate on when this new version will be out. ~React JSI Native UI JS Bundle Native Modules Mobile app Hermes Fabric Turbo Modules METRO For more in-depth info, ask me 

01 02 03 03 Third party modules Everything else. 02 “React Native community” modules Maintained by a series of “known developers” – but it has a weird history. Some examples: react-navigation, webview, async- storage. 01 React Native core Maintained by Facebook. You can’t build a full app by just relying on this. React Native’s OSS Ecosystem 

How we approached using this tech React Native at Microsoft 

The brownfield approach ž Brownfield means to add React Native to a pre-existing native app. ž Here are some of the apps where we decided to use RN: Just add this 

a 🤯 REAL LIFE 🤯 example 

What did we find out? ž Bigger pool of talent available (JS devs) ž Native UIs (= full fidelity animations, accessibility) ž Better performance (compared to alternative solutions) ž Better development experience (DX) ž “Extra” bonuses: ž Code-sharing ž Service delivery 

Doubling down: Fluent UI ž It’s a horizontal “expansion” of RN within MS ž FluentUI is like Material from Google or HGI from Apple: See more at: https://github.com/microsoft/fluentui-react-native 

Expanding RN: the desktop ž We decided to go “vertical” and expand the core implementation to other platforms: JavaScript JS/Native interface Android/iOS Windows Native ++ MacOS 

React Native: desktop edition ž React Native Windows ž adds support for the Windows 10 SDK, which allows to build apps for all devices supported by Windows 10 including PCs, tablets, 2-in-1s, Xbox, Mixed reality devices etc. ž Hosted at: github.com/microsoft/react-native-windows ž React Native MacOS ž Adds support to MacOS, by modifying some of the pre-existing iOS configurations. ž Hosted at: github.com/microsoft/react-native-macos Read more at: https://microsoft.github.io/react-native-windows/blog/2020/05/19/rn4mupdadates 

Using OSS you don’t own The hidden challenges of React Native 

When using OSS at the Microsoft scale, you have some strict requirements We haven’t solved all the challenges yet 

Problem 1 React Native is open source, but not Open Source. What does it mean to us? • We don’t know the roadmap • We don’t know ahead of time what will happen, and when (commits can just appear on main) • PRs can take a long time to get “merged” How are we addressing it? We are establishing a partnership with Facebook with regular cadence of communication. 

Problem 2 Facebook’s approach at developing RN is different from ours. Example: train releases mindset and “forward fixes”. What does it mean to us? • We have business requirements we need to comply with: • Long term support • Security • We need to keep our desktop platforms (RNW, RNMacos) aligned How are we addressing it? During our meetings with Facebook we are exploring some options… but we haven’t figured out a solution yet. 

Problem 3 Using third party modules is good for OSS health, but bad for security and LTS (long term support) What does it mean to us? • Need to comply with our business requirements (LTS, Security, platform support) • Sometimes the maintainers just disappear How are we addressing it? We are exploring some ideas: • Forking • Partnerships on a case-by-case scenario • 

To sum it up I’ve been blabbering enough 

React Native is a dark horse ž Huge set of benefits thanks to its core idea and flexibility ž By itself it’s incomplete ž There’s a lack of OSS governance that leads to extra hurdles 

Using OSS when you are Microsoft ž We have a huge drive to be active OSS participants ž We use OSS for fundamental pieces of software, so we are invested in it being successful ž We have a high bar to match ž Long term support ž Uptime & “reaction time” ž Security issues & CVEs 

Using OSS when you are… you ž Here are a few questions you should ask yourself: ž Who is maintaining this software? Can I trust them? ž How critical can I afford this software to be for my product? ž How can I help it succeed? 

Thank you for listening! 

Q&A time! Ask away 

• Twitter DMs are open! • Email: [email protected] a.k.a. @kelset Lorenzo Sciandra Get in touch