React Native: See the Past, the Present and the Future - Lorenzo Sciandra

thank you everyone thanks you honey like to me being on the stage being introduced by you is like a dream coming true like to me now being introduced by Yann is like I can take off from the bucket list I'm done talking I can just walk up station now I'm joking of course today I'm gonna try to navigate with you what has been happening in the Iraq native world as you may know this title is quite generic it doesn't really tell much and not only that it's also fake because the real title is past future and present and now you maybe start wondering why did you waste it all slides with the wrong title and well that's simply because I want to drive home the point that I'm gonna try to go further on during the talk which is the change is good and by change is good I mean any change that it is not brexit this idea of changes good actually came to me when I was preparing these slides because I've given variation of this talk already a couple times during this past year and every single time not only in the architecture has changed something so every time it was a completely different Hulk but also I was a completely quote-unquote different person back then so like the first time in January I was only only a rack native core maintainer I was working hard on the releases as Anna mentioned but then by May I sort of became way more involved in what is now the Iraq Native community 2.0 and I was an owner I thought we were gonna change the world and now direct advance and I scaled it down my involvement with Iraq native core team I'm still helping around but I'm mostly trying to help my local community of open-source maintainer through meetup called provided Aziz and if you want to learn more we can talk it separately but basically the true change that happened between May and now is actually that I removed Twitter from my mobile phone and believe it or not he made my life so much better anyway as you already mentioned I'm Lorenzo I'm at Cal sit everywhere where I want to be found I've been a reactant a developer for over three years now I've been a core maintainer for almost two is going to be in January my mantener birthday month birthday anyway and I've also been working at formidable since January formidable is an awesome company I'm having the time of my life and we worked with some great clients if you have any kind of project they need help or new project that needs to back be kick-started here in London or in Seattle Phoenix Denver us everywhere feel free to reach out to me or to my colleagues we also have a booth in the other room so there's that and also we are hiring so you know it's really a great company to be in and you may want to you know think think about the idea of joining us anyway talking about react native when I think about the way the project came to be from some reason my brain mostly because you know thanks Disney I just always think about the scene from Hercules where Zeus takes things from different clouds and make the Pegasus and I came out by feeling that basically that's what I'm going to attract native you see in 2013 what the scenario was inside Facebook or that's my imagination going for it it's like one side al react on the other side they had you know native apps and basically on one side they had a web-based technology they had JSX and it was a finish it was faster iterating it was you know I like the way JSX works it was also like appealing from you know a coding perspective and on the other side you have native which means profit Ori stacks like Android and iOS which are completely disjoint like you need to write everything twice and also it's load to ether it on like if any of you has ever done like an iOS release like a proper a poor review process iOS release you know that now it got batteries like 24 to 48 hours but back in like even two years ago it was like you could hope to take like three to five days like it was really really painful like between when you wanted to launch something and when it was actually released to your consumers so basically the team in 2013 started thinking with the idea and then in 2015 they were like okay how about we take JavaScript we put it in a thread we take the native app we have the the native side in its own dedicated thread and then through a custom bundler we kind of force or code into a native app well that made kind of sense right we have two threads one it's JavaScript so it means that even if JavaScript screws up really badly is still in its own thread also like iOS already provided the JavaScript core which is an engine based on WebKit or the other way around but still you already ad for free the place where you could put this bundled JavaScript and that's great the only thing missing at that point was a bridge or was some way to make these two sites communicate and that's why they selected JSON as the data format because it's quite you know open in Universal and then they created this interface called the bridge which is actually more of a queue it's it has good and bad things about it and I'm gonna mention the limitations of it later but they core idea is that now you have something that can make the two sides communicate through a common format which is really really important also this bridge because this idea was so embedded into this approach when you start your app it means that the bridge is starting so like it's really really intertwined with the lifecycle of any rack native app and at that point well you may say you know we're ready to go you know we have the messages that are batch they are sent back and forth it's a nothing queue so you have communication going all the time but there is actually one thing that is missing that is basically the possibility to use flex flex box that's because native implementations on how flexbox by default so they needed to take you know from another cloud from another Facebook project called yoga which is a layout engine they had to take it integrating into the this idea that they were shaping up and now we have the full structure basically we have yoga which is implemented in C++ in its own dedicated thread so basically every rack native app currently has three threads and even if the bridge is one and all the messages are going back and forth whenever something is related to the UI to the shape of the tree what you may have you know heard through you know react because it's the same basic implementation you have to go through the UI manager module to yoga and then back to the native so quite a number of jumps so this is the full architecture now let's try to clean it up a bit let's talk about the may trade-offs oh this is gonna be long now I'm joking I've only written here like the main limitations that the current architecture has basically as you can see a lot of them are around the nature of the bridge because as you can imagine like having one bridge which is fully sync means that the two realms don't actually know about each other like it's like imagining to talk to another person through frog to a through fog by sending paper planes like you just send them and that may be some point something will come back but you have no real insurance and also since it's just one bridge one cue with everything it's easy to have a bottleneck it's easy to have problems of clogging your bridge with too many messages and making done things slowly you know perform slightly worse and also for example for the native modules so think Bluetooth the fact that you don't have these real awareness between the suicides implies that you don't know when you actually need something so you need to load everything ahead of time you're like oh I have only one screen which is like five screens deep that uses Bluetooth doesn't matter you still need to load it out of time which means lower start sometimes well hire sort of times which means lower performances sorry also the JSC a great idea because iOS provides it for free well not really because on Android since that implementation was really tied to javascriptcore you need to bundle it in so your native app also counts with its own lunch box with inside as the JavaScript core and that for example led to a really annoying issue which is that it was bundled and it was a version that was the air bite around 2016 and then for like three years they stayed the same version even if JSC per se evolved and improved that requires some community help to get it back on track and also as I mentioned like there are multiple bounces that you need to have to provide the native UIs and that means the JavaScript again because of the bridge doesn't really have real control over this over the three basically and the Facebook team is not like it's not aware of this program actually they know and everything working on this program and this is why we're going to talk about how they try to solve them all and in particular this is the future because it's still happening it's not there yet but we'll get a bit more into it in a second the key change of the new architecture and the key change from what I just mentioned about the bridge is this new generic interface that the react native team decided to create called the JSI which unsurprisingly means JavaScript interface and basically what this interface allows is to have a direct interface between JavaScript and C++ you may say hey I'm going why C++ aren't we talking about Java or Objective C well yes but what you may well in objective-c is quite easy to see that there is a connection in fact it's like only a super type I think it's called op C so it's quite easy to see the configuration and like the connection between the two in Java what you may not be aware of is that Android actually ready translate all these Java code through the j'ni into C++ so basically you're already doing something that Android knows about and also this is really really interesting because not only it it broadens the platform targets because for example I've written here like three question marks but for example last year I've heard that some React developers were even thinking about you know targeting that Nintendo switch because now you're at the power of C++ in your hands like you can even directly just create some C++ files and use them your rack native app and this is all possible because in the JSI in particular there's this method called ghost object and it allows for shared ownership of whatever objects whatever Shapley you may have and also another easy thing easy thing that this allows is basically to swap the engine and this will sin a bit can create quite a few easy wins for our code base but this is the key change on top of this they've decided to basically work on the architectures in three waves the first wave is the netted modules which you may have heard of as two modules attract native Europe they called them native modules but then yesterday Tomoki know called them turbo modules again so those things is basically the new implementation for the native modules as I mentioned previously the native modules had this weird quirk which is we didn't know what we needed one so we needed to load everything up front now since we have this direct reference we know when we need something we only load the module when we actually need it and this is a massive improvement in in the startup time and also each method of done that module being loaded can be called synchronously so we don't need to wait for callbacks through the JSON bridge and this is really really incredibly good for performances and the next phase which is a similar approach for the native UI is actually called rerender renderer which is fabric which fabric is not the older architecture it's only the UI side but now it's called renderer but again Tomoki no called is fabric so one of those names and basically it's the same core concept of like now we have shared ownership everything knows what's happening and this implies also that the shadow tree is now full C++ because again yoga and it's also owned by both sides this implies one thing in particular which is that now we have opted in synchronous execution because for example you know how when you scroll in a list for example in recognizing one of the easy way of saying how this is not performance performant you just take a nap you just scroll really really fast which is something that your user will do anyway you just crawled really really fast and you will see some blank spots sometimes just for a millisecond but you will see those blank spots and that's because basically the bridge you need to go back and forth between the sides to know what you need to show now you can opt in and say you know this is super super important to have right away so you can have those you will not see anymore those blind blank spots basically and one thing in particular because it was mentioned yesterday in during the keynote presentation at react conf is that this is possible through react concurrent which is something that was basically already announced a while ago but now there are some official documentation that you can read the core concept there is that now react is aware of the concept of prioritization so we will be able to have four different cues we will have synchronous synchronous bundled a synchronous and a synchronous bundled and through those four cues you'll be able to more efficiently show your user the right interface at any given point there's also one thing that I don't want to really have in the slides but it's around the concept of the C++ shadow tree basically if you were here this morning and so another's slides one of the talks that was given during the Amazon internal conference was from sharing and it was about the holistic view the holistic view of Facebook towards the shadow three or something like that and basically I've only heard through rumors but the core idea behind that is that this new shadow tree will be more performant than native UI is potentially which is interesting because it means that at that point react native apps will be even better than pure native apps it's incredibly interesting but again I just keep it within us no one else is watching aside from my mother hi mom but so we can just give you between ourselves and the third phase actually as I mentioned earlier like the bridge is really intertwined with the react native lifecycle so you cannot be removed straight away also because this upgrade process wants to be retro compatible so it's not like at some point you will need to rewrite your all app it will happen gradually you will not probably need to touch too much of your actual code because it's happening below the surface but the bridge will need to stay there for a while so the third phase of the use of architecture which is all about the initialization will be the one where the bridge will actually disappear and not only that like it's so incredible that the JSI can do so many things but it's it's basically like a superpower okay so you know how I said okay JavaScript now can do this it isn't that but one of the super interesting thing that can happen now that since you have C++ code in C++ is strongly typed you're kind of forcing your JavaScript code to be typed and why is that well of course because you need to have these interfaces and since the JSI itself is written in C++ there's no way you cannot write any x' anywhere you're going to be forced to write proper types and in particular once you have your types seams you don't want to write manually the C++ counterpart the Facebook team decided to create a dedicated tool called the cogent and what this coachin tool does is basically creating some interfaces for you and now since they are generated and they're in C++ we basically also can trust the data that are being sent because if you think about it since in the current implementation we have the bridge where all these JSON messages are batched together you also need to kind of check that those you know data are being passed once they reach the other side they're actually the ones that you want but now if you have generated interfaces and there's no human interaction so basically magically you will already have stronger code bases a less crash prone code base in particular about the code gen because maybe some of you are thinking yeah of course it's only going to work with flow not really because roughly the process itself is going to be modular which means that it's gonna have you know it's going to start from you typed JavaScript there's gonna be a power serve that parser will then confront itself with the schema and then generate your interfaces and you can rep you can basically swap the parser like of course Facebook is working on the one for flow but alexei crave worked on an early implementation for the thai script one so you can keep using your typescript and now also i think that basically a lefted project because microsoft is writing like the better version of that and also one interesting thing about this new tool is that since it's a it's literally a CLI you can run you know code gen run or whatever command it is you can find it in the main code base but the idea is that you can use it also to infer how your code has changed lately let's say for example you run that on CI you can automatically tell if that code if that update that you've done that PR that series of PRS is actually an over-the-air update or you need a native release like you could have your CI decide ok this is called possible I can use code bush now for this without having you to manually you know remember if that time you didn't change anything as we code like this can be done automatically now which is super super interesting so here it is this is the new architecture complete hopefully there will not be many more changes from this current shape and let's kind of compare it from the old one well we've removed the bridge which is awesome because it means that now we have nothing moving terrible interoperability we have a faster startup time because again we're not loading up front everything that we may need at any point in the app but we will actually only require it when actually when needed these of course will lead to better memory management also because you don't have you know a bridge called full of jars and messages you've 11 or mostly C++ proper code basically so better memory management again typed code base so let's crush less crashes hopefully also you have the generating interfaces so overall the code will be more stable and this new series of tools will also improve your developer experience that will make you faster and quicker as Amir was mentioning earlier this morning you want to be fast you want to do releases you don't want to care about other things basically I'm pretty sure now you're all quite excited as I am here's the official roadmap you have to think two things before reading the dates here first one is meant to be right or compatible so it's harder basically basically they're trying to make their life harder so that everyone can benefit from it and also this is all happening in the open source repo in the main ones so Facebook / reg native so you can also check the code for yourself it's mostly all of it is already there at least the turbo modules and fabric stuff is JSI is basically already fully available I think I've put the link earlier but basically the JI in particular there's a file which is like the dot H file which is probably like 60% comments and 40% code so if you want to learn more about it I alley suggest you read that the native modules or toubro modules as you prefer should roll out fully completed early 2020 rerender fabric mid 2020 initialization should be late 20 20 they did not really announce any they eat around the Cochin so yeah I am Not sure but surely it will probably happen may 2025 to take a guess because turbo modules and fabric use it anyway or even earlier than that but but it's in the code base anyway so you can start using it if you want and that brings me to the last section of my talk and that didn't work so I'm assuming I have like 10 to 15 minutes something like that thank you but yeah basically as you may be aware we're all gonna die one day so as Professor used to say and what can we do right away what can we do now well first thing first there are some low-hanging fruits which you may already done if not I recommend you take you you know take your time and do all of them first off you know type the code base use flow or tie screed it's fine as I mentioned the collagen will be able to digest both of them anyway take advantage of Metro's configuration like for some reason I couldn't really find the documentation any more about this but like there are two flags in particular that you may have in your method configure JS file one of them is the inline requires and basically if you look to the code in Metro what it means is that it will import an extra babel plug-in and if you look in the code for that babel preset plug-in sorry you will see that basically what it does is that it takes every required that you may have on top of your file and it actually puts it right where is only needed so that's a slight improvement over you know getting all the stuff that you need only when you really need it and the third thing is actually to you know you can do some benchmarking already with a few tools here and there but from reg native 62 in particular you will be able to use the new rack dev tools which is like incredibly so much better and to be honest I think that right now Brian the HVAC is peaking at react conf about it so sorry but like if you you know go back in time in 30 minutes you can watch that in and also there's flipper which is another tool the Facebook team has created for mobile benchmarking again it will be more usable from 62 but there is a blog post by RAM about how to enable it in you know older versions of I think 60 and I all recommend you try to use it because it's really really powerful another low hanging fruit is Armas you may have already heard of it it's basically a new JavaScript engine highly optimized for react native as you can imagine again powered by the JSI and the core idea here is that is super optimizing on how the bundle is generated so if for if for standard you know a JavaScript engine we only do a bundle with Hermes actually it will kind of get in the way of when the bundle is created to pre compile it and that way you're sort of time will be faster because the code itself will be much more efficient itself but it's not something I could do you know for all the engines they've done it with armies it's incredible like if you want to take a look at the articles link there they talking about you know the actual benchmarking and it's really really easy to add to your code base is like a tree line change don't quote me on that but it should be around that and also it will allow you to use cron remote debugging which is really really good because like right now usually what happens is that if you do remote debugging in Chrome it uses the chrome v8 engine which is not the same that will run in your apps and that's sometimes lead to problems another thing to mention is what has been called a lint core project basically this project as taking shape over a year now and the idea is that some components that were in the main code base has been moved out so that they could be first off more easily maintained also removed from the main you know bundles so that if you're not using them they will not be you know that code in your bundle there are already 25 repositories like twenty-five components I started I'm pretty sure they're not done completely but yeah this is really cool and interesting project I highly recommend like if you haven't done the migration yet so the new version of the components you may be already using I recommend you do it because the new version learn actually so much better anyway like for the webview I don't know if you you know move to the new one I think you should because there's like a yellow box that will appear if you don't so you should do it but yeah the link core is something where the community is being really really involved and talking about the community again you may already know any sort of mention is how the community has always been part of the development of react native in particular there's this repository which is a discussion and proposals which is where most of these ideas are being disgusted and commented and like the link or started there and basically it's also the place where in collaboration with the Facebook team like we have come up with a series of ideas and strategies and also tools like Bob or the circle say orb that are basically trying to make all the repositories and all our code bases if you want to you know use them more you know consistent more stable and also like right now we have this project called tester which is been tackled by Bartle core so I think it's right name is which basically is trying to get a tester inside every single repo so that it will test the code automatically against the main repo so that you will see out of time when something changes and breaks because that's another you know issue that you may have had in the past like the upgrades you mentioned earlier this morning like the tester shootout with that for example and also like the community is behind some of the massive improvements that we had lately like the parade helper which is a web app where you can see all the changes that you need to do and now to linking and if you're not using your act 68 or 61 highly recommend you upgrade because also linking is so good air moves so much stress from you know adding a new package it's so more reliable it's incredible but also the community likes to experiment so in particular about the new architecture there is a dedicated discussion about fabric one about euro modules and in both of those you will see React developers trying to use them already so if you want to test them out you can go through the comments try you know think of your apps against their comments and see what happens well again highly experimental try only if you want to have some you know legit fun and or multiple crushes that will make your life miserable now aside from those I also wanted to give a shout out to you know to Kudo for doing an awesome work about benchmarking all the different engines because again through the JSI we can now use any kind of engine and you'd be surprised by the results like in this raffle he explains how he benchmarked there are there's a Google sheet with all the graphics you can see and I think that v8 surprisingly wins out of everything it's incredible but like look into that if you were you know the kind of engine nerd the last thing I'm going to mention which is only about the GSI it's basically a wrap on that has also to medium post attached to it from Eric and Kristen they've been trying to work to make a simple project using the GSI without relying on anything else so if you wanna try for yourself the JSI you can try that repository look at how the code has changed through the commits also the community or master on the trapper are only for the iOS version but there's a poor request for the Android version so you have both sides of the test implementation there anyway closing up as I mentioned changed is good and if we had to you know do emojis about this change basically this is what would happen but you know using actual words the JSI I hope that I convinced is probably the single most important new concept that has arrived in r ag- is the keystone of everything that you see happening the main code base for the next year at least and you know both of these three phases will happen during 2020 they will massively improve our apps and hopefully you would not have to even change your code for it but at the same time you shouldn't just sit around and wait and see what happens you can be active participant in this process through link or through everything else I mentioned earlier and I really hope I'll see you more around I'll see you be more active and try things out thank you for listening it's been lovely seeing you the year and as here in the other stage later thank you

Channel: React Conferences by GitNation

Views: 7,374

Keywords: react day berlin, javascript, software development, react.js talk, javascript conference, react, react professional, react native development, react advanced, london, open source, conference, react conference, software, engineer, frontend, programmer, reactjs, web apps, gitnation, javascript event, react talk, react summit, javascript framework, development, react.js event, javascript technology, react event, react development, javascript talk, react.js conference

Id: 7gm0owyO8HU

Length: 32min 17sec (1937 seconds)

Published: Tue Nov 05 2019