WEBVTT 00:02.720 --> 00:07.250 Now did that single page application is upheld that name in this lesson we're going to analyze all the 00:07.250 --> 00:13.220 components that have been automatically generated with their view create comment. 00:13.220 --> 00:21.620 So as you can see inside the front end folder we have three more folders not modules public and S R 00:21.620 --> 00:23.660 C which stands for a saucer. 00:23.930 --> 00:28.670 And we have a couple of configuration faves such as for example package that Jason. 00:28.890 --> 00:34.370 Well as you can see we have a couple of configuration options but most importantly we can read the what 00:34.370 --> 00:39.380 are the dependencies and the development dependencies for our front end project. 00:39.650 --> 00:46.940 Then in the node modules folder as the name suggests we have a lot of modules for node which as you 00:46.940 --> 00:49.560 can see are really really a lot. 00:49.580 --> 00:53.270 So we can just close this folder and leave it where it is. 00:53.270 --> 00:58.130 There is no need for us to change anything inside of it inside of the public for that do we have an 00:58.130 --> 01:01.030 index not HMO file and an icon. 01:01.070 --> 01:06.930 And clearly we are not going to use this index not h the email file because we have set everything absolutely 01:07.010 --> 01:09.350 we can use our own index file. 01:09.830 --> 01:18.480 However now that we're here you can also copy these lines just going to face them here. 01:18.530 --> 01:24.730 They're no script tag just tells our users that they need to enable JavaScript in order to properly 01:24.730 --> 01:26.610 use that application. 01:26.740 --> 01:30.720 And the comment here below is useful to remind us our viewers. 01:30.760 --> 01:37.770 Yes application works and of course if we now go back on Chrome nothing specifically is change but we 01:37.980 --> 01:40.480 now see also dinos creeps tag. 01:40.480 --> 01:47.800 So the most important code for the application itself is all inside the S R C folder which stands for 01:47.860 --> 01:49.360 source inside of it. 01:49.360 --> 01:50.960 We have three more folders. 01:50.980 --> 01:56.660 Again assets components views then we have up dot view main the G. 01:56.680 --> 01:57.030 Yes. 01:57.040 --> 01:58.180 And a that dot. 01:58.360 --> 02:01.410 Yes let's start talking about main dot G. 02:01.420 --> 02:02.270 Yes. 02:02.320 --> 02:06.570 These as the name suggests is one of the most important files of the application. 02:06.880 --> 02:11.330 And it basically does exactly the same that we've learned to do in their view. 02:11.340 --> 02:17.890 Yes section we have the creation of a new viewings this and we are mounting the application in an aged 02:17.930 --> 02:27.810 PML element we've I.D. up which is of course diva inside that index thought HDMI file the code is different 02:27.810 --> 02:34.350 from the one we've used in the future yes section because you see here we are mounting this up which 02:34.350 --> 02:40.680 is in fact a component this updated view is the root component of the application that is mounted. 02:40.680 --> 02:45.840 Want to give we've idea app as we've said in the previous section about the future yes components that 02:45.840 --> 02:51.660 are very important part of the view architecture especially in real world projects of course and of 02:51.660 --> 02:57.060 course our Question Time application is no exception we're going to have a lot of components and up 02:57.330 --> 03:02.900 to you is the roots component of where all the other components are nested within. 03:02.970 --> 03:05.520 Everything is going to be cleared up very soon I guarantee you. 03:05.520 --> 03:11.880 So let's exploit the app dot view file this is in fact a component like the ones that we've created 03:11.880 --> 03:18.420 in the future yes section of the course and specifically this is called a single file component all 03:18.480 --> 03:24.930 the files we the DOT view extension are single file components in these are a very convenient way to 03:24.930 --> 03:30.000 create components what are the difference between the template part of the component and the aged email 03:30.000 --> 03:36.840 code it style and the javascript logic as well as to see is more evident we're making an overview of 03:36.840 --> 03:44.070 the whole project so let's check deep components views and assets folder you name the assets folder 03:44.070 --> 03:50.250 as you can see we have a PMG file and it's basically similar to the starting folder in Django we are 03:50.250 --> 03:54.000 not going to need it because we are going to get all the data from the rest of the candidate. 03:54.120 --> 03:59.220 So the two important folders are in fact components and views as you can see inside of them we have 03:59.220 --> 04:04.920 other single file components we can recognize them because of the view extension and they're divided 04:04.920 --> 04:07.140 into folders by convention. 04:07.140 --> 04:13.680 So in the views for that we typically agree to create all those components which represent a whole page 04:13.740 --> 04:20.010 of our application for example the home page empty about page while in the components folder instead 04:20.130 --> 04:26.640 we normally create all those components that are reusable and typically nested within the components 04:26.700 --> 04:28.480 in the views folder. 04:28.650 --> 04:31.530 Let's have a look at the home dot view component. 04:31.530 --> 04:38.280 For example we see that same as the updated view component we have the template tag and inside of it 04:38.400 --> 04:43.890 all the aged email code for the component in the area we also see that we now have the script tag and 04:43.890 --> 04:50.700 inside of it the javascript logic we are importing the hell a world component from their components 04:50.700 --> 04:57.710 folder you see that the at symbol is an alias for S R C for our source folder. 04:57.810 --> 05:01.660 So we're importing the hello world component from a low world view. 05:01.710 --> 05:07.440 We are declaring that we intend to use it and the components object and rather than using it you see 05:07.650 --> 05:08.870 inside of the template. 05:08.940 --> 05:15.680 So let's have a look at the ELA world component and as you see we have template we've all the h the 05:15.690 --> 05:21.630 email code needed for this component then we have script where we are for example defined to name and 05:21.660 --> 05:27.980 props in the whole world component is expecting the message prop which is a string as you can see we're 05:27.990 --> 05:36.600 passing it here and then of course the value of message is shown using the mustache like syntax and 05:36.600 --> 05:43.260 then this component we also see that we have this style tag that is also using this scoped attribute 05:43.440 --> 05:50.160 which limits these CSF to this component only considering that the concepts of components and nested 05:50.190 --> 05:54.100 component are pretty familiar to us in fact we've been talking about them. 05:54.160 --> 05:59.940 INTERVIEWER Yes section of the course it surely is no problem to understand our single file components 05:59.940 --> 06:03.140 work as we've said they are just another way to create your components. 06:03.150 --> 06:09.480 Basically the way we create components in a application created we've UCLA and so the new field that 06:09.510 --> 06:15.300 we need to understand the new question that we need to ask where is how can we use components such as 06:15.300 --> 06:21.660 the home component as if there were pages in fact over application the same concept of course applies 06:21.660 --> 06:28.560 to that about component in a typical Web application in an old fashioned website where all the pages 06:28.560 --> 06:34.800 are rendered by the server we make an HP VB request to the server let's say you get request to get the 06:34.800 --> 06:40.320 details of the home page and there's a response we get all of the h the email code that is part of the 06:40.320 --> 06:49.000 page itself however in a single page application we only ran that one page index dot HDL Well we only 06:49.000 --> 06:57.350 have these leave what happens is that the app component is rendered and mounted in these diva and as 06:57.360 --> 07:03.720 we said the app don't view component is the root component where all the other components are nested 07:03.720 --> 07:11.040 within the and we see that we have another receiver and then inside we have these two router links so 07:11.540 --> 07:18.270 one for home and one for about and this is part of the answer to the question how can we show a component 07:18.420 --> 07:25.050 as if it were a page we can do that because of view a router so let's open the router dot J Yes file 07:25.290 --> 07:32.550 which was created and a particular field would automatically by view CLIA and that in fact is a bit 07:32.550 --> 07:39.510 like the other s not by file in a Django project let's remember that view router is the package in their 07:39.510 --> 07:46.350 view J Yes ecosystem that is in charge of handling client side routine for single page applications 07:46.530 --> 07:53.010 and so when I see that the router does Jesus file is similar to the other l It's not by file in a Django 07:53.010 --> 08:00.150 project what I mean is that inside of this file we define all the parts that we tell our application 08:00.210 --> 08:06.750 that it has to show us different content based on the other two visiting and in Abuja yes application 08:06.810 --> 08:13.230 as really come to understand the content is defined inside of components therefore as you can see in 08:13.230 --> 08:19.830 these simple configuration we can see that we have defined the two parts one which is basically the 08:19.830 --> 08:27.690 home page is called home and we lead to the application showing us the home component and the second 08:27.690 --> 08:36.600 one slash about is called about and using a slightly different syntax is being assigned you see to the 08:36.600 --> 08:38.570 about look few components. 08:38.670 --> 08:44.220 So if we now quickly go back to the output don't view component we can see that here you are using to 08:44.410 --> 08:53.010 Router links into the two proper we are passing some you are El Paso frequency you're inside the router 08:53.130 --> 09:00.450 dot J Yes file therefore clicking on these links will result in the rendering of the related components 09:00.600 --> 09:06.420 and as some of you might have guessed these components will be shown here what do we have a router view 09:06.990 --> 09:07.620 at the moment. 09:07.620 --> 09:13.920 This is what's the home page of our application looks like because of client side routine so what's 09:13.920 --> 09:20.640 happening is that by request in their home page of our single page application are telling a view router 09:20.850 --> 09:28.440 the rest to show us the content of the home component idea where we have a router view as we said so 09:28.470 --> 09:37.650 let's make a test let's just switch the parts like so and if we now go back to Chrome and actively ask 09:38.460 --> 09:46.080 for the page we now get the content of the about component and we can of course change it make clicking 09:46.980 --> 09:50.810 on the links which in this case of course are inverted. 09:50.830 --> 09:53.640 Notice also our E.R. in the U.S. role bar. 09:53.910 --> 09:58.230 We also have these bays you are rarely shown before in the different parts. 09:58.350 --> 10:05.080 And that's because one of the options we've defined in the route that the just file and the option is 10:05.090 --> 10:05.640 Bayes. 10:05.640 --> 10:08.010 So let's just comment it out. 10:08.010 --> 10:09.330 Let's go back to Chrome 10:13.150 --> 10:17.600 and if you now click on About you'll see that we only see net profit above. 10:17.680 --> 10:18.880 Perfect. 10:18.880 --> 10:26.410 One more thing to keep in mind is that this instance of a router that we creating as you see is of course 10:26.620 --> 10:35.740 exported so that it can then be imported in the main the yes file ready to be used by passing it to 10:35.740 --> 10:41.810 the view is this let's not make an example of how to use all these new tools and concepts. 10:41.810 --> 10:43.760 We've been talking about in this lesson. 10:44.000 --> 10:51.080 So in the views folder I'm going to create a new file which I'm going to call example dot view. 10:51.110 --> 10:55.950 This is going to be our example single file component and to speed up the process. 10:55.970 --> 11:04.180 I can just copy the code from allowed to view and so inside of the template tag we defined all the HDMI 11:04.180 --> 11:11.380 all code for the component everything needs to be nested inside of a root HDMI element. 11:11.380 --> 11:18.640 And if you want to add some style of it we can just define a class like example on your you can write 11:18.640 --> 11:26.720 something like first single file components then it'll be low you can define style. 11:27.130 --> 11:34.570 And for example we can say that we want all the H ones to be read so caller write. 11:34.690 --> 11:40.440 Remember also that if you want to limit the styling only to the HDMI code of the component itself. 11:40.600 --> 11:49.820 You need to add the scoped attributes so we can use it in that example component as well in Europe between 11:49.820 --> 11:51.500 template and style. 11:51.530 --> 11:57.050 We can also define script and thanks to that awesome very thorough package. 11:57.050 --> 11:59.960 We also get this code for free. 12:00.080 --> 12:11.080 So here we can define name example and then maybe the data model for this component which is a function 12:11.110 --> 12:20.830 because this is in fact a component so return it and yeah we can define something like message Hello 12:21.400 --> 12:22.450 world. 12:22.450 --> 12:25.650 We can now interpolate this message. 12:25.750 --> 12:26.170 So. 12:26.170 --> 12:27.040 Page 3 12:29.890 --> 12:35.540 like so now that the Dow component is complete we can import it eating the router Dodger yes file. 12:35.970 --> 12:39.980 I'm just going to copy this code and change these two. 12:40.080 --> 12:52.110 Example these two examples to you know yeah we can define in either path these times Lesh example name 12:53.010 --> 13:03.900 example a component example component 3 if we now go back to Chrome and if you go to slash example get 13:03.930 --> 13:12.090 that first single file component hello world perfect we can also add a link here in the Nevada using 13:12.190 --> 13:19.300 it with their Linker so let's go back to the app dot you component I'm just going to copy this one. 13:19.340 --> 13:21.910 So this is going to be an example. 13:21.920 --> 13:24.150 Maybe that's what I said. 13:24.560 --> 13:25.760 Well just move this 13:29.180 --> 13:35.090 and so the path of course is going to be less an example which is the one we've just registered in the 13:35.150 --> 13:36.920 router both as file. 13:36.950 --> 13:42.110 Now going back to Chrome because of what the load the app is instantly updated. 13:42.160 --> 13:45.100 Now we have a new link here in the number. 13:45.140 --> 13:47.210 So this is basically for this lesson. 13:47.210 --> 13:52.730 We've been talking about a lot of different concepts but there is one last thing that I want to point 13:52.730 --> 13:58.850 out here as you see we are importing about Dot view component in a slightly different way from what 13:58.850 --> 14:00.710 we're doing up here. 14:00.710 --> 14:07.940 So as you can see and in fact read from the comment the code related to the about the view component 14:08.230 --> 14:11.200 is going to be lazy loaded when the route is visited. 14:11.330 --> 14:16.970 And this is in fact a good thing and most of the times it should make an application a bit faster because 14:17.030 --> 14:24.050 of course lazy loading and these increase in speed is achieved by creating different chunks associated 14:24.210 --> 14:25.260 component. 14:25.430 --> 14:33.050 We see about Dot Escher dot the GSA and an ash is just basically a unique code an alpha numerical code 14:33.080 --> 14:37.200 that is related to every single component variation basically. 14:37.430 --> 14:40.900 This is good in theory but we just don't need it. 14:40.940 --> 14:51.220 We've had a Django configuration so I'm going to import about from views about that view and yet I'm 14:51.220 --> 14:54.680 just going to change the code a little bit to like. 14:54.690 --> 15:05.380 So this is going to be about and if we now go back to Chrome everything works you see as expected anyway 15:05.950 --> 15:09.570 so let's make a recap about what we've been talking about in this lesson. 15:09.640 --> 15:16.000 We've seen our front end application is composed of three folders and a couple of configuration files. 15:16.000 --> 15:22.690 The only folder that really matters for us is the S RC folder which stands for sort of soup and inside 15:22.690 --> 15:28.040 of this folder we can find basically the most significant code for the application itself. 15:28.090 --> 15:33.760 Most of the content of our single page application is divided into single file components which are 15:33.760 --> 15:40.190 these files we have the view extension and in a typical single file component you will have the aged 15:40.190 --> 15:46.480 Yemen code inside of the template HDMI tag in the javascript the logic for the component inside of the 15:46.480 --> 15:47.680 script tag. 15:47.740 --> 15:54.430 And Dan the CSF styling inside of this style tag finally viewed through that is the package of the view 15:54.440 --> 16:00.240 ecosystem that provides us client side rooting inside of the route that dot J. 16:00.250 --> 16:08.080 Yes file we define different parts so that once visited will result in the application rendering different 16:08.140 --> 16:15.340 components thus allowing not a single page HDMI file the index dot age the amount file to change its 16:15.340 --> 16:16.870 content dynamically.