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

Raising the Bar: Our Journey of Making React N...

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
  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
  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
  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
  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
  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
  7. 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
  8. 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
  9. 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
  10. # 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
  11. 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
  12. 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
  13. # 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
  14. 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
  15. 16 R E A C T A D V A

    N C E D 2 0 2 3 @ K E L S E T
  16. 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
  17. 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
  18. 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
  19. 20 R E A C T A D V A

    N C E D 2 0 2 3 @ K E L S E T
  20. 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
  21. 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
  22. 24 R E A C T A D V A

    N C E D 2 0 2 3 @ K E L S E T
  23. “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
  24. “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
  25. 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
  26. U N I V E R S A L C

    O D E ( ! ? )
  27. 29 R E A C T A D V A

    N C E D 2 0 2 3 @ K E L S E T
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 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!
  42. 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