Born & raised in Piedmont, graduated at PoliTO, moved to London in 2017. Senior Software Engineer @ Microsoft React Native maintainer Lorenzo Sciandra (@kelset) Hello, and welcome! [email protected] - @kelset 2/37
Talk overview React Native as a Concept Deep dive: the desktop platforms Pushing it forward React Native’s impact at MS Deep dive: the multi monorepo world 1 2 3 4 5 (I swear, I usually don’t do this) [email protected] - @kelset 3/37
React Native: greenfield By “greenfield”, we mean the standard RN approach to mobile development. Native components and APIs Native Mobile Async queue of JSON messages Bridge* Business logic JavaScript *let’s ignore the RN rearchitecture for this talk. if you want to learn more: aka.ms/rnrearch [email protected] - @kelset 5/37
React Native: brownfield By “brownfield”, we define a pre-existing native app to which React Native is added in a second phase. Additional feature or section of the app JavaScript Bridge Standard iOS/Android app Native Mobile Custom initialization of the RN domain [email protected] - @kelset 6/37
The revolution: exploding the brownfield How many doors can I open, if I expand the brownfield concept? Can be abstracted and generalized: it’s reusable! JavaScript Can be tailored to the app Some sort of Bridge Doesn’t have to be mobile Any platform [email protected] - @kelset 7/37
Expanding the boundaries of brownfield at Microsoft When you see RN as an enabler, there are many possibilities. Can be shared across the platforms, apps and codebases! JavaScript* Tailored to the platform requirements EACH app its own BRIDGE APPROACH ANY app on ANY platform * JavaScript is the most used programming language, according to StackOverflow (aka.ms/sosurvey) [email protected] - @kelset 8/37
The multi monorepo world At Microsoft, we have many repositories. Like, a lot. Most times, shared as npm packages JavaScript Experiences Codebase 1…N Its Bridge ANY app on ANY platform Codebase 3…N Bundlers, custom Babel plugins, etc. JavaScript Tooling Codebase 2…N Usually, one per platform [email protected] - @kelset 9/37
React Native Windows FB (Meta) didn’t want to work on it – so it has always been defined as an “out-of-tree” platform, meaning that it’s an add-on on top of RN core. Not only Windows: means also Xbox, HoloLens, etc.. UWP (“Windows SDK”) What we maintain (in its own repo) UWP Native Modules (& more) Standard RN code JavaScript The FB (Meta) repo RN core [email protected] - @kelset 13/37
React Native macOS RN macOS, because of its ”closeness” to its iOS counterpart, is instead a fork. macos What we maintain Standard RN code JavaScript RN core (forked) [email protected] - @kelset 14/37
Does it work? Let’s mention a couple of real-world examples: Xbox https://www.windowscentral.com/xbox-app-pc-gets-speed-boost-ditching-electron-react-native-uwp FB (Meta) Messenger Desktop Keep your eyes out for ReactConf on Dec 8th: https://conf.reactjs.org/ https://reactnative.dev/blog/2021/08/26/many-platform-vision#expanding-to-new-platforms [email protected] - @kelset 15/37
Challenges of Open Source Maintaining 2 extra platforms introduces a big overhead: We need to balance doing what we need with what happens in RN core This makes it hard to have feature parity across the various platforms (see macos) Despite collaborating with FB directly, the feedback loop can still be improved We have weekly syncs to address main challenges, but FB’s approach to OSS means that there’s a lot of unknowns always OSS is hard! And when you are Microsoft, the barrier is even higher (security, tooling, practices, etc.) [email protected] - @kelset 16/37
Challenges of a multi-monorepo world Application repo JS Experiences JS Tooling Separating the dev from the toolchain Keeping dependencies aligned [email protected] - @kelset 19/37 Am I using the right OSS libs? Updating RN – when and by who? What if I target multiple RN versions?
Problem #1: separate developer from toolchain We need some way for the JS developers to test their code in isolation - without the overhead of more RN apps to maintain. developer Application Repo 1 Repo 2 [email protected] - @kelset 20/37
Solution #1: React Native Test App REACT NATIVE TEST APP is a super compact RN app that hides the complexity of a greenfield app below the surface. The developer only needs to worry about the JavaScript code for their experience – but can still have full control of the native code (if needed). It supports many different RN versions, via a simple configuration change. if you want to learn more: https://github.com/microsoft/react-native-test-app [email protected] - @kelset 21/37
Solution #2: dep-check DEP-CHECK is a tool that can understand the dependencies in a package.json and can modify it, based on a series of curated profiles. 7 versions of RN supported, over 40 libraries curated It can even fix misconfigured package.json – the developer simply defines a local dep-check configuration, and the tool will take care of declaring the right packages, at the right version, in the right section. if you want to learn more: aka.ms/dep-check [email protected] - @kelset 23/37
Even more platforms: RN in AR & VR “Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework." if you want to learn more: https://www.babylonjs.com/reactnative/ [email protected] - @kelset 26/37
Even more tooling: RNX-KIT We are building more tools to enable even more people, and do it in an OSS way: https://github.com/microsoft/rnx-kit Bundlers, custom Babel plugins, etc. JavaScript Tooling = [email protected] - @kelset 27/37 👀
Even more tooling: exploring Metro’s potential Metro is powerful bundler, with some room to grow: And keep an eye on Bundle Working Group! 👀 👀 [email protected] - @kelset 28/37
Even more tooling: Hermes on desktop We are experimenting with Hermes: https://github.com/microsoft/hermes-windows Read more at: https://microsoft.github.io/react-native-windows/docs/hermes Native Mobile Bridge JavaScript [email protected] - @kelset 29/37
Even more OSS: React Native releases We are directly involved in the RN release process We are helping improving the testing and infra pipelines In the future: Potentially, an LTS More structure and clarity around the process itself [email protected] - @kelset 30/37
In conclusion, internally • React Native is a powerful enabler • It’s allowing us to hire JavaScript developers to work on native projects • It’s indirectly forcing an alignment of tooling, APIs and mindsets [email protected] - @kelset 32/37
In conclusion, externally • We have a great investment in RN, that is reflected by a huge involvement in Open Source: • RN Windows & macOS • Releases • Hermes • We are constantly trying to push the boundaries: • Bundle group • Rnx-kit • [email protected] - @kelset 33/37
kelset
junk0612
pluu
daipresents
ivargrimstad
ogiwarat
hsawaji
shohata
m_coder
tkhs0604
star_zero
subomi
dunglas
reverentgeek
schacon
jakevdp
marcduiker
thekraken
sachag
edds
phodgson
brianwarren
62gerente
pauljervisheath
eileencodes