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.

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. I N V I S I B L E
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
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 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
10. 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
11. # 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
12. 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
13. 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
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 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
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 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
16. 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
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?” 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
18. 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
19. 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
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 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. I N V I S I B L E*
22. 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
23. 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
24. “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
25. “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
26. 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
27. U N I V E R S A L C O D E ( ! ? )
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 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
29. 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
30. 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
31. 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
32. 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
33. 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
34. 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
35. 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
36. 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
37. 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
38. 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
39. 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
40. 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
41. 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!
42. T R U L Y I N V I S I B L E
43. 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: