Save 37% off PRO during our Black Friday Sale! »

React Native at Microsoft

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.

74f1e72fd4d260d8192ee1a9a02ecb87?s=128

Lorenzo Sciandra

April 12, 2021
Tweet

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