Building React Native: Take a look at the internals - Parashuram N

my name is parshuram and it's probably easier if you call me Rahm and I work at Facebook as a user interface engineer a user interface engineer is pretty much a web developer and I've been doing web development for a long time I didn't really learn web development at college I was mostly learning it through teaching myself from the internet and one of my biggest ways of learning web development has pretty much been looking at the source of interesting webpages and trying to basically copy paste all the code also back in the day when I was learning web development there were many debugging tools that was super helpful and one of my favorite ways of debugging web was basically this I'm sure a lot of you can relate to how like this is how you debug web in fact even today the fact that you have so many packagers and so many minifiers and so many transformers this is probably the foolproof method of debugging or trying to understand what's actually going on in your web application a few years ago I started picking up react native and it's not a surprise that when I did react native my react native debugging also involved a ton of console dot logs as the reason why I'm telling you this is because my talk is sort of based on this I am primarily a web developer with a lot of JavaScript experience and in this talk I'm going to be telling you my story of how I learned react native and then started to poke around and try to learn the internals of react native in this talk we look at what's coming up with react native and how all of it fits together so this is typically what my development story is and like any story this need needs needs to start up like in a regular day and then get into suspense at stuff right so on a regular day I was writing code and this is what my browser looked like I had a billion tabs open and I knew that if I open one more tab my computer is probably going to catch on fire so I did something that a lot of React developers don't do I got a little bit brave and I open this program called Safari now for people who don't remember what Safari is it's actually a computer program that's bundled with your new Mac machines and you open it the first time you want to download Chrome so I I was brave I opened up Safari and I started using Safari for debugging my react native applications and I wanted to put it up a value of a certain variable so of course I turned back to my favorite console dot log and this is where the suspense part of the story comes in I was almost gonna finish typing when my boss tapped me on the shoulder and I suddenly looked back there was coffee on my table and I sprayed the coffee now I knew how reliable my max butterfly keyboard is so I didn't want to ruin my keyboard and I started wiping and accidentally hit the enter key and what I noticed was this or like wait is react native changing my trusty console dot log that sounds weird now this is not how it works on the web right in fact on the web if I was to open my console and say console dot log I would see something like this I always thought that console dot log was a native function so what was react native really doing and this is where the twist in the story comes in I got curious and I wanted to understand what is happening so at this point when I was rehearsing my talk I thought maybe I should just quit my slides and try to show you a live demo but I mean you know how lies a live demos work right I probably gonna come on stage and then try to open up and then I Internet is not gonna work so rather than pain myself going through and trying to like kill time with Internet and show you how horrible I am with this game I just thought okay let me not do a live demo let me instead record all of this and play play it back to you so that's what I'm going to be doing so the goal here is we want to understand what console dot log is doing and that's how the whole journey started so console dot log let's go to github and look for console dot log so there are two files here the first file is something related to flow I'm not good at flow or type system so I'm just gonna kind of gonna ignore it and the second part is actually a polyfill that seems like a good enough candidate to start investigating so I started my investigation trying to understand what console dot log does and if you open this file it's a little bit small so they make let me make it bigger okay there you go and this looks like a really big file so let me try to understand in this file where does the native implementation exist I'm at this point because I'm on stage I want to just take a wild guess and try to see where does a bad as that specific statement exists so let's say we look at line number 392 it's a wild guess and lo there it is so that's the function that console dot log is actually using to implement it and show you show you react native logs on like your console or on your android log cat and stuff like that so this function does a whole bunch of things but what we are interested in is this specific call this is a call to this function called global dot native logging hokum now I'm pretty sure that native login who doesn't exist in the browser if you don't trust me let's check that out there is no window or native logging and of course global doesn't exist in browser as far as I know yeah there you go so what exactly is native login hook this Cartman curious and to dig further I started thinking hey maybe this is something that react native itself implements so let's go and look at where native logging books exist it exists in react native and there's this two files the first one being a poly the first one being a law a debug logger the second one is where we were looking at but there's a third file and the only other occurrence of native logging hook is in the C++ file let's actually look at it and see what it does so here's the function and as we expected there are two places where the string is defined and there is something that has to do with like logging and the C++ file now as I told you I'm a web developer I don't understand C++ much so if in the ideal world what I should have done is opened up a new tab gone to Amazon downloaded a C++ book and then learn C++ and come back but you know that's not how real life works interestingly I searched for C++ and these are the kind of results I get so clearly getting started with C++ is not simple it's about a torino and processing VM blah blah blah so I started looking at it that did work out and Amazon being Amazon I got distracted I started shopping for toys for my kids and two hours later I came back to this function and the function hasn't made itself easy any easier it's just as complicated as it was hmm I don't know what this means so maybe I should do what I have always been doing pretend like I know this code and try to figure out where it's being used so let's do that and let's see where the code where the function buying native logger is used so I continue down the journey of investigation and I started looking at where exactly is buying native logger used and surprisingly it's actually used in two places the first one is where where we already saw and then there is this iOS and an Android implementation so that seems like the right path I man so just to recap here what I'm trying to do is I'm trying to figure out how the hell is console dot log working and it looks like there is some native implementation so let's look at the first file and look at how it's being used in the first file so digging into it what I see is it is indeed defined in this file and it takes in an argument called iOS logging binder so that's an iOS specific locking implementation so that makes it even more interesting because effectively I've called console dot log from JavaScript and for some reason what's happening is this goes through multiple steps and eventually reaches a dot mm file or an objective-c file inside you object fiac file I can see that the function is clearly defined and it is actually this function that is being called when my logging happens now don't worry about all the paths don't worry about all the code the pond line point I'm trying to make is this what just happened was there was console dot log which somehow went a bunch of methods deep eventually came to this file called RCT log dot mmm and called an objective-c function now I know that contrast is in code so let me change the contrast a little bit okay this is a little bit better and this has been happening okay like this is not entirely true what actually happened was more like this but let's just pretend that that whole big circle is C++ so in a way JavaScript was invoking a native module or I need a function isn't that what native modules are supposed to look like you know camera if you have to access the camera and take picture aren't you like don't you write like native modules into our CT export and all that functionality right yes right I mean that's how NATO models are but this doesn't seem to use anything related to NATO modules in fact it doesn't even go through the bridge does it it doesn't there is no s interest cause it's actually one call over the other over the other and eventually to the Android so there's no bridge there is no serialization nothing of that sort so what exactly is this this is what got me curious and I looked at I was wondering okay let me maybe look at what this does and I opened up Chrome again and looked at how all this code was and surprisingly this file called our city a log dot mmm is almost four years old things haven't changed and I was like wait is the react native hitting me like did they always have this idea of calling native functions without having to go through native modules like is this is this some secret that reactant has hidden I mean why am I writing going through the trouble of writing all of these native modules and stuff when there's another secret way of calling that calling like into native code or but if there's a secret way of calling from JavaScript or Objective C the answer is a little more complicated turns out and of course it also turns out that ignoring that C++ class was not a great idea so I went and because I'm at the web dev the last time I did C++ was like a billion years ago so I have no idea what all this means so I went to the reactant ate the other JavaScript engineers on the reactant team who know C++ and asked them to explain to me this function now before I continue how many of you here understand or know C++ okay so let's take this slowly let me guarantee that this is not scary it looks scary but it is not so let's take it one line at a time what this function does is there is a function defined called bind native logger if you remember that's what we were searching for right there's this function and what it does is it sets a global property on the JavaScript runtime let me repeat that what it does is there's a JavaScript runtime and on the JavaScript runtime it sets a global property the name of the property is native login what that means is in JavaScript if I say global dot native login book it is this function that gets invoked and what is that function do that function is a name JavaScript function which takes two arguments and effectively takes in the first argument is the message the second argument is the log level and then it logs or it calls a objective-c function and dust the translation for you and prints the login and finally of course consolidate log doesn't return anything it returns an undefined value now don't bother too much if you didn't understand the code I think it's more important to understand the intent of the code a good example is if you go ask your local amsterdam friend what the best bars in amsterdam are he's probably going to tell you how to get to the bar and about the best world because i've heard that people in Amsterdam are really proud of their city most of us just take back hey what the best parts are like what the end goal is just think of the end goal don't look at don't if you eat okay if you don't understand the code so this is what happens and this was something new this is what is called JSI or JavaScript interface JavaScript interface is this new and standardized way to expose native objects like expose Java objects or objective-c objects from your native modules to the JavaScript world effectively what happens is we had just to summarize we had global dot native for login work which eventually was which was called by console dot log and this eventually calls in an objective-c plasma object C functions from JavaScript to Objective C now that we know something like this exists how about we extend this idea not just to console dot log but to all of our native or modules like let's say if we have a camera module well let's say we have a sample module how about we have a sample module and a function called add one which is implemented on the objective-c side or let's for example take Java for Java just for just for a change so what if it's implemented like this in Java effectively it's a it's a single Java class it it takes in a single function the function is called add one it takes in an argument which is a number and then returns a number by adding 1 to it that's what it is now if we had to write this in a similar fashion they console dot log what would that look like well if you're gonna have different files one in J's one in Java and then let's expand this GSI box of course if you remember like last time we have to set a property on global right I mean console was set on the global so let's set a property on global and in this case let's set that property to not be a function but to be a class because obviously you don't want sample module to be a function sample module should be like a class and that should have a function called add one so let's set a sample module and what a sample what you look like a sample module needs to inherit from this special JSI object called a host object now the interesting thing about the host object is host object effectively says hey though I have written in C++ I'm going to be exposed to JavaScript and it needs to implement pretty or it needs to implement executed called the get get method and this Gator is very similar to a JavaScript Gator you know when you say sample module dot add one if you had a JavaScript Gator that JavaScript Gator gets executed right this is pretty much similar to that what that does is it you get the method name or you get the property on which you're accessing it and then if you say hey if I'm trying to access add one we will return a function that calls Javas J and I know I think I've written more than 240 characters of C++ for one day so I'm not going to write anymore C plus this code but the read comment there basically says that's the place where you connect your JavaScript to your Java or to your Objective C code so effectively what you have done right now is we've taken statement in JavaScript converted it and plugged it in or wired it in all the way to Java well this my friends is pretty much what is called turbo modules in fact you can actually generalize this for example instead of setting it setting a global variable for every single native module you can just set a getter and instead of having to set say for example a property every time you can make it generic enough this whole process of making this call generic that what is called turbo modules and then you see the c-plus news at the top you don't have to write this app by hand every single time the pattern is very similar so if you have a native module one versus the native module two we just have to list out all the methods that is has and then write the implementation so all of this can actually be code generated and that is the other part of the new architecture of reactor which is called code gen so effectively what you have is you'll generate a file called sample module dot CPP which links sample module digests sample module dot Java in a nutshell this is how the new turbo module system works also there are some questions that a lot of React engineers ask for example what about existing JavaScript code with this new system if you noticed most of the changes were actually in native code right so existing JavaScript would not have to change as much similarly if you are writing new in the view managers or if you are writing later modules you just have to write the simplest as layer so you can always come back with a backward compatibility layer and I'm actually hoping that someone in the community is able to write that similarly if you notice the code gene that I showed you the code is code gene happens why are the flow types type definitions that I had so you know in flow I said hey my object is called sample one and it has these ten methods it happens through flow by default for us right now but there's no reason to use slow we actually have a system where flow generates Jason and that Jason can generate C++ so if you're using typescript offic or if you are not using any type system you don't have to use the same code change system you can actually write your own as long as your methods and your objects shape is defined in some sort of jason and this is actually even better because with a JSON structure like this with such good type safety you will actually be able to transfer all your type safe information from native code to your javascript code so you know if you do code push for example you might end up in a state where JavaScript calls a method that the native code may not have the system that actually can be taken care of what about C++ modules a lot of people don't know this but react native actually lets you write more native modules not just an object of C and Java but also in C++ in fact this system is even better for C for C++ because now you don't have to go through the Java layer at all what about performance like is are we doing all of this per performance the answer is sort of yes and no I mean if you remember we used to have a bridge the bridge used to be asynchronous and hence it used to be non-blocking and as a result it was super simple to like call and no one was waiting for methods right what about that like where does all of that go so the good thing here is if it's if it's a synchronous converting it to symptom this is hard you have to write your own custom logic to block it and stuff on the other hand in this case the calls are synchronous which means Java or Objective C can now return a promise and it will be up to the native module to decide whether response will return immediately or whether it wants to be returned later and in fact in this case utilization is easy because what you get is you get a return back to a C++ pointer with or with methods on it you don't have to worry about utilizing it D slicing it you can just call methods on it it's as if you just had a JavaScript object that you got back and then finally the biggest question of it all can I use it today but the reality is most of this code actually exists in open source it's not super compiler but right now but if you're curious to understand what actually happens and in fact if you are actually interested in contributing back look at this folder called react common slash turbo module slash core that's actually a pretty good place to get started trying to get your head around how does this new system look like okay so that's that's what the system is but then again the third question does it have to stop at sample at native modules not really why can't this be a view that is written in native and why can't this whole system work with views turns out it can it's just like a lid there's a little bit more nuance to it so I'm going to go into details of how the whole view system and the UI system works today and then talk about how it can be converted to the new system so today what happens is when you start a react native application you you have this class called app registry you say a precious trade or register application right what happens is when your app starts up your app registry calls a function that you registered it eventually starts like which ability eventually calls a JavaScript function called upon application which then calls your native components and then does the rendering and all of that and this eventually talks this react talks to the UI manager and whenever someone says react reconciler right this is where the reacting conciliation happens and water react talks to the UI manager has things like hey go create a view for pee or go up and the child you know the tree diffing stuff that's what this happens turns out there's all of these functions can actually be Jews can actually use the si they don't really have to go through the bridge which also means all of this can be synchronous what that means is all of the operations that you have regarding like creating a shadow node or creating a view or adding it to the view that can actually be synchronous in fact this is called fabric fabric is the new architecture or is the new UI system in react native and if you want to look at fabric we can open up chrome again and this is what fabric looks like and this is the Java so what you see is all of these commands here and all of these commands are just the SA commands exposed to JavaScript so in the future react it doesn't have to go through the bridge call the UI manager and create new stuff all it needs to is directly call these functions as if they were exposed to JavaScript right away this is even better for performance for example let's say let's take this property called set native props a lot of us use this for animations right now the problem with animation B says animation is slower because it's asynchronous and stuff what if set native crops was actually a direct function call in that case what happen effectively is all of this will be called immediately which will make our animations much faster in fact you can have the exact same code gen system and every new you manager that you have can be code generated with the properties with the props that the view manages exposes in the new system what that would look like is at the top there you'd basically get the app menu off after GC module you will get the run application and then you just call it that you will call it as if you are calling a JavaScript function and this would again be synchronous so what does this all mean fabric basically enables this idea of a react surface the idea basically is today the render function is asynchronous today what happens is when you start up react native and you call render it does it stuff it opens up the function then asynchronously starts adding views to it it doesn't have to be that this can be synchronous what this will also enable is on things like recyclerview or UI collection where you want to render items synchronously this is going to make that possible it will also help animations a lot because now remember that you'll be in a world where if your animation is actually defined in javascript native interpolators can call into javascript through this method that i showed you and that way J's can also call back into native to to things like cancellation and stuff so you may not have to worry about declarative declaratively telling react native what your animations are so to summarize i know this was a little this is this a lot of code so to summarize here's what we saw in this talk we spoke about JavaScript interface which is a way for JavaScript to communicate with native more with native code native Java or Objective C code we spoke about fabric fabric is the new user in UI manager or UI layer in react native we spoke about thermo modules turbo modules is the new way of calling native modules in react native and finally we have all of this type together using Cochin and whenever someone says the new architecture of react native this is probably what they are talking about there's some more resources about what these are the first one is a talk at react conference about the new architecture in this talk I mostly spoke about how things are done I showed you code and talked about like hey this is how the end to end calls happen but if you have curious about why about why do we need this entire system why do we need this whole new system I would highly recommend going and taking a look at the reactant native area conference video about the reacted of new architecture similarly a lot of code gene is already starting to work and we definitely need community health there so I would recommend Eli's react native code gen deep dive this is mostly an internal target react that Eli gave to Rick and then we decided that because it's gonna be useful for the community also we recorded it and published it so this is actually something that is also super useful also be useful to look at and finally if you want to follow along and try to understand where we are at with all of these things there's a repository on github called an organization on github called react Native community in there there is a repository called discussions and proposals going to the issues and inside the issues these are the four issues that you may want to follow on these issues we have like regular updates we have we answer questions from the community coming people in the community are actually starting to help in fact I think recently Eric Lewis helped us helped us compile fabric for iOS fabric on the iOS system so we actually need help from community bringing all of this to the community and if you're interested in using it it's such a pretty good place to start again my name is partial ROM this is my twitter handle hit me up with any questions I'll be more than happy to help you folks grow up this entire system but that's all I had for my talk thanks for being such a good audience you

Channel: React Conferences by GitNation

Views: 4,558

Keywords: react conference, react.js event, javascript technology, kent c dodds, software development, react development, react native, conference, dan abramov, ken wheeler, react, react day berlin, react professional, react native development, javascript conference, react summit, react amsterdam, gitnation, javascript, javascript talk, web apps, reactjs, javascript event, react talk, javascript framework, react.js conference, react advanced, react event, react.js talk, open source

Id: 5sQw8C36Xa4

Length: 25min 39sec (1539 seconds)

Published: Wed Apr 24 2019