1
00:00:00,910 --> 00:00:04,780
We've now established that we really want to have a bundler inside of our application, but we want

2
00:00:04,780 --> 00:00:07,140
our bundlers to work just slightly differently.

3
00:00:07,570 --> 00:00:14,200
In particular, we want our bundler to try to find or import modules from NPM rather than trying to

4
00:00:14,200 --> 00:00:16,059
find them on our users hard drive.

5
00:00:16,610 --> 00:00:22,420
Remember, we want our users to be able to import any arbitrary module of any module that exists.

6
00:00:22,760 --> 00:00:27,010
We don't necessarily want them to have to install these modules ahead of time or anything like that.

7
00:00:28,090 --> 00:00:31,780
So to implement this step right here, there are three different possible solutions that we're going

8
00:00:31,780 --> 00:00:32,509
to take a look at.

9
00:00:33,010 --> 00:00:35,380
Let's start off with a possible solution, number one.

10
00:00:36,140 --> 00:00:41,290
OK, so with option number one here for making this very small change to a bundler, we're still going

11
00:00:41,290 --> 00:00:42,510
to have a react application.

12
00:00:43,180 --> 00:00:46,930
We're going to eventually have some code that we want to process and eventually execute.

13
00:00:47,470 --> 00:00:51,910
We're going to send that code to some backend API server that is going to be running Webberley.

14
00:00:52,850 --> 00:00:58,160
We're going to run Westpac eventually, Westpac is going to try to process this code that's been sent

15
00:00:58,340 --> 00:01:03,380
and it might find an important statement for something like React Axios, Lodish or whatever else,

16
00:01:03,800 --> 00:01:08,120
some kind of module that might not be installed locally on this back in DPI server.

17
00:01:09,150 --> 00:01:14,460
At that point in time, normally Westpac would throw in er, usually Westpac, there was an error if

18
00:01:14,460 --> 00:01:20,130
you tried to import a module that is not installed locally, however, we can override that behaviour

19
00:01:20,310 --> 00:01:21,930
by using a little plug in.

20
00:01:22,620 --> 00:01:27,700
A plug in is a small piece of code designed to change the way that Westpac works ever so slightly.

21
00:01:28,380 --> 00:01:33,870
So when the solution, we're going to rely upon a plug in called the NPM, install Westpac plug in.

22
00:01:34,350 --> 00:01:36,420
Let me show you the documentation for that very quickly.

23
00:01:38,260 --> 00:01:43,210
I'm at the Web site documentation, I'm looking at the documentation specifically for the NPM install

24
00:01:43,210 --> 00:01:43,980
Web plugin.

25
00:01:44,470 --> 00:01:49,300
So as I mentioned, whenever Web Jack is bundling your code, if it finds an import statement for a

26
00:01:49,300 --> 00:01:52,840
module that is not installed locally, usually Westpac would throw an error.

27
00:01:53,350 --> 00:01:55,660
This plug in is going to slightly change that behavior.

28
00:01:56,290 --> 00:02:01,840
Rather than throwing an error, it will automatically install this module directly from AMPM onto your

29
00:02:01,840 --> 00:02:06,880
local machine or in our case, our API server, and then allow Watpac to continue on with a bundling

30
00:02:06,880 --> 00:02:08,169
process, as usual.

31
00:02:08,960 --> 00:02:13,870
So this would definitely solve our whole issue any time -- runs, whenever it finds an important

32
00:02:13,870 --> 00:02:18,220
statement for some missing module or module that we don't have on this back in API server, that plugin

33
00:02:18,220 --> 00:02:23,920
will kick in, go and download that module from the registry and then continue on with a bundled process

34
00:02:24,220 --> 00:02:28,960
and eventually send over all the bundled code back to the react application where we can actually execute

35
00:02:28,960 --> 00:02:31,330
it and the user would see some result on the screen.

36
00:02:32,240 --> 00:02:36,770
So this would definitely work, there's no two ways about it, but something about this approach.

37
00:02:36,800 --> 00:02:39,680
I'll be honest with you, just doesn't quite feel right.

38
00:02:40,250 --> 00:02:44,120
The reason for that is that we are essentially saying that we're going have a back in DPI server here

39
00:02:44,480 --> 00:02:48,850
that is going to just be installing module after module after module over time.

40
00:02:49,580 --> 00:02:52,490
We're definitely going to install and save these modules locally.

41
00:02:52,520 --> 00:02:54,080
So they're essentially going to be cached.

42
00:02:54,350 --> 00:02:58,880
But every single time someone asks for a module that's never been downloaded before, are back in server,

43
00:02:58,880 --> 00:03:00,680
is going to have to go and download that module.

44
00:03:01,160 --> 00:03:06,710
So we eventually are back in the API is going to have a hard drive that is just dock full of tons and

45
00:03:06,710 --> 00:03:08,330
tons of installed modules.

46
00:03:09,290 --> 00:03:13,300
So even though this would work, something about it just doesn't quite feel right.

47
00:03:14,780 --> 00:03:19,610
So with that in mind, we're going to take a look at two other possible solutions that are mostly designed

48
00:03:19,610 --> 00:03:24,770
to kind of get around this issue of saving these dependencies locally, which is what this plug in is

49
00:03:24,770 --> 00:03:25,670
going to do by default.

50
00:03:27,230 --> 00:03:32,000
OK, so option number two, option number two is just about identical in nature, we're still going

51
00:03:32,000 --> 00:03:34,940
to have some kind of back and API running Watpac or something similar.

52
00:03:35,480 --> 00:03:40,490
Anytime Watpac means an import statement, you and I are then going to kind of intercept that import

53
00:03:40,490 --> 00:03:43,220
statement by writing our own custom plugin.

54
00:03:43,820 --> 00:03:49,190
So you and I could write our own custom plug in to say, hey, any time someone tries to import something

55
00:03:49,790 --> 00:03:56,600
such as React, Lodish, Axios, whatever else, you and I can make a request ourselves off to the NPM

56
00:03:56,600 --> 00:03:57,080
registry.

57
00:03:57,590 --> 00:04:01,910
And maybe if a user is trying to import react, we would get the source code for react and then return

58
00:04:01,910 --> 00:04:06,250
it and pass it back to WABAC so that it continue on with the bundling process.

59
00:04:06,830 --> 00:04:10,220
So this is essentially identical to this previous option.

60
00:04:10,220 --> 00:04:14,840
Number one, the only difference is that we're saying that we're not going to actively save this dependency

61
00:04:15,020 --> 00:04:16,149
onto our local machine.

62
00:04:16,459 --> 00:04:21,250
Instead, we might decide to just reach out every single time to the registry somewhat.

63
00:04:21,260 --> 00:04:27,200
Some whenever someone tries to import reactant to their little snippet of code, we could definitely

64
00:04:27,200 --> 00:04:31,190
try to cache this result and make sure that we're not just always downloading the same file over and

65
00:04:31,190 --> 00:04:31,670
over again.

66
00:04:31,940 --> 00:04:36,080
But essentially, at the end of the day, we're just saying we're not going to install react as an entire

67
00:04:36,080 --> 00:04:39,110
big heavyweight dependancy into our backend API.

68
00:04:39,500 --> 00:04:42,400
Other than that, everything is pretty much similar in nature.

69
00:04:44,440 --> 00:04:49,390
So once we give that file off to WABAC, Bundall gets completed and sent back over to the REACT application.

70
00:04:50,130 --> 00:04:51,410
So this would definitely work.

71
00:04:51,460 --> 00:04:53,410
This is definitely a viable solution.

72
00:04:53,710 --> 00:04:56,710
And I think that, well, we could definitely try to implement this.

73
00:04:57,220 --> 00:05:01,030
But before running off with this solution, I want to take a look at one other possible solution as

74
00:05:01,030 --> 00:05:01,290
well.

75
00:05:02,270 --> 00:05:07,940
So option number three, with option number three, we can once again make use of Watpac, maybe write

76
00:05:07,940 --> 00:05:11,450
some kind of custom plug into an individual file from NPM.

77
00:05:11,990 --> 00:05:17,690
What in this solution we're going to implement all this kind of web processing stuff directly into our

78
00:05:17,690 --> 00:05:18,560
react application.

79
00:05:19,060 --> 00:05:23,750
That means that we're not going to have to make some kind of outside request to our API, which in theory

80
00:05:23,750 --> 00:05:28,340
should speed up the process of running our users code, because now we don't need to make that entire

81
00:05:28,340 --> 00:05:29,230
additional request.

82
00:05:29,780 --> 00:05:34,640
In addition, another big upside to this approach is that now it would be a user's machine.

83
00:05:34,830 --> 00:05:40,520
It'd be up to a user to reach out to NPM and download an individual file, as opposed to having tons

84
00:05:40,520 --> 00:05:45,230
and tons and tons of requests coming from our server, our API server that you and I might have to put

85
00:05:45,230 --> 00:05:45,620
together.

86
00:05:46,540 --> 00:05:49,510
So option number two and number three are essentially equivalent in nature.

87
00:05:49,960 --> 00:05:52,990
The only difference is where we are doing this bundling process.

88
00:05:53,050 --> 00:05:55,570
Are we doing it on some API that you and I are putting together?

89
00:05:55,900 --> 00:05:58,380
Where are we going to do it on the react application itself?

90
00:05:59,660 --> 00:06:00,620
So at this point time.

91
00:06:02,330 --> 00:06:03,800
Or problems.

92
00:06:04,830 --> 00:06:10,260
Number two and number three, we've now got a couple of different solutions available to us, remember,

93
00:06:10,260 --> 00:06:15,060
for the trans piling stuff, we had said that we could do the trans piling on the back end API as well,

94
00:06:16,170 --> 00:06:17,820
or inside of our REACT application.

95
00:06:18,330 --> 00:06:23,310
And now with this bundling stuff, we're saying, well, we could do this on a backend API or inside

96
00:06:23,310 --> 00:06:24,540
of our REACT application as well.

97
00:06:25,150 --> 00:06:29,700
So it seems like we're kind of at a crossroads here where we need to really make a decision and decide

98
00:06:29,910 --> 00:06:33,480
do we want to implement all this stuff inside of some API that you and I would put together?

99
00:06:33,810 --> 00:06:36,540
Or do we want to just build it all directly into our react app?

100
00:06:37,050 --> 00:06:38,640
That's really the big question here.

101
00:06:38,640 --> 00:06:43,200
And that's what we need to really figure out and decide in order to move forward with some implementation.

102
00:06:43,700 --> 00:06:48,380
So let's start to weigh some the pros and cons between these two different styles in just a moment.