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

The work that you don't see 2.0

The work that you don't see 2.0

V2.0 of this talk, given at React Native Heroes in Turin, Italy.

---

In React Native, when people usually get excited it’s all about some shiny new feature, or tool, or clickbaity “do this to get 10x better!” claim. When announcements are made, they need to be catchy, sleek and able to generate hype… and how, for the Nth time, RN is better than tech X or faster than tech Y.

But that’s not all that is happening: under the surface, deep down in the mines of the foundation of this ecosystem, there’s a steady stream of work, discussions and considerations happening - all driven by the pressing need to constantly shift React Native into something more solid and better structured. In this talk, I want to take you down into the guts of these conversations, and shine a light onto some of these radical changes, how they are shaped up and what to expect in the future of React Native.

Lorenzo S.

June 16, 2023
Tweet

More Decks by Lorenzo S.

Other Decks in Technology

Transcript

  1. the work that you don’t see
    v2.0

    View Slide

  2. Ciao Torino!
    #ReactNativeHeroes23 16-jun-23 @kelset 2

    View Slide

  3. Ciao Torino!
    #ReactNativeHeroes23 16-jun-23 @kelset 3

    View Slide

  4. Ciao Torino!
    lorenzo sciandra


    @kelset


    senior software engineer @ microsoft


    maintainer & releaser of RN (5+ yrs)
    who am i
    #ReactNativeHeroes23 16-jun-23 @kelset 4

    View Slide

  5. the problem statement
    #ReactNativeHeroes23 16-jun-23 @kelset 5

    View Slide

  6. REACT NATIVE
    #ReactNativeHeroes23 16-jun-23 @kelset 6
    Fabric
    EXPO
    new features

    View Slide

  7. what people talk about
    what people don' talk about
    REACT NATIVE
    #ReactNativeHeroes23 16-jun-23 @kelset 7
    Lorenzo is here
    the boring bits

    View Slide

  8. #ReactNativeHeroes23 16-jun-23 @kelset 8
    the boring bits
    processes
    documentation
    refactorings

    View Slide

  9. #ReactNativeHeroes23 16-jun-23 @kelset 9

    View Slide

  10. the
    f
    irst victim topic
    releases…but not how you think
    #ReactNativeHeroes23 16-jun-23 @kelset 10
    https://reactnative.dev/blog/2023/01/12/version-071

    View Slide

  11. releases…but not how you think
    when i started
    #ReactNativeHeroes23 16-jun-23 @kelset 11
    https://github.com/facebook/react-native/releases/tag/v0.57.4
    ⚠ tribal knowledge
    ⚠ poor comms
    ⚠ lack of testing

    View Slide

  12. releases…but not how you think
    now
    #ReactNativeHeroes23 16-jun-23 @kelset 12
    https://github.com/facebook/react-native/releases/tag/v0.71.3
    https://github.com/reactwg/react-native-releases/discussions/58 https://reactnative.dev/blog/2022/09/05/version-070
    https://reactnative.dev/contributing/release-branch-cut-and-rc0
    ✅ changelogs
    ✅ documentation
    ✅ release crew
    ✅ processes

    View Slide

  13. releases…but not how you think
    future
    #ReactNativeHeroes23 16-jun-23 @kelset 13
    https://github.com/facebook/react-native/pull/36267

    View Slide

  14. releases…but not how you think
    why is it good?
    #ReactNativeHeroes23 16-jun-23 @kelset 14
    ⚖ more stable releases


    🫀 less human error

    View Slide

  15. releases…but not how you think
    why is it good?
    #ReactNativeHeroes23 16-jun-23 @kelset 15
    ⚖ more stable releases


    🫀 less human error
    https://rn-versions.github.io/

    View Slide

  16. #ReactNativeHeroes23 16-jun-23 @kelset 16

    View Slide

  17. we can do better
    #ReactNativeHeroes23 16-jun-23 @kelset 17

    View Slide

  18. MORE BORING


    MORE CONVOLUTED
    #ReactNativeHeroes23 16-jun-23 @kelset 18

    View Slide

  19. the monorepo
    the problem
    #ReactNativeHeroes23 16-jun-23 @kelset 19
    📁 /react-native

    View Slide

  20. the monorepo
    the problem
    #ReactNativeHeroes23 16-jun-23 @kelset 20
    📁 /react-native 📦 "react-native" - 0.71.0
    📦 "@react-native/assets" - 1.0.0
    📦 "@react-native-community/eslint-con
    f
    ig" - 3.0.1
    📦 "react-native-codegen" - 0.0.15
    📦 ...
    📁 /react-native/packages/
    ⚠ dark magic
    ⚠ inconsistencies
    ⚠ manual process

    View Slide

  21. the monorepo
    the problem
    #ReactNativeHeroes23 16-jun-23 @kelset 21

    View Slide

  22. the monorepo
    the solution
    #ReactNativeHeroes23 16-jun-23 @kelset 22
    📁 /react-native 📦 "react-native" - 0.71.0
    📦 "@react-native/assets" - 1.0.0
    📦 "@react-native-community/eslint-con
    f
    ig" - 3.0.1
    📦 "react-native-codegen" - 0.0.15
    📦 ...
    📁 /react-native/packages/

    View Slide

  23. the monorepo
    the solution
    #ReactNativeHeroes23 16-jun-23 @kelset 23
    📁 /react-native/packages/
    📦 "react-native" - 0.72.x
    📦 "@react-native/packager-assets" - 0.72.x
    📦 "@react-native/eslint-con
    f
    ig" - 0.72.x
    📦 "@react-native/codegen" - 0.72.x
    📦 ...
    ✅ proper repo
    ✅ aligned versions
    ✅ namespace
    ✅ automation

    View Slide

  24. the monorepo
    0.72 is going to be the
    f
    irst of the new era
    #ReactNativeHeroes23 16-jun-23 @kelset 24
    https://github.com/facebook/react-native/commit/714b502b0c7a5f897432dbad388c02d3b75b4689

    View Slide

  25. the monorepo
    0.72 is going to be the
    f
    irst of the new era
    #ReactNativeHeroes23 16-jun-23 @kelset 25
    👏👏
    https://github.com/facebook/react-native/commit/714b502b0c7a5f897432dbad388c02d3b75b4689

    View Slide

  26. the monorepo
    why is it good?
    #ReactNativeHeroes23 16-jun-23 @kelset 26
    🔍 allows for further granularity


    🧩 more control (and automation)


    🤗 easier to contribute

    View Slide

  27. massively boring 📉


    very exciting future 📈
    #ReactNativeHeroes23 16-jun-23 @kelset 27

    View Slide

  28. (
    #ReactNativeHeroes23 16-jun-23 @kelset 28

    View Slide

  29. 🤔 How has this all been happening?
    #ReactNativeHeroes23 16-jun-23 @kelset 29

    View Slide

  30. 🎻🎺🎷🪗🪕🎸🥁
    #ReactNativeHeroes23 16-jun-23 @kelset 30
    https://github.com/facebook/react-native/blob/main/ECOSYSTEM.md
    https://github.com/react-native-community/discussions-and-proposals/pulls https://github.com/microsoft/rnx-kit/discussions/categories/bundle-working-group

    View Slide

  31. #ReactNativeHeroes23 16-jun-23 @kelset 31
    Alex Hunt's talk at AppJS https://github.com/react-native-community/developer-experience-wg/discussions/11
    …and not just that!

    View Slide

  32. How can 🫵 get involved?
    #ReactNativeHeroes23 16-jun-23 @kelset 32

    View Slide

  33. #ReactNativeHeroes23 16-jun-23 @kelset 33
    how to get involved
    shaping react-native
    My personal recommendations:


    1. come up with your proposal - think it through


    2. write the document, add graphs and MVPs


    3. show it to a few people, get feedback


    4. establish a collaboration with Meta


    5. open the proper RFC in the discussion-and-proposal repo


    6. execute on the plan and co-own it

    View Slide

  34. shaping react-native
    how to get involved
    the two changes I've shown are
    “made by Microsoft”
    #ReactNativeHeroes23 16-jun-23 @kelset 34

    View Slide

  35. made by Microsoft
    #ReactNativeHeroes23 16-jun-23 @kelset 35

    View Slide

  36. made by Microsoft
    #ReactNativeHeroes23 16-jun-23 @kelset 36
    🖥 react-native-macos
    🪟 react-native-windows
    📲 react-native-test-app
    🌟 rnx-kit
    📏 align-deps
    📏 metro-serializer-esbuild
    🪟 hermes-windows
    and much, much more!

    👉 https://devblogs.microsoft.com/react-native/

    🐦 @ReactNativeMSFT
    📏 …

    View Slide

  37. Let's close this ) off!
    #ReactNativeHeroes23 16-jun-23 @kelset 37

    View Slide

  38. concluding
    🌞
    React (Native) not just hype


    There is a lot going on under the surface


    Key companies are heavily invested in its success
    #ReactNativeHeroes23 16-jun-23 @kelset 38

    View Slide

  39. concluding
    🌝
    Meta will listen and (might) help you


    You need to know where to 👀


    Be ready to put in the work
    #ReactNativeHeroes23 16-jun-23 @kelset 39

    View Slide

  40. #ReactNativeHeroes23 16-jun-23 @kelset 40

    View Slide

  41. when we cut out all the noise,


    React Native is one of the safest bets
    in the entire Open Source space
    #ReactNativeHeroes23 16-jun-23 @kelset 41

    View Slide

  42. #ReactNativeHeroes23 16-jun-23 @kelset 42
    TRUST IN THE PROJECT

    View Slide

  43. thanks for listening!
    lorenzo sciandra


    @kelset


    slides, email, everything ➡ kelset.dev
    enjoy the conf ❤
    #ReactNativeHeroes23 16-jun-23 @kelset 43

    View Slide