Original subtitles

1 1

Let's start a section with a general overview 2

2

of Modern JavaScript Development. 3

3

So basically of how we write JavaScript today. 4

4

Because when we built applications, 5

5

we don't just write all of our code into one big script 6

6

send that script as it is to the browser, 7

7

and call it a day. 8

8

Now it used to be like this, 9

9

but the way we built JavaScript applications, 10

10

has changed tremendously over the last couple of years. 11

11

So back in the day, 12

12

we used to write all our codes 13

13

into one big script or maybe multiple scripts. 14

14

But today, we divide our projects into multiple modules 15

15

and these modules can share data between them 16

16

and make our code more organized and maintainable. 17

17

Now, one great thing about modules 18

18

is that we can also include 3rd-party modules 19

19

into our own code. 20

20

And there are thousands of open source modules, 21

21

which we also call packages, 22

22

that developers share on the NPM repository. 23

23

And we can then use these packages for free in our own code. 24

24

For example, the popular React framework or jQuery, 25

25

or even the Leaflet library, 26

26

that we used before in our Mapty project. 27

27

All of these packages are available through NPM. 28

28

Now NPM stands for Node Package Manager, 29

29

because it was originally developed together 30

30

with Node.js and 4Node.js. 31

31

However, NPM has established itself 32

32

as the go to repository 33

33

for all kinds of packages 34

34

in Modern JavaScript Development. 35

35

Now, in order to actually download 36

36

and use and share packages, 37

37

we use the NPM software installed on our computer. 38

38

And this is just a simple command line interface 39

39

that allows us to do all that. 40

40

So basically NPM is both the repository 41

41

in which packages live and a program that we use 42

42

on our computers to install and manage these packages. 43

43

So let's say that we are done writing our project code. 44

44

So we divided it into multiple modules 45

45

and we included some 3rd-party modules as well. 46

46

And so now the development step is complete. 47

47

However, usually that's not the end of the story. 48

48

At least not when rebuilding a real world application. 49

49

Instead, our project now needs 50

50

to go through a build process, 51

51

where one big final JavaScript bundle is built. 52

52

And that's the final file, 53

53

which we will deploy to our web server for production. 54

54

So basically it's the JavaScript file, 55

55

that will be sent to browsers in production. 56

56

And production simply means that the application 57

57

is being used by real users in the real world. 58

58

Now, a build process can be something really complex, 59

59

but we gonna keep it simple here 60

60

and only include two steps. 61

61

And the first step, we'll bundle all our modules 62

62

together into one big file. 63

63

This is a pretty complex process 64

64

which can eliminate unused code 65

65

and compress or code as well. 66

66

Now this step is super important for two big reasons. 67

67

First, older browsers don't support modules at all. 68

68

And so code that's in a module could not be executed 69

69

by any older browser. 70

70

And second, it's also better for performance 71

71

to send less files to the browser, 72

72

and it's also beneficial that 73

73

the bundling step compresses our code. 74

74

But anyway, as the second step, 75

75

we do something called transpiling and polyfilling, 76

76

which is basically to convert 77

77

all modern JavaScript syntax 78

78

and features back to old ES5 syntax, 79

79

so that even older browsers can understand 80

80

our code without breaking. 81

81

And this is usually done using a tool called Babel. 82

82

So, remember that I said right in the beginning 83

83

of the course, that we were gonna do this, 84

84

and in this section, we will finally do it. 85

85

So these are the two steps of our build process, 86

86

and after these two steps, 87

87

we end up with that final JavaScript bundle, 88

88

ready to be deployed on a server for production. 89

89

Now, of course we don't perform these steps ourselves. 90

90

Instead, we use a special tool to implement 91

91

this build process for us. 92

92

And the most common build tools available, 93

93

are probably webpack and Parcel. 94

94

And these are called JavaScript bundlers 95

95

because well, as the name says they take our raw code 96

96

and transform it into a JavaScript bundle. 97

97

Now Webpack is the more popular one, 98

98

but it can be really hard and confusing to set it up. 99

99

So that's because there's a lot of stuff 100

100

that we need to configure manually, 101

101

in order to make it work properly. 102

102

Parcel, on the other hand is a zero configuration bundler, 103

103

which simply works out of the box. 104

104

And so in this bundler, 105

105

we don't have to write any set up code, 106

106

which is really amazing. 107

107

So I personally absolutely love Parcel 108

108

and I use it all the time, 109

109

and I think that you will love it too. 110

110

And so, that is the JavaScript bundler 111

111

that we gonna use later in the section. 112

112

Now these development tools are actually 113

113

also available on NPM. 114

114

So just like packages that we include in our code, 115

115

we will download and manage tools using NPM as well. 116

116

And these tools include the live-server 117

117

that we've been using all along, 118

118

the Parcel bundler that we just talked about 119

119

or Babel to transpile code back to ES5. 120

120

All right, so this is a high level overview, 121

121

of how we develop Modern JavaScript applications today. 122

122

And if you ask me, this is really exciting stuff, 123

123

because this is how professional developers 124

124

actually write JavaScript today. 125

125

And so in the rest of the section, 126

126

you will take a big step in the direction 127

127

of becoming a professional developer too.