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

Raising the Bar: Our Journey of Making React Native a Preferred Choice 2.0

Raising the Bar: Our Journey of Making React Native a Preferred Choice 2.0

Talk given at React Advanced London 2023 (a new and improved version of the one I gave at RNEU '23).

---

At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.

Lorenzo 'kelset' Sciandra

October 20, 2023
Tweet

More Decks by Lorenzo 'kelset' Sciandra

Other Decks in Programming

Transcript

  1. R A I S I N G T H E B A R
    React Advanced 2023

    View full-size slide

  2. HELLO!
    Lorenzo Sciandra
    • Senior Software Engineer at Microsoft
    • @kelset on GitHub
    • React Native maintainer since 2018
    2
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  3. 3
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  4. https://reactnative.dev/showcase
    4
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  5. Chiara Mooney & Shiven Mian – Building for Microsoft (Chain React 2023)
    5
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  6. Lorenzo Sciandra & Tommy Nguyen - Improve all the repos – exploring Microsoft’s DevExp (RNEU 2021)
    6
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  7. I N V I S I B L E

    View full-size slide

  8. E N A B L E D E V E L O P E R S W O R K I N G O N O U R
    P R O D U C T S T O L E V E R A G E T H E T O O L I N G
    I N S T E A D O F F I G H T I N G W I T H I T

    View full-size slide

  9. A LOT OF
    POTENTIAL
    PAIN POINTS
    • 100s of engineers spread across many projects
    with different needs
    • Bundle size too big
    • Upgrades taking months
    • Code not workingin the product app
    9
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  10. TWO MAIN SOLUTIONS
    10
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  11. # 1 : T H E T E S T B E N C H
    react-native-test-app
    • Supports 0.64 through 0.72 (0.73 soon)
    • Supports New Architecture
    • Supports @expo/config-plugins
    • Experimental single app mode
    11
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  12. macOS
    12
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  13. Windows
    13
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  14. # 2 : R N X - K I T
    • Plugins for Metro
    • Presets for Babel, ESLint, Jest, Metro
    • Drop-in replacement for CLI
    • “All-in-one” approach
    • Tooling used across the company
    • React Native EU 2022 talk by Adam Foxman:
    • https://youtu.be/zgAjZVcvsv8
    14
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  15. E X A M P L E :
    T R E E S H A K I N G I N
    M E T R O
    15
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  16. 16
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  17. T H E P A I N O F U P G R A D I N G
    • HUGE diffs
    • “What other dependencies do I need to bump?”
    17
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  18. E F F O R T L E S S U P G R A D E S
    npx @rnx-kit/align-deps
    18
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  19. HOW ABOUT A DEMO?
    19
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  20. 20
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  21. T H A N K Y O U F O R A L L Y O U R C O N T R I B U T I O N S !
    https://github.com/microsoft/rnx-kit/issues
    21
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  22. I N V I S I B L E*

    View full-size slide

  23. W H A T W E ’ V E B U I L T S O F A R
    Ease of use
    • Smarter defaults
    • Transparent
    Upgradability
    • align-deps
    • react-native-test-app
    Advanced scenarios
    • Hybrid apps
    • Monorepos
    • Tree shaking
    • TypeScript
    23
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  24. 24
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  25. “I want to put my React Native
    feature in any app”
    25
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  26. “I want to run web code in my
    React Native app”
    26
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  27. D E V E L O P E R V E L O C I T Y
    “I want to put my React Native
    feature in any app”
    “I want to run web code in my
    React Native app”
    27
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  28. U N I V E R S A L C O D E ( ! ? )

    View full-size slide

  29. 29
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  30. C O D E T H A T W O R K S A C R O S S W E B A N D N A T I V E
    30
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  31. W E B A P I S
    31
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  32. https://developer.mozilla.org/en-US/docs/Web/API
    32
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  33. W E B A P I S
    • Well-defined API interfaces
    • >1000 interfaces in total
    • Standard: no room for interpretation
    • For React Native‽
    33
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  34. aka.ms/rn-webapi-types
    34
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  35. S T E P 0 : I N V E S T I G A T E
    • A lot of APIs
    • >1000 interfaces in total
    • ~200 after filtering
    • Driven by need
    • Pay-for-play
    • Open source
    35
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  36. S T E P 1 : R F C
    • We wrote an RFC 📣
    • https://github.com/microsoft/rnx-kit/pull/2504
    • The idea is to have these working across all
    platforms: iOS, Android, Windows, macOS,
    web.
    36
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  37. 37
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T

    View full-size slide

  38. S T E P 1 : R F C
    • Problems we need to solve:
    • How will this code look like?
    • Where will it live?
    • Which Web APIs should we implement first?
    • And so on…
    • Let us know your thoughts!
    38
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  39. S T E P 1 . 5 : O N E W E B A P I
    • Battery Status API
    • https://github.com/microsoft/rnx-kit/pull/2590
    • The demo you saw earlier
    • https://github.com/microsoft/rnx-kit/pull/2663
    39
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  40. S T E P 2 : I M P R O V E
    • battery status web API PR
    • 4 platforms working 🍏🖥️ 🤖🪟
    • Merged ✅
    • Initial filtering script
    • It was arbitrary, so we 🗑️
    • We made a 🦀 tool
    • Now we can make data-driven decisions
    40
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  41. WEB APIS IN RN
    US
    41
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  42. WEB APIS IN RN
    US
    42
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide

  43. 43
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T
    W E ’ R E N O T T H E O N L Y O N E S

    View full-size slide

  44. CLOSING
    44
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T
    • At Microsoft, Developer Experience is paramount
    • We’ve increased productivity for React Native by supplementing the core experience with extra custom tooling
    • We’ve put it in open source for everyone to leverage!
    • But it’s not enough…
    • Raising the bar: increasing developer velocity
    • Making web code into universal code via React Native is worth investigating
    • Web APIs → we’re experimenting 🧪
    • Collaboration is key 🤝
    Look forward to our talk next year!

    View full-size slide

  45. T R U L Y I N V I S I B L E

    View full-size slide

  46. THANK YOU!
    @kelset
    L E A R N M O R E :
    • Blog: https://devblogs.microsoft.com/react-native/
    • Documentation: https://aka.ms/rnxkit
    • rnx-kit: https://github.com/microsoft/rnx-kit
    • react-native-test-app: https://github.com/microsoft/react-native-test-app
    • RFC: React DOM for Native:
    https://github.com/react-native-community/discussions-and-proposals/pull/496
    • RFC: React Native WebAPIs: https://github.com/microsoft/rnx-kit/pull/2504
    @ R E A C T N A T I V E M S F T
    46
    R E A C T A D V A N C E D 2 0 2 3 @ K E L S E T

    View full-size slide