1
00:00:00,090 --> 00:00:05,990
In this lecture, we are going to talk about redesigning the model we have created to understand why

2
00:00:06,000 --> 00:00:11,340
I have two tabs opened with pages from the static template on one page.

3
00:00:11,430 --> 00:00:14,820
We have the authentication model on the other page.

4
00:00:14,910 --> 00:00:17,430
We have another model for editing a video.

5
00:00:17,700 --> 00:00:22,230
We are going to need to recreate the model for another section of our app.

6
00:00:23,040 --> 00:00:26,640
This leads us to an interesting topic of component design.

7
00:00:26,940 --> 00:00:29,760
It's not uncommon to face a scenario like this.

8
00:00:30,030 --> 00:00:32,940
Generally, we have two types of components.

9
00:00:33,330 --> 00:00:35,400
We have single use components.

10
00:00:35,700 --> 00:00:36,570
They are components.

11
00:00:36,570 --> 00:00:37,830
We use one time.

12
00:00:38,280 --> 00:00:42,690
Our navigation component is an example of a single use component.

13
00:00:42,990 --> 00:00:46,260
We won't need to create multiple navigation menus.

14
00:00:46,410 --> 00:00:47,640
One will suffice.

15
00:00:48,150 --> 00:00:52,740
The other type of component we will need to create is a reusable component.

16
00:00:53,160 --> 00:00:56,910
Our modal component is an example of a reusable component.

17
00:00:57,270 --> 00:00:58,050
At the moment.

18
00:00:58,230 --> 00:01:00,360
It will always render the same content.

19
00:01:00,660 --> 00:01:07,290
Our goal is to create a model that can render different content whenever we're designing a reusable

20
00:01:07,290 --> 00:01:07,980
component.

21
00:01:08,130 --> 00:01:12,210
We need to ask ourselves What are the components responsibilities?

22
00:01:12,510 --> 00:01:14,280
What does the component need?

23
00:01:14,550 --> 00:01:16,410
What does the component provide?

24
00:01:16,740 --> 00:01:21,810
In other words, we need to determine the input and output of a component.

25
00:01:22,170 --> 00:01:27,180
Answering these questions will give us direction during the development of the components.

26
00:01:27,690 --> 00:01:33,030
In the case of the modal component, it should handle toggling the visibility of the model.

27
00:01:33,450 --> 00:01:36,720
Other component shouldn't be responsible for this task.

28
00:01:36,960 --> 00:01:39,810
It should fall solely on the modal components.

29
00:01:40,200 --> 00:01:44,190
Managing the model is the responsibility of the model components.

30
00:01:44,820 --> 00:01:47,670
The model component should not render content.

31
00:01:47,910 --> 00:01:52,170
Instead, it should allow for parent components to provide content.

32
00:01:52,470 --> 00:01:55,650
We have an idea of how we can accomplish this task.

33
00:01:55,890 --> 00:02:01,980
We can add content projection to send content from the parent component to the child component.

34
00:02:02,340 --> 00:02:07,530
Lastly, the modal component should provide a location for rendering content.

35
00:02:08,190 --> 00:02:10,680
There are additional details I'm not mentioning.

36
00:02:10,919 --> 00:02:14,400
However, we'll get into those details throughout the section.

37
00:02:14,700 --> 00:02:19,530
Currently, we're trying to get a high level overview of the development process.

38
00:02:19,890 --> 00:02:23,070
Let's start designing a model in the next lecture.