1
00:00:00,000 --> 00:00:04,596
[MUSIC]

2
00:00:04,596 --> 00:00:07,462
You can do some really complex
things with JavaScript, and

3
00:00:07,462 --> 00:00:10,210
there are many ways to
do the exact same thing.

4
00:00:10,210 --> 00:00:14,710
The features of years 2015 and
beyond are introducing even more ways.

5
00:00:14,710 --> 00:00:18,090
You'll see in here lots of varying
opinions favoring one method or

6
00:00:18,090 --> 00:00:19,900
style or another.

7
00:00:19,900 --> 00:00:23,750
So to help you make some of the low level
decisions, increase efficiency, and

8
00:00:23,750 --> 00:00:25,280
build projects faster,

9
00:00:25,280 --> 00:00:28,572
developers often use a frontend JavaScript
encrypted framework or library.

10
00:00:28,572 --> 00:00:32,699
Many frameworks and libraries help you
write clean modern JavaScript, and they

11
00:00:32,699 --> 00:00:37,783
allow you to use reliable and effective
software design patterns from the start.

12
00:00:37,783 --> 00:00:41,457
A common use case for a JavaScript
framework is to build single page web

13
00:00:41,457 --> 00:00:44,000
applications that run in the browser.

14
00:00:44,000 --> 00:00:47,360
So let's talk about some frameworks and
libraries you may have heard about or

15
00:00:47,360 --> 00:00:51,140
might come across in your work, or
while talking with fellow developers.

16
00:00:51,140 --> 00:00:54,178
The three big ones are React,
Vue, and Angular.

17
00:00:55,300 --> 00:01:00,280
React developed by Facebook is one of
the most popular JavaScript libraries.

18
00:01:00,280 --> 00:01:03,850
React makes building and maintaining
the user interface of your application

19
00:01:03,850 --> 00:01:08,685
faster and easier by breaking it up
into smaller reusable components.

20
00:01:08,685 --> 00:01:12,124
React started out as a UI library for
the web browser.

21
00:01:12,124 --> 00:01:16,333
But the patterns and tools it provides
are so useful that it's been extended to

22
00:01:16,333 --> 00:01:20,065
mobile development with
the React Native framework.

23
00:01:20,065 --> 00:01:24,655
And Vue.js is another popular framework
that shares many similarities with React.

24
00:01:24,655 --> 00:01:29,035
Except that Vue offers more tools out of
the box, it's smaller in file size and

25
00:01:29,035 --> 00:01:30,840
a little bit easier to pick up.

26
00:01:30,840 --> 00:01:34,164
Vue also makes it easier
to create your entire UI or

27
00:01:34,164 --> 00:01:38,293
just build an enhance only small
parts of your project's UI.

28
00:01:38,293 --> 00:01:42,313
Now Angular on the other hand, is
a full-fledged JavaScript framework, with

29
00:01:42,313 --> 00:01:46,840
more functionality than most JavaScript
frameworks and libraries out there.

30
00:01:46,840 --> 00:01:51,190
Angular, maintained by Google,
is referred to as a complete solution.

31
00:01:51,190 --> 00:01:55,377
Because it comes with all the tools
necessary to build complex, single page,

32
00:01:55,377 --> 00:01:59,030
web apps without dependency on
any other frameworks or plug-ins.

33
00:01:59,030 --> 00:02:04,510
React, Vue, and Angular are traditionally
client side frameworks and libraries.

34
00:02:04,510 --> 00:02:09,300
They run in the browser, and
by default, produce DOM as output and

35
00:02:09,300 --> 00:02:11,560
manipulate the DOM of the rendered page.

36
00:02:11,560 --> 00:02:15,084
But React, Vue, and Angular also have
their server side counterparts built by

37
00:02:15,084 --> 00:02:17,380
the open source JavaScript community.

38
00:02:17,380 --> 00:02:23,220
For example, Next.js is a popular
framework for server rendered React apps.

39
00:02:23,220 --> 00:02:27,680
Next includes a lot of complex
configuration right out of the box.

40
00:02:27,680 --> 00:02:31,080
Like routing,
preventing unnecessary code from loading,

41
00:02:31,080 --> 00:02:34,060
easy deployment to production,
and lots more.

42
00:02:34,060 --> 00:02:36,960
And Nuxt is a higher level framework for

43
00:02:36,960 --> 00:02:39,610
creating server side
rendered apps with Vue.

44
00:02:39,610 --> 00:02:42,480
Nuxt makes it easier to share
code between the client and

45
00:02:42,480 --> 00:02:45,770
the server, so
you can focus on your applications logic.

46
00:02:45,770 --> 00:02:49,786
Now to implement server side
rendering in an Angular application,

47
00:02:49,786 --> 00:02:52,681
developers use the Angular
universal library.

48
00:02:52,681 --> 00:02:57,540
These server side frameworks,
pre-load your app on a web server and

49
00:02:57,540 --> 00:03:00,920
send render HTML when
the browser requests it.

50
00:03:00,920 --> 00:03:04,800
Then you perform the usual DOM
manipulation and updates client side.

51
00:03:04,800 --> 00:03:07,455
This can result in faster paced loads and
better SEO.

52
00:03:08,650 --> 00:03:12,660
As you learned, JavaScript frameworks and
libraries provide loads of flexibility to

53
00:03:12,660 --> 00:03:15,310
developers and
much needed structures to their projects.