1
00:00:02,590 --> 00:00:09,160
Now that we have a rough idea of what web components are and you will hear me use the term web components

2
00:00:09,190 --> 00:00:11,320
and custom elements interchangeably in this course

3
00:00:11,320 --> 00:00:16,690
by the way, now that we know that, the question is, why would we use web components?

4
00:00:16,690 --> 00:00:23,410
Well one great advantage is that a web component, like this modal component you saw, allows us to encapsulate

5
00:00:23,470 --> 00:00:31,720
logic and a user interface in one custom HTML tag which we then, another advantage, can also reuse across

6
00:00:31,720 --> 00:00:35,770
our page or even reuse across multiple projects.

7
00:00:35,770 --> 00:00:41,470
We can just take that Javascript file and drop it into any other project, just as you did it with my

8
00:00:41,470 --> 00:00:49,180
modal.js file. So encapsulated logic and an encapsulated user interface is of course great because

9
00:00:49,180 --> 00:00:50,990
it's easier to understand,

10
00:00:51,070 --> 00:00:56,540
we have connected code in one element and another element cares about something totally different

11
00:00:56,560 --> 00:00:59,110
so we have separated code which is always great,

12
00:00:59,110 --> 00:01:03,460
it's therefore also easy to maintain and we have a separation of concerns.

13
00:01:03,580 --> 00:01:08,590
Every element takes care about one tag, the modal takes care about displaying itself and showing some

14
00:01:08,590 --> 00:01:11,410
content in this pop-up window style,

15
00:01:11,410 --> 00:01:17,130
it does not care about the side drawer or sending HttpRequests or anything like that.

16
00:01:17,170 --> 00:01:22,450
The reusability across the page means that we only have to write a certain logic once and then

17
00:01:22,450 --> 00:01:29,140
we can use it multiple times, that modal might be something we show when the user orders an item but also

18
00:01:29,200 --> 00:01:30,840
when the user login fails.

19
00:01:30,970 --> 00:01:36,850
So we can write this logic one and then just pass different dynamic content into it in the different parts

20
00:01:36,850 --> 00:01:38,330
of our page where we use it.

21
00:01:38,440 --> 00:01:43,900
So we don't have to worry about overlapping logic and we also don't have to write logic in the user interface

22
00:01:44,050 --> 00:01:46,480
more than once, which is great

23
00:01:46,480 --> 00:01:51,580
and the same advantages are true when we share our component across multiple projects.

24
00:01:51,760 --> 00:01:54,140
We still use it like a normal HTML element,

25
00:01:54,160 --> 00:02:00,210
we don't have to worry about setting up a complex development environment there or using a special framework,

26
00:02:00,280 --> 00:02:03,670
we can even have projects written in different frameworks,

27
00:02:03,670 --> 00:02:08,980
let's say in Angular and in React and we can use one and the same web component in both.

28
00:02:09,010 --> 00:02:10,570
So that is a great advantage,

29
00:02:10,600 --> 00:02:15,470
we wouldn't be able to share React Components with an Angular project for example.

30
00:02:15,520 --> 00:02:21,090
We also of course can reuse core UI elements across multiple projects,

31
00:02:21,160 --> 00:02:28,550
so you could create a set of core UI elements that have your corporate identity baked in, like a toolbar,

32
00:02:28,570 --> 00:02:34,240
the modal, the side drawer which you use in all your projects then, so that can be really helpful and save

33
00:02:34,240 --> 00:02:35,750
you a lot of time

34
00:02:36,010 --> 00:02:41,680
and we again also don't have to repeat ourselves when it comes to writing all the logic and the user

35
00:02:41,680 --> 00:02:42,340
interface.