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

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

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

Talk given at React Native EU 2023.

---

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

September 07, 2023
Tweet

More Decks by Lorenzo 'kelset' Sciandra

Other Decks in Technology

Transcript

  1. R A I S I N G T H E

    B A R React Native EU 2023
  2. HELLO! Tommy Nguyen • Principal Software Engineer at Microsoft •

    @tido64 on GitHub • I’ve put React Native in Outlook Mobile Lorenzo Sciandra • Senior Software Engineer at Microsoft • @kelset on GitHub • I’ve put React Native on npm for a while 3 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
  3. O U R J O B I S T O

    B E I N V I S I B L E 4 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
  4. R E A C T N A T I V

    E A T M I C R O S O F T https://reactnative.dev/showcase 5 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
  5. M I C R O S O F T A

    P P S U S I N G R E A C T N A T I V E Chiara Mooney & Shiven Mian – Building for Microsoft (Chain React 2023) 6 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 D O N ’ T F O R G E T T O C H E C K O U T K H A L E F ’ S T A L K T O M O R R O W F O R M O R E !
  6. T H E M I C R O S O

    F T G A L A X Y Lorenzo Sciandra & Tommy Nguyen - Improve all the repos – exploring Microsoft’s DevExp (RNEU 2021) 7 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
  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 working in the product app 10 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
  9. TWO MAIN SOLUTIONS 11 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
  10. # 1 : T H E T E S T

    B E N C H react-native-test-app • Supports 0.64 through 0.72 • Supports New Architecture • Supports @expo/config-plugins • Experimental single app mode 12 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
  11. macOS 13 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
  12. Windows 14 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
  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 15 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
  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 16 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
  15. S Y N E R G Y ! 17 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
  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?” 18 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
  17. E F F O R T L E S S

    U P G R A D E S npx @rnx-kit/align-deps 19 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
  18. HOW ABOUT A DEMO? 20 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
  19. 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 N A T I V E E U 2 0 2 3 @ T I D O 6 4 - @ K E L S E T
  20. 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 N A T I V E E U 2 0 2 3 @ T I D O 6 4 - @ K E L S E T
  21. P R O D U C T I V I

    T Y . I T ’ S N O T E N O U G H … ? 24 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
  22. “I want to put my React Native feature in any

    app” 25 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
  23. “I want to run web code in my React Native

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

    O D E ( ! ? )
  26. 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 29 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
  27. W E B A P I S 30 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
  28. W H A T I S W E B A

    P I S ? https://developer.mozilla.org/en-US/docs/Web/API 31 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
  29. W E B A P I S • Well-defined API

    interfaces • >1000 interfaces in total • Standard: no room for interpretation • For React Native‽ 32 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
  30. C O D E G E N S T A

    N D A R D A P I S aka.ms/rn-webapi-types 33 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
  31. 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 34 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
  32. 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. 35 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
  33. 36 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
  34. 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! 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 . 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/tree/kelset/rneu-demo-v2 38 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
  36. T H E G R A N D M A

    S T E R P L A N 39 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
  37. T H E G R A N D M A

    S T E R P L A N ( E X P E R I M E N T ) 40 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
  38. 41 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 W E ’ R E N O T T H E O N L Y O N E S
  39. CLOSING 42 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 • 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!
  40. THANK YOU! @tido64 @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 44 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 Got questions? Scan this: