1
00:00:01,000 --> 00:00:05,530
We've now seen a lot of different options for transpiring and bundling, and these options include either

2
00:00:05,530 --> 00:00:09,580
setting up that remote API or just doing everything locally inside the browser.

3
00:00:10,000 --> 00:00:13,450
So I put together a little list here of kind of pros and cons of each approach.

4
00:00:13,930 --> 00:00:18,790
So if we go with this kind of remote approach of sending out setting up some outside public API, the

5
00:00:18,790 --> 00:00:24,130
upsides there are that we can very easily download NPM modules and cache them on that API server.

6
00:00:24,130 --> 00:00:28,300
And that means that in theory we could bundle code for all of our different users much more quickly.

7
00:00:29,080 --> 00:00:34,420
The other big benefit to this is that because our server is responsible for transport and bundling,

8
00:00:34,720 --> 00:00:40,240
any user who is on a slow device or has a limited Internet connection, we'll be able to run our application

9
00:00:40,240 --> 00:00:42,980
much more quickly whenever you download dependencies.

10
00:00:43,000 --> 00:00:44,650
That's a lot of bandwidth being used.

11
00:00:44,920 --> 00:00:49,210
So if we can make sure that our users don't have to download a ton of source code in order to do this

12
00:00:49,210 --> 00:00:53,770
bundling or transpiring, well, it would definitely be a net benefit for them, even though they do

13
00:00:53,770 --> 00:00:56,080
have to make an extra request to this API.

14
00:00:57,440 --> 00:01:03,170
Now, on the local aspect, if we implement the trans in the bundler inside the reactor application,

15
00:01:03,380 --> 00:01:05,260
there's some definite upsides there as well.

16
00:01:07,130 --> 00:01:12,830
So if we got the local approach, we're definitely going to possibly have faster execution of code because

17
00:01:12,830 --> 00:01:18,590
we no longer have to rely upon making a request to our API server, just getting our code over to that

18
00:01:18,590 --> 00:01:21,320
API server could take some number of milliseconds.

19
00:01:21,680 --> 00:01:22,760
That's just additional time.

20
00:01:22,760 --> 00:01:23,360
We have to wait.

21
00:01:24,110 --> 00:01:28,840
The other benefit is that in this style, we don't have to create this outside observer at all.

22
00:01:29,030 --> 00:01:33,380
We don't have to make this outside bundler or worry about deploying it or maintaining it or anything

23
00:01:33,440 --> 00:01:33,950
like that.

24
00:01:34,420 --> 00:01:38,990
That is a huge benefit, especially considering that this book application that we are putting together

25
00:01:39,170 --> 00:01:43,930
is really not a commercial app or say we're not really selling this for money or anything like that.

26
00:01:43,940 --> 00:01:47,540
This is really just a tool for any arbitrary developer to make use of this.

27
00:01:47,540 --> 00:01:51,260
It's kind of like, hey, if you want to use this tool, great, but you're going to have to maintain

28
00:01:51,260 --> 00:01:55,340
some this infrastructure or essentially run this infrastructure yourself in the form of really just

29
00:01:55,340 --> 00:01:56,540
running the react application.

30
00:01:57,260 --> 00:02:02,630
And then finally, in theory, there's also going to be less complexity here because, well, we don't

31
00:02:02,630 --> 00:02:03,710
have an API server.

32
00:02:03,710 --> 00:02:09,110
We don't have to develop that entire thing or worry about implementing that bundler or worry about moving

33
00:02:09,110 --> 00:02:12,200
code back and forth between the React app and that API.

34
00:02:13,100 --> 00:02:19,280
So in total, between these two approaches, I think that we're going to go honestly with the local

35
00:02:19,280 --> 00:02:25,220
approach, the reason for this just you know, I have implemented both styles in developing this course.

36
00:02:25,400 --> 00:02:28,490
The local approach ends up being significantly faster.

37
00:02:28,820 --> 00:02:32,960
There's actually some other really interesting challenges that we're going to run into if we take this

38
00:02:32,960 --> 00:02:33,680
local approach.

39
00:02:33,950 --> 00:02:35,660
And that's really kind of what this course is all about.

40
00:02:35,660 --> 00:02:39,170
It's all about showing you some interesting problems and challenges that come up.

41
00:02:39,380 --> 00:02:43,550
So I'd rather go to a slightly more challenging possibly solution where we might have to run into a

42
00:02:43,550 --> 00:02:45,050
couple of problems and have to solve them.

43
00:02:46,530 --> 00:02:53,190
So that means that we need to go build up our reactor application and somehow implement Watpac inside

44
00:02:53,190 --> 00:02:59,040
of it with this custom plug in, we also need to make sure that inside of a reactor application, we

45
00:02:59,040 --> 00:03:04,290
have some kind of in Browsr transpire, something to take all that jazz, all that kind of stuff and

46
00:03:04,290 --> 00:03:06,270
convert it into plain JavaScript code.

47
00:03:06,840 --> 00:03:12,480
This is quite the undertaking we need to maybe wire up something like Babille or Watpac inside of a

48
00:03:12,480 --> 00:03:13,050
reactor at.

49
00:03:14,140 --> 00:03:19,360
Now, having said that, there's one little problem that we're going to run into very quickly with this

50
00:03:19,360 --> 00:03:22,870
local approach and this problem is very easily summarized.

51
00:03:23,640 --> 00:03:24,570
Here's a small problem.

52
00:03:25,180 --> 00:03:28,710
Turns out Watpac does not work correctly in the browser.

53
00:03:29,110 --> 00:03:33,000
You could probably bang your head against the wall quite a bit and you're not really going to get Watpac

54
00:03:33,010 --> 00:03:35,830
working correctly inside of a react application.

55
00:03:36,400 --> 00:03:39,070
So this kind of throws a really big wrench in our plans.

56
00:03:39,320 --> 00:03:40,420
We can't use Watpac at all.

57
00:03:40,450 --> 00:03:42,730
So how are we going to do this bundling process?

58
00:03:43,210 --> 00:03:45,600
Well, let's not give up hope just yet.

59
00:03:45,970 --> 00:03:50,830
Turns out that there's actually going to be a rather elegant solution here, some other library we can

60
00:03:50,830 --> 00:03:51,190
use.

61
00:03:51,380 --> 00:03:56,500
That's really going to be the absolute pinnacle or the linchpin, I should say, of our entire app.

62
00:03:57,040 --> 00:04:00,150
Let's take a look at how are we going to solve this problem in just a moment.