Changing React Native from Within

Changing React Native... from within!

React Native has been used across Microsoft a lot, over the last few years. Only recently, though, we have realized how its developer experience and its community are in a precarious situation. We decided, then, to approach the problem in the most impactful way possible: by going straight to the source!

Join us in this talk to hear what we are doing to make life better for everyone in the community, from open sourcing new tools, to creating new cross-company groups and even in collaborating directly with Meta in the core codebase (and not just there!).

As a smart man once said: “a rising tide lifts all boats” - and we, we want to be the moon!

Transcript

1. Changing React Native... from within!
2. Hi ! — Adam Foxman — Principal Engineer @Microsoft — 25 years in software — 5 years with React Native — DevRel enthusiast @afoxman4 2
3. Microsoft ❤ React Native — Years of investment — Windows and MacOS platforms — Apps and experiences — Mobile and desktop @afoxman4 3
4. Dev experience doesn't scale — Dependency alignment, compatibility — Bundling performance, missing features — TypeScript is not part of core experience — Engineering velocity is too slow Photo by Graphic Node on Unsplash @afoxman4 4
5. Changing the status quo Photo by Christophe Hautier on Unsplash @afoxman4 5
6. Changing the status quo — Make a substantial contribution — Partnerships, community engagement — Core contributions ⚛ Photo by Christophe Hautier on Unsplash @afoxman4 6
7. Changing the status quo — Modern, scalable tools — Exceptional developer experience — Goodness for everyone is key Photo by Christophe Hautier on Unsplash @afoxman4 7
8. A rising tide lifts all boats Photo by Vidar Nordli-Mathisen on Unsplash @afoxman4 8
9. Challenges Photo by Raúl Nájera on Unsplash @afoxman4 9
10. Apps and experiences — Adding React Native to an existing app — The guide is complicated, one size fits all — Doesn't teach, easy to go off course Photo by Rafif Prawira on Unsplash @afoxman4 10
11. Staying up-to-date, at scale — Monorepos with 5,000+ dependencies — Upgrades are labor-intensive — Compatibility mistakes become runtime errors Photo by Cederic Vandenberghe on Unsplash @afoxman4 11
12. Inner-loop experience, at scale — Node tools are slow vs. native, especially bundlers Photo by Rémi Jacquaint on Unsplash @afoxman4 12
14. Inner-loop experience, at scale — Node tools are slow vs. native, especially bundlers — Haste (crawl) doesn't scale Photo by Rémi Jacquaint on Unsplash @afoxman4 14
15. Inner-loop experience, at scale — Node tools are slow vs. native, especially bundlers — Haste (crawl) doesn't scale — Metro is missing features Photo by Rémi Jacquaint on Unsplash @afoxman4 15
18. Inner-loop experience, at scale — Node tools are slow vs. native, especially bundlers — Haste (crawl) doesn't scale — Metro is missing features — TypeScript is absent from React Native workflows, yet is essential for large projects Photo by Rémi Jacquaint on Unsplash @afoxman4 18
19. What does success look like? — Upgrades are safe, easy, and trustworthy — Bundlers are fast and extensible — TypeScript is a first-class citizen — More PRs create a virtuous cycle Photo by Norbert Braun on Unsplash @afoxman4 19
20. React Native Developer Tools rnx-kit Photo by Shifaaz Shamoon on Unsplash @afoxman4 20
22. Focused on developer experience By developers. For developers. Community first. All are welcome. Tested at scale. Supported by Microsoft. @afoxman4 22
23. Meet the tools Photo by Hunter Haley on Unsplash @afoxman4 23
24. Dependencies — dep-check — Align to React Native, and across repos — Compatibility included, extensible — V2 RFC, beyond React Native @afoxman4 24
25. Bundling with Metro — Symlinks for pnpm, npm*, yarn link Photo by Daniel Lloyd on Unsplash @afoxman4 25
26. Bundling with Metro — Symlinks for pnpm, npm*, yarn link — TypeScript validation Photo by Daniel Lloyd on Unsplash @afoxman4 26
28. Bundling with Metro — Symlinks for pnpm, npm*, yarn link — TypeScript validation — Tree shaking with esbuild Photo by Daniel Lloyd on Unsplash @afoxman4 28
29. Bundling with Metro — Symlinks for pnpm, npm*, yarn link — TypeScript validation — Tree shaking with esbuild — Plugins: duplicates, cycles Photo by Daniel Lloyd on Unsplash @afoxman4 29
31. Command-line interface — Extends React Native CLI Photo by Cookie the Pom on Unsplash @afoxman4 31
33. Command-line interface — Extends React Native CLI — Task-oriented, scriptable commands Photo by Cookie the Pom on Unsplash @afoxman4 33
34. Command-line interface — Extends React Native CLI — Task-oriented, scriptable commands — Configurable defaults Photo by Cookie the Pom on Unsplash @afoxman4 34
35. Command-line interface — Extends React Native CLI — Task-oriented, scriptable commands — Configurable defaults — Bundling: drop-in replacement Photo by Cookie the Pom on Unsplash @afoxman4 35
36. Working together Photo by Camylla Battani on Unsplash @afoxman4 36
37. Straight to the source — Collaboration is key — Industry partnerships — Bundle Working Group — Meta: platforms, UX, and developer experience Photo by Camylla Battani on Unsplash @afoxman4 37
38. Wrapping up Photo by Peter Boccia on Unsplash @afoxman4 38
39. What did you learn today? — Microsoft ❤ React Native — Challenges require change — Toward an exceptional developer experience — rnx-kit tools solve problems — Collaboration is key Photo by No Revisions on Unsplash @afoxman4 39
40. Join us! — Try the tools — Share ideas, feedback, code — Engage in the community — Find me - let's talk! Photo by Randy Fath on Unsplash @afoxman4 40
41. React Native at Scale @afoxman4 41
42. A rising tide lifts all boats Photo by Shifaaz Shamoon on Unsplash @afoxman4 42
43. Thank you ! Adam Foxman @afoxman4 DMs are open I can't wait to meet you! https://speakerdeck.com/afoxman/changing-react-native-from-within 43