React Native at Microsoft

Slides prepared for Torino Hacknight.

In this talk, I presented my experience so far in using React Native (as an Open Source software) within Microsoft, and the challenges that surfaced.

Transcript

1. React Native at Microsoft Torino Hacknight Apr 2021 🧐 ⚛
2. • Senior Software Engineer @ Microsoft • React Native core maintainer & releaser • London based a.k.a. @kelset Lorenzo Sciandra Oh hi
3. 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.
4. Let’s level the playing field But first, what’s React Native?
5. 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
6. 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
7. 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
8. 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
9. How we approached using this tech React Native at Microsoft
10. 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
11. a 🤯 REAL LIFE 🤯 example
12. 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
13. 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
14. 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
15. 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
16. Using OSS you don’t own The hidden challenges of React Native
17. When using OSS at the Microsoft scale, you have some strict requirements We haven’t solved all the challenges yet
18. 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.
19. 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.
20. 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 • <insert ideas here!>
21. To sum it up I’ve been blabbering enough
22. 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
23. 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
24. 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?
25. Thank you for listening!
26. Q&A time! Ask away
27. • Twitter DMs are open! • Email: notkelset@kelset.dev a.k.a. @kelset Lorenzo Sciandra Get in touch