React Native Connection 2024 - Tomasz Zawadzki - New Architecture is here

zatki um I'm a software engineer as after mention um I focus primarily on research and development efforts um maintain libraries like reanimated and also contribute to react native core um and today I will be talking about the current state of the new architecture so first of all um what is new architecture it's a redesign of the core internals of react native it is meant to eliminate some existing architectural level limitations of the framework and unlock new capabilities so it mostly changes how things work under the hood and ideally it should work with little to no changes in reactjs code and apart from this it also unlocks new apis added in recent versions of react for crafting better experiences so what exactly was not possible first building adaptive uis often requires measuring some views prior to painting think of tool tips so in Old react native measure was mostly asynchronous also use layout effect was kind of broken and react 18 just wasn't possible to to implement in react native there are also different um cases for instance text input it can be modified either from JS or from user events so there can be some desynchronization um and also flat list um the render function is called on the JS threet but um the scrolling happens on the vi threet so fabric will um then architecture will not solve the second and the third problem here it will just give you the tools it will give the tools to to solve for Library authors so the react native we know today is mostly asynchronous this is implied by the unique threading model so in most of the mobile applications we have the main thread which is also called the UI thread um and if there are some specific calculations that we want to run in background then we just start new background threads but in react native the react Javas script code runs on a runs primarily on a separate JavaScript thread um and this is for better responsiveness uh because only the UI updates are scheduled to be run on the main thread and similarly events are handled on the main threat but its callbacks are scheduled to be run on the JS thread which might introduce delays between the action and the reaction um if the JS threat is busy so the communication between Js and Native is carried out via so-called Bridge so when JS wants to update a view or invoke a native method of a native module it creates a payout object serializes it into Json and pushes it into the que and then some sometime later on a different thread the native side pops out the item deserializes it and runs the associated native code so the bridge was simply a message cue for instru like rendering views of or calling some native methods and also event handlers so the breach was limiting react native in its asynchronous design message batching and serialization costs so that's why it's one of the most hated pieces of react native architecture as it introduces some serious performance and memory uh overhead so here's how it looks on the new architecture um let me explain the four four pillars of the new architecture JSI turbo modules code gen and fabric so JSI allows for faster and synchronous interfacing with native code instead of calling the native code code via Bridge we can directly call a C++ function synchronously just like it was a regular function and from there we can call arbitrary Java or codling code via J ni I or objective c code or or sft code via objective C++ layer it also works the other way around as we can also call regular functions from C++ code so this is possible thanks to JSI uh which is a C++ API for interacting with JavaScript run times JSI supports Hermes and JavaScript core but also nodejs or or Google's V8 so anything you can express in JavaScript code you can also do that from C++ but now that JSI function calls are fast but not free so please don't overuse them next up we have turbo modules which are the spiritual uh successor to Native modules um so native modules they use breach and turbo modules they use JSI um and Native modules uh some some apis in react like uh alert or keyboard or linking they were implemented as native modules and right now with the help of JSI there they are migrated to Turbo modules and turbo modules um also go in pair with Cod gen so native modules they used to be um dyn dynamically typed so um the data had to be serialized and parsed and in a case of typee mismatch the only feed Feb that the user would would get was a runtime error so that's why turbo modules come with Coden uh which ensures type safety so Cogen is a tool a script that runs during up build and generates a thin layer of um code that will be compiled along with the application so think of it like generating abstract classes that developer needs to implement so this way if the interface changes or you forget to apply the new types um in some places um you will get a an an error in compile time so the interface of a native module is called a specification or spec for short um and specs can be written either in flow or typescript and there are also dedicated types like float double or in32 that you should use instead of number so um Cen is used not only for Native modules but also for Native components it serves the same purpose type safety and single source of through for the JS interface so it it ensures type safety for props commands and events and finally the core of the new architecture is fabric the new renderer so renderer is the part that translates reactjs components into host platform views like UI view on iOS so previously the renderer uh used to used the bridge to communicate uh with Native so it was asynchronous and now it is exposed as a turbo module and uses JSI also previously there had to be two separate implementations one for Android and one for iOS um and now the common logic is written in C++ in C++ which allows for better code reuse across platforms and also makes it easier to implement new platforms fa fabric also introduces a completely different rendering pipeline uh makes some changes to the threading model um and it comes with new event system and new rendering patterns so here's the part where I would explain how fabric Works in detail um but we don't have much time and also this is not not really interesting in in some places so I've read the whole article on react native blog um and these are just the most not notable highlights that I wanted to share with you so the first um highlight is render scenarios so here's how a regular react render works the update is triggered on the JS thread um it can be a state change or some timer or some interval um and it's it is followed with a react render then react native layouts the components using yoga um and commits the new Shadow tree um and mounts the changes on the UI thread and fabric makes it also possible to run this whole Pipeline on the UI thread in case of a high priority event that UI needs to reflect fabric also makes it possible to interrupt this pipeline so low priority events trigger new renders in case of a high priority event we run the whole Pipeline on the UI threet and then follow up with a render on the Js threet it is also possible to to commit C++ State updates like changing the scroll offset of a scroll view without the render phas um because the C++ state is never exposed to tojs so the second highlight are View optimizations and I'm pretty proud of the slides that I will present right now so let's consider this example here we have four nested views but only two of them affect l out so these views are not reflected in the final view hierarchy fabric just skips them to minimize the number of native views you can disable this optimization by setting collapsable prop to fals now let's consider this example there's another optimization called view reparenting which also affects the native VI hierarchy so fabric avoids deep trees so the chain of nested views is mounted like this you can also disable disable this optimization with one prop and here's how it behaves on fabric and finally there's an optimization called view recycling on the new architecture on the old architecture unmounted views were deallocated and newly mounted views had to be allocated again told you so on the new architecture there is a recycled pool that stores references to Native views like UI view to prevent frequent allocations and deallocations so when the view is unmounted its state must be reset to default values so react native calls a native method called prepare for recycle and then when another instance of the component is mounted react native checks if there is any recycled recycled instance in the recycle pool and is it so now a little bit of History because you might think that this is like bleeding edge technology but it isn't because fabric is in development since 2018 it was announced by lii in his talk in 2019 and then um it was announced to the public in 2021 you could actually enable fabric um in react in your react native app since 0.68 so are there is there anyone who uses fabric yes meta uses it internally in their apps so um I can spr the details but some some apps are using fabric for for several several years now so I'd like to reference this talk from upjs um that uh Kristoff paskov and I have presented two years ago At abjs Con 2022 and during that talk we mentioned that we started migrating our librar St the architecture and if in fact we did so in early 2022 we released the very first versions of our libraries um in fact the first library to support the new architecture was react native screens and then we quickly followed up with um gure Handler and reanimated so it worked really well in our apps like in our example apps but we he we had no real feedback from a production app so our goal was to migrate a true production up to the architecture so after upjs in late 22 um an opportunity came as expensify ask us to migrate there up to the architecture um and yakob petki and vitki from s Manion uh were leading these efforts um and they had to PVE their own way because to my best knowledge no one else did it before and spoiler alert they did it so I'm glad to announce that last week the new architecture finally hit the production on iOS and we even wrote an official blog post so congratulations to yakob and vo so the process was relatively straightforward um they started from enabling a flag so when you install your dependencies you just add one environmental variable and that's all um and by the way you can check if if fabric is enabled in the Metro console locks um but then you see this so um unimplemented component something um so the app will generally work fine but if there's some native component that hasn't been migrated yet there will be a red re rectangle so these are the native components that have not been migrated yet so they had to make a list of all Native components used in the app and the list of all the libraries that were not supporting fabric at the time and they had to migrate all of them one by one so here's a list of libraries that they have ported and it's not complete as because at some point we just lost track of the account um and the app was during active de development so there was no there were like more features coming to the app more libraries so the process just wouldn't end but hopefully it ended um so the process was quite similar and repetitive but some Li some libraries had their like quirks some issues um that need to be that needed to be taken care of and most of these issues were related to layout calculations or V recycling so that's why I showed you uh the most notable highlights um so the first phase was QA and back fixes um they have like really good QA team um that found all of this issues and it's it's in the works right now so probably you're wondering should I migrate so um yes yes you should um the new architecture suffers from the chicken and egg problem so like people are hesitant to adopting from people are hesitant from adopting it because there are like too few applications that already use Fabric and also that's the reason why the support is um so like not good sometimes the the support for like new architecture in some libraries might be missing um but the new architecture is the future of react native it's really like in in inevitable so um also the the process right now if you um if you if you think how the react native release crew um does their job they have they have to test each release both on iOS Android and paper and fabric so there many configurations to check so this process can't take that much time it can't last for uh for for too long um so I I guess that sometime in the future um then architecture will become the default um and in fact it it kind of did um because the new architecture will be the default since um the new architecture will be default in react native 75 so um as for the like community libraries there is still um some support missing so brand from Expo um and and the Expo team they have prepared a spreadsheet of top 100 uh like most most uh popular libraries in re native ecosystem um they have sorted it by popularity um and they are um working on they are like communicating contacting the library maintainers um making sure that the library is work also Alexander mikusi from softer mention like Expo team at softer mention um he prepared a like really cool CLI tool that um reads your packet Json scans all of all of the Native dependencies and checks one by one if it supports the new architecture or not yet um and migrating doesn't need to be that difficult because since I believe react native 72 or 73 there's also a like incremental way of adopting it so there's inter there's an interop layer which allows you to use use old components in new architecture and you can enable it this way so there's a file called react native config.js and you can just add like two props for each platform separately you just list the names of the Native components and it just works so congratulations to the meta team for making it easier to migrate so you might think um what are the benefits of of using of using the new architecture so these benefits come at like different levels of abstraction so first there are new new capabilities um for instance you can use on the architecture you can use concurrent features from react 18 and react 19 um you can also use react suspense you can have multi multi priority events and also the synchronous measure that I've mentioned earlier um as for the codebase improvements um it's like there's more safety um there's a shared C++ core which makes it easier to um maintain and also there's less serialization in the process and for the user there are also some ux improvements um probably there there will be a faster St startup of the application um because the turbo modules they can be um initialized lazily and also um performance it might be faster um so I was wondering uh what's the what's the benefits um in terms of performance and found this great discussion by Samuel from meta um and there are some bench marks um it has been measured on react native 72 right now we have 74 so things might have changed um and these are like synthetic benchmarks for 1,500 and 5,000 components so here's how it looks on Android for view little bit faster for text almost the same performance and for image quite good um and here's the iOS part so um views like notably faster text also notably faster um and image well quite good but new architecture wasn't meant to solve performance problems it was meant to solve like remove some architectural level limitations um without affecting the performance too much because in most of the cases at s mention we also run the performance of these of the apps and in like most of the cases the problems are not in the native code but in the reactjs code so this is the source main source of all performance issues in the applications so there are also some things that I wanted to um highlight here like of like next steps um so the first thing is bridge this mode this like removes completely the bridge object from from the code base there's also a thing called Static view configs uh which is also code named as Venice and finally um web alignment so there's a lot of efforts at meta from Ruben and others um to make some changes to align react native more today like web browser so um specifically new event Loop model um don't traversal oray layout apis and better conformance for styling so yeah that's all thanks for having me thank you very much toas let's head over and uh sure get some Q&A started okay so before we get started I've been told that whilst I've been in the center of that stage walking around like a mad man um that my head was not illuminated so you guys were all seeing like from the bottom down up um so let's just take this as headless react conf because um sorry that's an awful joke all right cool all right um so I do want to do something before we start is there anyone who's a native of kov here great can you give me two random locations in kov okay second destination oh come on you can't really verify my answers do you like I can tell anything oh give me a root um so probably um I would go by Trum um let's say um 22 to St okay I can't verify this so you could just be bsing and I'll just accept it yeah go ahead um and then basically anyr that goes uh South there we go the human City mapper great all right let's jump back into the actual Q&A I'm sorry I I I get distracted very easily um all right so um I want to start with the um use case that you had because I think there's a lot of theory around the new architecture but it's great to see uh it being put into practice so um from a benefits perspective um with the expensify app that your team helped uh migrate what were noticeable benefits or noticeable goals that you had after the migration was done so what do you think it unlocked practically um for for the expensify team to to migrate over to the new architecture so I I think that is like too early to say because the new architecture was enabled like last week or like two weeks ago um so right now we there are some like issues that need to be still like resolved um and we are yet to see what are the like the capabilities um there are some like in terms of performance I believe that the new features from react react 18 and react 19 uh will make it easier to apply some optimizations on the like um JS uh layer of code um so we'll see how it goes maybe it's a is a topic for another talk yeah maybe so um so that probably leads to the next question which was you've not measured performance yet before and after the migration not yet okay cool not yet but I I I'm wondering what what are the metrics here it's not like it's it's difficult to find one one metric we can use time to render um this was the metric that um that that Samuel from meta was uh was he he measure it um but I believe that there are like multiple metrics and you got to choose the right ones yeah cool [Music] um one question so we we'll we'll play a little bit of a betting game here okay if you were a betting man which I I don't know if you are or not um firstly if you had to place a bet which react native version do you think will drop support for the old architecture um I can say uh I've signed I've signed an NDA oh you know this already um perhaps you can't just do that man man surely that's a violation of your NDA in itself anyone really wants to know the answer you can always kidnap him and and force it out of him no all right let's play this betting game in another way if you were a betting man and you had to place a bet um you've said that the default um being the new architecture is in version 75 when do you think version 75 will be released um I'd say like 3 months from from now recently there's like the the releases of react native like are very frequent um and there's also like more comets in each in each release so the release crew is doing like really good job um it's like really well well organized um so things are like things are going really good cool awesome um Bruno says it's not a question but just congratulations and thank you for all the good work that you're doing so that shout out there thanks to the team um the expensify changes that you you folks did um I presume the libraries that you went through you recommitted that back to the actual open source repost so is that available for everyone or is that just done on like patches of the libraries um great question so it depends like um most of the libraries uh they like the team um submitted PR to to the original repositories um and the changes were merged and and released with no problems um there are some libraries that were like unmaintained so um probably the best uh the best idea here is to use like PCH packages um Al also another alternative was to like just Fork the library but it doesn't make sense to like split the ecosystem so it's better to have the changes uh perhaps as patches like this works in expensify so um I believe that's the right approach cool um people obviously love flatlist um so much um and so have you seen any benefits to to Flat list from the new architecture um so so not yet because the flat list still work Works um like it does on the on the old architecture um but there are some like new um types of events there's like a synchronous event um that will trigger the render Pipeline on on the UI thread um and this is something that we really want to investigate at after mention maybe come up with like a different different library for list like there's many packages of list uh for list in Rec native um so this is a definitely tough um topic to work on um but I believe that we we should investigate that like let's see how it works on on fabric yeah um so a a practical question um someone was wondering was when you're migrating from the old architecture to the new architecture um the errors that you see whilst you're upgrading are they mainly showing at build time or are they happening at runtime what's the is it both like how is that kind of split and what's the process look like practically so uh there should be like no um errors in in build time assuming that the libraries um do their job good um that they do their job well um for for runtime errors like like it depends like definitely fabric changes the the rendering pipeline so um some things happen earlier some things happen later um than they than they used to um so like for specific issues there were some like issues related to um to view recycling some some props from like third party libraries just were they they weren reset so like weird things were happening on the screen basically um but once we found the the root cause of the issue it it works well cool um and then one final question well I'll reframe the question so it asked is react stom using some pieces of the new architecture like fabric there are slightly different streams of work albeit react strict has part of that RFC which you mentioned which was unifying um things like the event Loop and bringing them closer to the web API so let's go in that angle and just think as I wanted to ask you what you find exciting um about some of the changes that are happening with the new event Loop um that's coming through and also the Dom traversal apis that are coming through what do you think that will unlock for us as a community and as as people that use re native uh I believe that this will lead to like more code reuse just like caddi um said during during the the previous talk um like there's better possibilities for for code reuse um there are some apis that you cannot really use on on react native um like okay maybe without examples um but uh if react native is close to the web then it will be just better for for the developers like one codebase multiple platforms yeah exactly and we can reap the benefits of the very large react ecosystem as well exactly lovely to chat with you Tomas thank you for um bearing with me as I asked you very stupid questions um and appreciate it and a big round of applause for toas thank you

Channel: Tech Connection

Views: 470

Keywords:

Id: jf0WTF4z8O0

Length: 29min 58sec (1798 seconds)

Published: Thu May 16 2024