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.

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. 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 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
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
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
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
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
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
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
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
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
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
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
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
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
22. I N V I S I B L E*
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
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
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
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
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
28. U N I V E R S A L C O D E ( ! ? )
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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!
45. T R U L Y I N V I S I B L E
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