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

The work that you don't see

The work that you don't see

In the React space, there’s always a lot going on - and with that, a lot of emotions that can swing in both good and bad ways: how many times we’ve seen a hot take on Twitter generating drama? That, paired with a lack of communication from who’s in the driving seat, can create a lack of trust towards this awesome technology.

But behind the scenes, there is a dedicated group of developers working to improve the underlying infrastructure of React Native. This work is focused on making the technology more robust, better structured, and ultimately more reliable. In this talk, I'll take you on a deep dive into the inner workings of these discussions and highlight some of the radical changes that are being made. My hope is that by shining a light on this under-appreciated work, I can help restore your faith in the future of React Native.

More Decks by Lorenzo 'kelset' Sciandra

Other Decks in Technology

Transcript

  1. the work that you don’t see

    View full-size slide

  2. before we start
    lorenzo sciandra


    @kelset


    senior software engineer @ microsoft


    maintainer & releaser of RN (5+ yrs)
    who am i
    #ChainReact2023 19-may-23 @kelset 2

    View full-size slide

  3. the problem statement
    #ChainReact2023 19-may-23 @kelset 3

    View full-size slide

  4. #ChainReact2023 19-may-23 @kelset 4

    View full-size slide

  5. #ChainReact2023 19-may-23 @kelset 5
    the drama 🎭
























    View full-size slide

  6. #ChainReact2023 19-may-23 @kelset 6
    the roaring silence 🫥

    View full-size slide

  7. #ChainReact2023 19-may-23 @kelset 7
    the roaring silence 🫥
    https://github.com/facebook/react-native/wiki/Roadmap

    View full-size slide

  8. #ChainReact2023 19-may-23 @kelset 8
    feedback loop? 🤔

    View full-size slide

  9. #ChainReact2023 19-may-23 @kelset 9
    feedback loop? 🤔
    https://github.com/react-native-community/discussions-and-proposals/discussions/546

    View full-size slide

  10. #ChainReact2023 19-may-23 @kelset 10

    View full-size slide

  11. #ChainReact2023 19-may-23 @kelset 11

    View full-size slide

  12. #ChainReact2023 19-may-23 @kelset 12

    TRUST IN THE PROJECT
    Fear, Uncertainty, and Doubt

    View full-size slide

  13. #ChainReact2023 19-may-23 @kelset 13
    💧
    can we trust it?

    View full-size slide

  14. #ChainReact2023 19-may-23 @kelset 14

    View full-size slide

  15. …how to handle it?
    #ChainReact2023 19-may-23 @kelset 15

    View full-size slide

  16. …how to handle it?
    #ChainReact2023 19-may-23 @kelset 16

    View full-size slide

  17. 💡
    #ChainReact2023 19-may-23 @kelset 17

    View full-size slide

  18. being boring
    #ChainReact2023 19-may-23 @kelset 18

    View full-size slide

  19. what people talk about
    what people don' talk about
    react
    native
    #ChainReact2023 19-may-23 @kelset 19

    View full-size slide

  20. what people talk about
    what people don' talk about
    the boring bits
    #ChainReact2023 19-may-23 @kelset 20
    react
    native

    View full-size slide

  21. are you excited


    to be BORED?
    🎉
    #ChainReact2023 19-may-23 @kelset 21

    View full-size slide

  22. the
    f
    irst victim topic
    releases…but not how you think
    #ChainReact2023 19-may-23 @kelset 22
    https://reactnative.dev/blog/2023/01/12/version-071

    View full-size slide

  23. releases…but not how you think
    when i started
    #ChainReact2023 19-may-23 @kelset 23



    https://github.com/facebook/react-native/releases/tag/v0.57.4

    View full-size slide

  24. releases…but not how you think
    now
    #ChainReact2023 19-may-23 @kelset 24




    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

    View full-size slide

  25. releases…but not how you think
    future
    #ChainReact2023 19-may-23 @kelset 25
    https://github.com/facebook/react-native/pull/36267

    View full-size slide

  26. releases…but not how you think
    why is it good?
    #ChainReact2023 19-may-23 @kelset 26
    ⚖ more stable releases


    🫀 less human error

    View full-size slide

  27. releases…but not how you think
    why is it good?
    #ChainReact2023 19-may-23 @kelset 27
    ⚖ more stable releases


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

    View full-size slide

  28. #ChainReact2023 19-may-23 @kelset 28

    View full-size slide

  29. we can do better
    #ChainReact2023 19-may-23 @kelset 29

    View full-size slide

  30. MORE BORING


    MORE CONVOLUTED
    #ChainReact2023 19-may-23 @kelset 30

    View full-size slide

  31. the monorepo
    the problem
    #ChainReact2023 19-may-23 @kelset 31
    📁 /react-native

    View full-size slide

  32. the monorepo
    the problem
    #ChainReact2023 19-may-23 @kelset 32
    📁 /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 full-size slide

  33. the monorepo
    the problem
    #ChainReact2023 19-may-23 @kelset 33

    View full-size slide

  34. the monorepo
    the solution
    #ChainReact2023 19-may-23 @kelset 34
    📁 /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 full-size slide

  35. the monorepo
    the solution
    #ChainReact2023 19-may-23 @kelset 35
    📁 /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
    📦 ...




    View full-size slide

  36. the monorepo
    0.72 is going to be the
    f
    irst of the new era
    #ChainReact2023 19-may-23 @kelset 36
    https://github.com/facebook/react-native/commit/714b502b0c7a5f897432dbad388c02d3b75b4689

    View full-size slide

  37. the monorepo
    0.72 is going to be the
    f
    irst of the new era
    #ChainReact2023 19-may-23 @kelset 37
    👏👏
    https://github.com/facebook/react-native/commit/714b502b0c7a5f897432dbad388c02d3b75b4689

    View full-size slide

  38. the monorepo
    why is it good?
    #ChainReact2023 19-may-23 @kelset 38
    🔍 allows for further granularity


    🧩 more control (and automation)


    🤗 easier to contribute

    View full-size slide

  39. massively boring 📉


    very exciting future 📈
    #ChainReact2023 19-may-23 @kelset 39

    View full-size slide

  40. (
    #ChainReact2023 19-may-23 @kelset 40

    View full-size slide

  41. 🤔 How has this all been happening?
    #ChainReact2023 19-may-23 @kelset 41

    View full-size slide

  42. 🎻🎺🎷🪗🪕🎸🥁
    #ChainReact2023 19-may-23 @kelset 42
    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 full-size slide

  43. How can 🫵 get involved?
    #ChainReact2023 19-may-23 @kelset 43

    View full-size slide

  44. #ChainReact2023 19-may-23 @kelset 44
    how to get involved
    shaping react-native
    My personal recommendations:


    1. come up with your proposal - think it through


    2. draft up a document, a few graphs (ex. Excalidraw)


    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 full-size slide

  45. shaping react-native
    how to get involved
    the two changes I've shown are
    “made by Microsoft”
    #ChainReact2023 19-may-23 @kelset 45

    View full-size slide

  46. made by Microsoft
    #ChainReact2023 19-may-23 @kelset 46

    View full-size slide

  47. made by Microsoft
    #ChainReact2023 19-may-23 @kelset 47
    🖥 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 full-size slide

  48. Let's close this ) off!
    #ChainReact2023 19-may-23 @kelset 48

    View full-size slide

  49. concluding
    🌞
    React (Native) not just 🎭


    There is a lot going on under the surface


    Key companies are heavily invested in its success
    #ChainReact2023 19-may-23 @kelset 49

    View full-size slide

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


    You need to know where to 👀


    Be ready to put in the work
    #ChainReact2023 19-may-23 @kelset 50

    View full-size slide

  51. when we cut out all the noise,


    React Native is one of the safest bets
    in the entire Open Source space
    #ChainReact2023 19-may-23 @kelset 51

    View full-size slide

  52. #ChainReact2023 19-may-23 @kelset 52
    TRUST IN THE PROJECT

    View full-size slide

  53. thanks for listening!
    lorenzo sciandra


    @kelset


    slides, email, everything ➡ kelset.dev
    enjoy ChainReact ❤
    #ChainReact2023 19-may-23 @kelset 53
    Thanks Jamon, Gant and the IR team


    for making this awesome conference!

    View full-size slide