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

Changing React Native from Within

Adam Foxman
September 01, 2022

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!

Adam Foxman

September 01, 2022
Tweet

Other Decks in Technology

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
  13. None
  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
  16. None
  17. None
  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
  21. None
  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
  27. None
  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
  30. None
  31. Command-line interface — Extends React Native CLI Photo by Cookie

    the Pom on Unsplash @afoxman4 31
  32. None
  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