Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,300 --> 00:00:07,820
All right, everybody, it's time to really geek out and learn about the react native internals now,
2
00:00:08,220 --> 00:00:10,380
I think this is really, really important.
3
00:00:10,530 --> 00:00:15,540
Oftentimes when we learn a new tool, it all seems like magic underneath the hood.
4
00:00:15,750 --> 00:00:18,240
And you don't really understand what's going on.
5
00:00:18,360 --> 00:00:20,490
You code along, you follow the examples.
6
00:00:20,580 --> 00:00:25,060
But how it actually works is hard to understand.
7
00:00:25,590 --> 00:00:33,090
So in order for us to really become react native experts and also for you to be able to go off after
8
00:00:33,090 --> 00:00:39,210
this course and build your own Riak native apps, I really think it's important for us to understand
9
00:00:39,210 --> 00:00:41,190
how it works underneath the hood.
10
00:00:41,430 --> 00:00:45,810
And I know we're all getting excited to code, but this is really, really important.
11
00:00:46,050 --> 00:00:49,590
Once you learn it, then you know it and there's no more magic.
12
00:00:49,920 --> 00:00:51,420
So let's talk about that.
13
00:00:52,450 --> 00:00:59,890
We've learned that we have our react native library or framework that gives us components and gives
14
00:00:59,890 --> 00:01:04,880
us API to work with both Android and iOS phones.
15
00:01:05,350 --> 00:01:12,750
We also use the REACT Library to be able to render those views, to display those views on mobile.
16
00:01:13,420 --> 00:01:15,660
But there's a few other things that I want to talk about.
17
00:01:16,610 --> 00:01:22,670
Throughout the course, we're going to be writing this react native code into JavaScript files, different
18
00:01:22,670 --> 00:01:27,400
components, but what happens when we actually run things on our phone?
19
00:01:28,310 --> 00:01:35,840
Well, I want you to think of it as two parts, one is the view layer now that doesn't mean is just
20
00:01:35,840 --> 00:01:44,360
always react, but there's always those native views that we talked about, those views that get converted
21
00:01:44,360 --> 00:01:51,620
from something we wrote in react native to a native view so that it's really, really performant.
22
00:01:51,860 --> 00:01:56,390
Things like view and text and text input are all things that we can use.
23
00:01:56,390 --> 00:02:00,780
We can write and react native and then gets compiled down to native code.
24
00:02:01,400 --> 00:02:05,000
The second part of our code is the logic, right?
25
00:02:05,270 --> 00:02:11,690
We have the views, but then there's different logic that happens, such as when a user clicks on a
26
00:02:11,690 --> 00:02:17,470
text input, when a user uploads an image or takes a photo, what happens?
27
00:02:17,960 --> 00:02:19,880
There's also a logic with our code.
28
00:02:19,880 --> 00:02:26,110
So we have views and logic that goes along with that, which is obviously written in JavaScript.
29
00:02:26,720 --> 00:02:37,400
So the first step is that Riak native compiles our views into native views, which is really, really
30
00:02:37,400 --> 00:02:38,060
performant.
31
00:02:38,210 --> 00:02:42,980
It's what makes Riak native better than hybrid apps like Córdova or Ionic.
32
00:02:43,490 --> 00:02:50,540
But then the second part is that it needs to understand this JavaScript logic on the phone.
33
00:02:51,130 --> 00:02:56,990
Remember that the phone understands Objective C, Swift, Java or codling, but doesn't really have
34
00:02:56,990 --> 00:02:58,820
a concept of JavaScript.
35
00:02:59,830 --> 00:03:05,530
You see, in order for react native to work, it needs something called a JavaScript, VM or virtual
36
00:03:05,530 --> 00:03:05,960
machine.
37
00:03:06,580 --> 00:03:15,190
This virtual machine has a JavaScript engine that allows it to understand this logic that we write this
38
00:03:15,190 --> 00:03:16,120
JavaScript code.
39
00:03:16,840 --> 00:03:22,000
So most of the time, this VM is called JavaScript core.
40
00:03:22,630 --> 00:03:26,270
It's a JavaScript engine that actually powers the Safari browser.
41
00:03:27,040 --> 00:03:37,660
So with Riak native, the JavaScript core engine is used to read this logic and then this JavaScript
42
00:03:37,660 --> 00:03:45,850
virtual machine communicates with the phone with the native platform in API to tell it what to do,
43
00:03:46,090 --> 00:03:47,710
what actions to perform.
44
00:03:48,550 --> 00:03:56,620
So when we ship react native code to a phone, we are essentially shipping this entire part.
45
00:03:57,310 --> 00:04:01,840
That is, we compile our views into native views.
46
00:04:01,900 --> 00:04:04,000
So that's really, really performant.
47
00:04:04,180 --> 00:04:12,250
But then we have this piece over here that is surprising to a lot of people that we actually ship JavaScript
48
00:04:12,250 --> 00:04:18,760
code with a JavaScript VM that can understand it in a way for us to communicate back and forth, back
49
00:04:18,760 --> 00:04:22,240
and forth with the phone, telling it, hey, do this, hey, do that.
50
00:04:22,990 --> 00:04:26,990
I want to dive a little bit deeper into that blue part that we ship.
51
00:04:27,400 --> 00:04:29,590
So remember, we have our job script file.
52
00:04:31,280 --> 00:04:39,530
We have our JavaScript core, which is the JavaScript, VM or virtual machine that is able to communicate
53
00:04:39,950 --> 00:04:46,970
with the phone and remember that the phone only understands Objective C or Swift or Java or Colin.
54
00:04:47,840 --> 00:04:56,240
So what happens is we have the native platform API that the developers and Apple and developers at Google
55
00:04:56,240 --> 00:05:03,200
have created for their own operating systems and then react native has this thing called React Native
56
00:05:03,200 --> 00:05:12,090
Bridge in this react native bridge is written in C++ and Java to communicate.
57
00:05:12,230 --> 00:05:19,400
So if in our JavaScript file we say, hey, do this because the user just press this button, then this
58
00:05:19,400 --> 00:05:26,960
reac native bridge is going to say, oh, in JavaScript, this person said, do this, then it's going
59
00:05:26,960 --> 00:05:33,130
to talk to the native platform and say, hey, the user wants to perform this.
60
00:05:33,680 --> 00:05:38,570
So this idea of a bridge is actually a very common pattern in programming.
61
00:05:38,570 --> 00:05:41,360
It's called the Message Broecker pattern.
62
00:05:41,600 --> 00:05:46,340
And it's a way for us to communicate when we're using two different languages.
63
00:05:46,340 --> 00:05:52,970
For example, if we want to communicate between, I don't know, Python and JavaScript, we would use
64
00:05:52,970 --> 00:06:01,430
the message Broecker pattern in this case, our JavaScript or the JavaScript thread uses JSON a format
65
00:06:01,430 --> 00:06:05,360
to message this react native ridge.
66
00:06:05,360 --> 00:06:10,700
And then this bridge translates whatever that action is into.
67
00:06:10,730 --> 00:06:16,970
Again, another format that translates to the native thread of the phone.
68
00:06:18,170 --> 00:06:27,560
So, again, if we review, we have the views which get compiled into native views, so the phone receives
69
00:06:27,560 --> 00:06:34,760
the exact native code, so it's super super performant, but it also receives this JavaScript virtual
70
00:06:34,760 --> 00:06:43,050
machine and the react native bridge to communicate with the phone as the user is using the app.
71
00:06:43,490 --> 00:06:48,350
Now, looking at this, you might notice a clear downside to react native.
72
00:06:48,590 --> 00:06:54,500
That is, no matter what, it's never going to be as performant as native development.
73
00:06:54,500 --> 00:07:02,960
Right, because it has to ship this virtual machine and the bridge in order to communicate with the
74
00:07:02,960 --> 00:07:03,320
phone.
75
00:07:04,250 --> 00:07:11,660
So when we start to react native application, it first creates the main thread that is the native thread
76
00:07:11,660 --> 00:07:18,530
of the phone, whether it's iOS or Android, and as soon as the application launches, it loads the
77
00:07:18,530 --> 00:07:25,940
app and also starts the JavaScript thread because the instructions say, hey, because this is a Riak
78
00:07:25,940 --> 00:07:28,210
native app, we also need to read JavaScript.
79
00:07:28,220 --> 00:07:32,850
So it creates a JavaScript thread to execute this JavaScript code.
80
00:07:33,560 --> 00:07:41,120
So when a user, lets say, touches the text input or wants to do something to interact with the app,
81
00:07:41,630 --> 00:07:49,610
the main thread of the phone that is Android or iOS says, oh, something happened, an event happen
82
00:07:49,910 --> 00:07:57,020
and it tells through the bridge, the JavaScript, hey, JavaScript, somebody just touched this app
83
00:07:57,020 --> 00:07:57,850
right over here.
84
00:07:57,890 --> 00:07:58,670
What should I do?
85
00:07:59,330 --> 00:08:03,920
And the JavaScript says, well, because Temmy over here, press this button.
86
00:08:04,160 --> 00:08:05,390
Display this.
87
00:08:06,360 --> 00:08:13,050
So the instructions and communication happens back and forth, back and forth on the phone between the
88
00:08:13,050 --> 00:08:15,960
main thread and the JavaScript threat.
89
00:08:16,920 --> 00:08:22,800
So the JavaScript thread runs all our business logic inside with React Native.
90
00:08:23,700 --> 00:08:25,900
How cool is that?
91
00:08:26,490 --> 00:08:33,150
I think this is really, really interesting because now we understand how react native apps work, but
92
00:08:33,150 --> 00:08:38,940
also a clear downside that we're going to have to ship this and it's going to take a little bit longer
93
00:08:38,940 --> 00:08:44,460
performance wise, because this communication has to constantly happen between the JavaScript world
94
00:08:44,640 --> 00:08:47,220
and the native platform world.
95
00:08:47,670 --> 00:08:51,870
But there's many ways around it for us to still have that performance.
96
00:08:52,110 --> 00:08:54,150
So let's talk about that in the next video.
10643
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.