Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Lorenzo S.

April 12, 2021
Tweet

More Decks by Lorenzo S.

Other Decks in Technology

Transcript

  1. React Native
    at Microsoft
    Torino Hacknight
    Apr 2021
    🧐

    View Slide

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

    View Slide

  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.

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  9. How we approached using this tech
    React Native at Microsoft

    View Slide

  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

    View Slide

  11. a 🤯 REAL LIFE 🤯 example

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  21. To sum it up
    I’ve been blabbering enough

    View Slide

  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

    View Slide

  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

    View Slide

  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?

    View Slide

  25. Thank you for listening!

    View Slide

  26. Q&A time!
    Ask away

    View Slide

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

    View Slide