Original subtitles

All right, everybody, it's time to really geek out and learn about the react native internals now,

I think this is really, really important.

Oftentimes when we learn a new tool, it all seems like magic underneath the hood.

And you don't really understand what's going on.

You code along, you follow the examples.

But how it actually works is hard to understand.

So in order for us to really become react native experts and also for you to be able to go off after

this course and build your own Riak native apps, I really think it's important for us to understand

how it works underneath the hood.

And I know we're all getting excited to code, but this is really, really important.

Once you learn it, then you know it and there's no more magic.

So let's talk about that.

We've learned that we have our react native library or framework that gives us components and gives

us API to work with both Android and iOS phones.

We also use the REACT Library to be able to render those views, to display those views on mobile.

But there's a few other things that I want to talk about.

Throughout the course, we're going to be writing this react native code into JavaScript files, different

components, but what happens when we actually run things on our phone?

Well, I want you to think of it as two parts, one is the view layer now that doesn't mean is just

always react, but there's always those native views that we talked about, those views that get converted

from something we wrote in react native to a native view so that it's really, really performant.

Things like view and text and text input are all things that we can use.

We can write and react native and then gets compiled down to native code.

The second part of our code is the logic, right?

We have the views, but then there's different logic that happens, such as when a user clicks on a

text input, when a user uploads an image or takes a photo, what happens?

There's also a logic with our code.

So we have views and logic that goes along with that, which is obviously written in JavaScript.

So the first step is that Riak native compiles our views into native views, which is really, really

performant.

It's what makes Riak native better than hybrid apps like Córdova or Ionic.

But then the second part is that it needs to understand this JavaScript logic on the phone.

Remember that the phone understands Objective C, Swift, Java or codling, but doesn't really have

a concept of JavaScript.

You see, in order for react native to work, it needs something called a JavaScript, VM or virtual

machine.

This virtual machine has a JavaScript engine that allows it to understand this logic that we write this

JavaScript code.

So most of the time, this VM is called JavaScript core.

It's a JavaScript engine that actually powers the Safari browser.

So with Riak native, the JavaScript core engine is used to read this logic and then this JavaScript

virtual machine communicates with the phone with the native platform in API to tell it what to do,

what actions to perform.

So when we ship react native code to a phone, we are essentially shipping this entire part.

That is, we compile our views into native views.

So that's really, really performant.

But then we have this piece over here that is surprising to a lot of people that we actually ship JavaScript

code with a JavaScript VM that can understand it in a way for us to communicate back and forth, back

and forth with the phone, telling it, hey, do this, hey, do that.

I want to dive a little bit deeper into that blue part that we ship.

So remember, we have our job script file.

We have our JavaScript core, which is the JavaScript, VM or virtual machine that is able to communicate

with the phone and remember that the phone only understands Objective C or Swift or Java or Colin.

So what happens is we have the native platform API that the developers and Apple and developers at Google

have created for their own operating systems and then react native has this thing called React Native

Bridge in this react native bridge is written in C++ and Java to communicate.

So if in our JavaScript file we say, hey, do this because the user just press this button, then this

reac native bridge is going to say, oh, in JavaScript, this person said, do this, then it's going

to talk to the native platform and say, hey, the user wants to perform this.

So this idea of a bridge is actually a very common pattern in programming.

It's called the Message Broecker pattern.

And it's a way for us to communicate when we're using two different languages.

For example, if we want to communicate between, I don't know, Python and JavaScript, we would use

the message Broecker pattern in this case, our JavaScript or the JavaScript thread uses JSON a format

to message this react native ridge.

And then this bridge translates whatever that action is into.

Again, another format that translates to the native thread of the phone.

So, again, if we review, we have the views which get compiled into native views, so the phone receives

the exact native code, so it's super super performant, but it also receives this JavaScript virtual

machine and the react native bridge to communicate with the phone as the user is using the app.

Now, looking at this, you might notice a clear downside to react native.

That is, no matter what, it's never going to be as performant as native development.

Right, because it has to ship this virtual machine and the bridge in order to communicate with the

phone.

So when we start to react native application, it first creates the main thread that is the native thread

of the phone, whether it's iOS or Android, and as soon as the application launches, it loads the

app and also starts the JavaScript thread because the instructions say, hey, because this is a Riak

native app, we also need to read JavaScript.

So it creates a JavaScript thread to execute this JavaScript code.

So when a user, lets say, touches the text input or wants to do something to interact with the app,

the main thread of the phone that is Android or iOS says, oh, something happened, an event happen

and it tells through the bridge, the JavaScript, hey, JavaScript, somebody just touched this app

right over here.

What should I do?

And the JavaScript says, well, because Temmy over here, press this button.

Display this.

So the instructions and communication happens back and forth, back and forth on the phone between the

main thread and the JavaScript threat.

So the JavaScript thread runs all our business logic inside with React Native.

How cool is that?

I think this is really, really interesting because now we understand how react native apps work, but

also a clear downside that we're going to have to ship this and it's going to take a little bit longer

performance wise, because this communication has to constantly happen between the JavaScript world

and the native platform world.

But there's many ways around it for us to still have that performance.

So let's talk about that in the next video.