New Architecture of React Native | React Native EU 2020 Conference Q&A Panel

right so we are warmed up we are ready to dive deep into the first group uh so just for the record i have grouped uh the questions into three groups uh and these groups are at the new architecture of react native multiple platforms and general development so just general questions that people were interested to have answers for uh so let's move on to the new architecture of react native uh so just to quickly recap a last year react native team announced a lot of changes uh to the core of react native that you know addresses a lot of challenges we are facing when it comes down to building applications and that includes turbo modules which is a new implementation of native modules for better performance and synchronous access code gen to ease creation of native modules by synchronizing the type definitions and missile declarations between native and javascript gsi which is javascript interface and it is a unified lightweight sort of general purpose api for any javascript virtual machine and it enables every uh other piece of the re-architecture and is what for example makes hermes integration very easy uh and you know easy is obviously really relative here um and then fabric which is just the ui re-architecture to take full advantage of you know these features and concurrent react architecture so while this work is still in progress we can see a lot of these already in the open source and i think it would be great uh to to sort of go over the latest updates in the ria and i think that questions uh from our audience might be a great starting point uh to our discussion so uh so the first question that i have here is you know what is the status of the re-architecture and what are the changes that are already shipped and when do we expect to have an update on the rest of them and i think the best person here would be rum that is you know even wearing facebook t-shirts so uh that tells uh tells it all sure so i think this has been a question that people have been asking and uh i can clearly see how people can't wait to get their hands on uh like the new architecture but i want to be like amply careful here about talking about like there is no release for the new architecture in the sense that there will not be one single date where it's like things stop and like suddenly react natives which switches over the new architecture uh our initial plan was definitely trying to get it out in 2020 but unfortunately coveted a lot of people their productivity kind of went down and as a result we may not be able to hit uh we are looking at 2021 as something that uh uh where this can get out but i mean i don't have a specific date in mind but let me also lay down what what does releasing it really mean so uh let me talk about a little bit on what what's happening in terms of how fast you're going internally and then talk about what's available externally so internally i think on the main facebook app we are actually testing fabric we are testing turbo modules and honestly jsi is pretty much the way to go for both fabric and turbo module all of our native modules are code giant in fact we also retro cogent the existing modules there's like turbo modules tech and stuff for existing modules also so the testing is heavily underway we are seeing some really exciting results both in terms of performance and in terms of stability and i think one of our biggest motivations here is to ensure that the transit transition is smooth and stable more importantly people's apps don't start crashing and that's why we are being exceedingly careful uh we've also started to roll out uh fabric and turbo modules to internal apps for example the oculus companion app that i work on we are starting to roll out turbo modules in it fabric is a little bit harder because we wanted to do it screen by screen and for that you need native navigation which we are trying to move to and this is a similar story with all standalone applications so i think the best way to think about it is internally in facebook apps we are slowly starting to roll out fabric and tower modules uh like ironing out the issues and any edge cases that we encounter as far as open source is concerned you'd actually be surprised but both fabric and turbo modules are out there i think the biggest challenge is it's not buildable and that's only because facebook internally uses buck so all of our build scripts are reliant on bug now this is where i think i we can use some help from the community and i think uh someone did this for ios where they picked up the ios turbo modules and fabric systems wired it up into the xcode build and they were able to build it we haven't done that on gradle yet so if someone is brave enough and wants to try this out i would like to recommend this as a really good project where you play around with gradle and enable like uh a turbo modules and fabric on rn tester for example it's not as hard as it looks it's basically a bunch of magic around graded scripts and android dot mk the c plus plus wrapper so that's the current state of the world a lot of code is out there i think eli also spoke about like code generation and i think it is in a state where you can try it out test it out but i'm not sure if i would recommend it for production yet mostly because it's not officially supported yeah yeah yeah yeah thanks for answering that and actually you would be surprised that i mean i'm not i'm not surprised because i've been there already how how quickly sometimes it might be how easy it sometimes might be to to kind of release some of these internal pieces into into react native for ios for example on the on the hermes site compiling it for ios is theoretically just you know doing some changes to the cmake which on h7 is very hard but i was kind of surprised that you know essentially the code is just c so as long as you compile it it theoretically can run so not a lot of magic there inside uh as someone would think um awesome so um so that brings me to the next question where where i could track the progress of that uh in the future for example uh so uh i think monica also wanted to answer this but let me quickly give a spiel of like the discussions repository and the history which i probably haven't spoken about so i think almost one year ago when i was in react native team i realized that there was a lot of discussions that were happening one-off and one of our our goals in the react native team was to be inclusive and ensure that every discussion is transparent and people understand the rationale band what's happening that's the reason why we created this repository called discussions and proposals where people like anyone in the world can submit a proposal people can critique it look at uh look at what can be implemented and then go ahead and implement it so we have this proposal called discussions and proposals and there's a there are issues related specifically to turbo modules and to fabric that's where most of our updates are happening unfortunately those issues could also be noisy because usually for every single update there's like 10 comments asking hey when is it ready uh so you might want to you want you might want to add on your noise filtering in there but i think those are probably the best places that you can look at it's also a place where i'd recommend if you're experimenting with turbo modules for example just go add your status there and tell people hey here's what i've tried out and people might come asking you i think also that um if you allow me to jump in in addition to what ram just said um intuitively the first place that i a particular go and i will recommend people who just getting into is um of course the react native repo where we also have like a bunch of like issues being discussed and the react native community in particular with the reagnetic community repo i found them very useful especially their releases uh section um i believe and correct me ram if i'm wrong as like one of the most reliable places to go um you know in regards of staying up to date with uh status reports and you know uh all what's going on um with react native overall um and then just the usual just chain logs and then release notes from uh from your team at facebook i think it's also um yeah just like tracking all those will be pretty effective in just keeping um you know any developer up to date cool uh so so what is the feature you're most excited about um i don't know what you're asking me okay so these well we've been talking about how big this new re-architecture uh of react nato would be or is like kind of the process of being uh and of course there are there are a lot of things that will be definitely um game changers um in the way we develop apps but if i have to pick one i'm definitely gonna go with turbo modules um you know this new feature that pretty much tackles um you know the most in terms of performance and safety and um i really like the idea of having tape safety between native uh code and javascript and uh particularly for uh particularly for us at mls this is really important because we we do have a fair amount of native modules and integrations um with third-party providers so um you know the overhead reduction that turbo modules introduces uh when calling methods from the javascript side is something that is really really going to help us with performance um you know among with the faster startup when initializing our application so definitely turbo modules for me nice i like that i like that as well anybody else want to chime in here for me it's probably going to be jsi uh because gsi is like the fundamental layer that's the on which all of these things are built and you'd actually be surprised but all the other hybrid mobile app development platforms have a story similar to jsi for example if you look at native script native script actually has a way to generate all of these javascript files based on templates like you take a java class it automatically generates all the methods and exposes them to javascript and the mechanism they use is something very very similar similar to jsi in fact jessa is also fundamentally the way a browser exposes its native apis to your javascript player so looking at it in retrospect maybe we didn't really need a bridge back then and we could have just used gsa but uh i would like vote for jsi mostly because it's like the founding block of the foundation of the entire uh system and json is also already ready so you can technically start using json right away not just for fabric whatever modules but even let's say you're building your own javascript layer on top of a javascript engine gsa would come in very handy yeah i i'm probably most excited about fabric ever since initially when we explored uh react native at artsy i think i spent a month trying to just get react native to work with ui kit as i was used to it um and things like i don't know a ui collection view or all those sorts which with the rtc app you know there's so many images shown and you want to have fast scrolling and fast interactions that that was kind of just uh it felt like a necessity in the end i think the app works works really well with jag native as it is but you know conceptually i think having the ability to do such a synchronous ui work will probably pay off in uh in in areas where it is noticeable that react native is somewhat lacking for me i also like the fabric of more excited about fabric as well from my talk i said that for third party development developer to have a out of three platform is really really a disaster because the upstream changes really change every day and so for especially for the individuals it's really hard to have out of three platforms and now with the fabric most of core is also cross-platform so i think it will benefit for the new platform and method is possible yeah i totally agree with

Channel: Callstack Engineers

Views: 1,722

Keywords: #ReactNative, #ReactJS, #JavaScript, #MobileDevelopment, #ReactNativeEU

Id: P9GRfAAwFt8

Length: 11min 49sec (709 seconds)

Published: Fri Mar 12 2021