WEBVTT 00:05.170 --> 00:10.480 In this lesson we are finally going to talk about the powerful view see a lie. 00:10.570 --> 00:16.450 We will understand why we need of UCLA to create that project by making an overview of its features 00:16.540 --> 00:21.000 and by analyzing the components that it creates for us ready to be used. 00:21.160 --> 00:29.560 View C L I stands for view command line interface and it's a full system for a rapid the future yes 00:29.560 --> 00:32.500 development and project scaffolding. 00:32.500 --> 00:38.650 Creating a new project using the command line interface instead of including this script tag in our 00:38.650 --> 00:44.910 HDMI templates like we did in the previous projects is in a way similar to creating a Django project. 00:44.920 --> 00:52.150 We can then start project command meaning that it creates most of the initial boilerplate code and configuration 00:52.150 --> 00:58.910 files that we need automatically allowing us to also install and integrate extra packages in our projects. 00:58.910 --> 01:07.200 Easy as we'll see in great detail during this section using UCLA really simplifies our development experience. 01:07.270 --> 01:13.060 For example we can select the libraries that we want to use immediately such as for example a view router 01:13.270 --> 01:16.860 one of the most important packages of The View ecosystem. 01:16.900 --> 01:24.250 We can develop the HDMI all CSX and the javascript code for our front end project according to our needs 01:24.370 --> 01:31.150 and preferences using for example single file components which are a very convenient way of creating 01:31.210 --> 01:37.110 view components we can use SPSS we can use TypeScript and so on. 01:37.150 --> 01:44.710 Another very useful thing about UCLA is that it provides us a ready to use web back configuration that 01:44.890 --> 01:53.020 allows us to group and magnify all the G.S. CSX and dependencies code in bundles that we can do in use 01:53.020 --> 01:58.330 in production and no worries if this is the first time you're reading about wetback we are going to 01:58.330 --> 02:01.150 talk about it clearly and because of this. 02:01.150 --> 02:05.810 Ready to use configuration working with it is going to be really easy. 02:06.070 --> 02:13.540 At the same time we also get a development server we have hot module replacement show in real time browser 02:13.540 --> 02:18.400 updates about all the changes we are applying to our application while developing. 02:18.550 --> 02:24.430 Which means that to make an example if we make a change to our code using the visual studio code for 02:24.430 --> 02:32.210 example we change an H to tag to our h1 tag we are instantly going to see the change happening in realtime 02:32.440 --> 02:38.010 in the browser without needing to reload the developer server or to refresh the page. 02:38.020 --> 02:43.330 This is one of the most complicated things to configure while using django because in fact we're going 02:43.330 --> 02:49.240 to have two development servers running at the same time but again no worries because we're going to 02:49.240 --> 02:51.960 explain everything step by step. 02:51.970 --> 03:00.130 Last but not least the recent versions of UCLA also include their web interface called view UI that 03:00.130 --> 03:06.280 you can use to manage your existing projects or just create new ones from scratch 3 style of UCLA in 03:06.280 --> 03:06.930 our system. 03:06.940 --> 03:15.910 We need NPM node package manager NPM is the default package manager for no GSA that as you probably 03:15.910 --> 03:24.070 know is a javascript around time environment built on top of Chrome's V8 JavaScript engine that allows 03:24.070 --> 03:30.440 code execution outside of the browser such as for example as US server side language. 03:30.610 --> 03:37.970 So let's jump to Chrome and let's get started as you can see I'm currently in the official website of 03:37.970 --> 03:40.750 the node j yes Foundation at the address. 03:40.760 --> 03:46.050 No the J Yes dot org because of course as we said we need know the J. 03:46.060 --> 03:53.060 Yes to use UCLA and as you can see here you can find the appropriate download links for your operating 03:53.060 --> 03:54.440 system of choice. 03:54.440 --> 03:59.350 You can choose both the long term support or the latest version download the links. 03:59.350 --> 04:02.630 They're both fine and installing node in your system. 04:02.630 --> 04:10.850 You will also get NPM the node package manager which is needed to download and install view CLIA once 04:10.850 --> 04:11.390 installed. 04:11.390 --> 04:18.320 You'll be able to access nodes and NPM from a terminal and so here first of all I can give the commands 04:18.380 --> 04:25.470 node dash V as you can see I'm currently using version eleven dot event and NPM. 04:25.650 --> 04:31.280 This should be and as you can see in my case this is the version of NPM that I'm using. 04:31.460 --> 04:38.420 Not sure yes is a javascript that ran time built on Chrome V8 JavaScript engine that allows us to execute 04:38.480 --> 04:41.140 javascript code outside of the browser. 04:41.420 --> 04:47.650 And so just to give an idea of what this means so we can access a node console by just called the node 04:48.080 --> 04:53.150 so yeah we can now run javascript code for example console dot log. 04:53.930 --> 05:02.810 Hello world but let's just close these for now instead of UCLA using NPM is very easy. 05:02.810 --> 05:05.710 Everything you need to do is to give the command NPM. 05:06.290 --> 05:14.630 I install dash G which means global so that we can access UCLA and create new projects from everywhere 05:14.690 --> 05:15.690 in our system. 05:15.740 --> 05:19.860 Then at the view 4 was Lesh CLIA. 05:20.000 --> 05:30.550 Considering that I'm on Linux I also need to use sudo enter the setup is downloading all the required 05:30.550 --> 05:32.230 files for the installation 05:36.760 --> 05:42.490 and now that everything is installed we can create the view projects from everywhere in our system. 05:42.860 --> 05:45.690 So let's move to the desktop folder for example. 05:45.740 --> 05:51.160 And here we can use the command view create just like we would use there. 05:51.180 --> 05:57.040 Jane Gladney start project command and then of course we need a name for the project itself. 05:57.050 --> 05:58.450 For example in this case. 05:58.820 --> 06:04.470 Hello few we can now select all sorts of features for our project. 06:04.470 --> 06:09.480 First of all we can choose if we want a default configuration or if you want to manually select the 06:09.480 --> 06:10.950 features for our project. 06:11.190 --> 06:16.620 So enter here we can press space to select the features that we want. 06:16.620 --> 06:20.060 For example Bebo but also the router. 06:20.380 --> 06:24.690 Then let's press Enter considering that we're going to use view router. 06:24.690 --> 06:27.710 It asks us if we want to use his mode. 06:27.750 --> 06:28.740 Yes. 06:28.740 --> 06:31.530 Pick a configuration for the limiter you can select. 06:31.560 --> 06:36.300 Yes Linda plus a prettier we've leaned on safe. 06:36.360 --> 06:42.150 Yeah we can just leave the configuration in there pay cage dot Jace on file and now if we want to we 06:42.150 --> 06:49.030 could also save this configuration to use it with future projects but we can just select no. 06:49.190 --> 06:52.350 As you see it's now sitting up the whole configuration for ourselves 06:55.770 --> 07:03.660 and once completed as suggested we can move inside of the folder and give the command NPM a transfer 07:03.930 --> 07:07.740 to run the developer server for our project. 07:07.820 --> 07:08.830 Let's do that. 07:09.570 --> 07:14.750 Hello view is now NPM around server. 07:15.090 --> 07:19.220 Let's press Enter starting the development server. 07:19.310 --> 07:25.590 It's now creating a bill to weave all the modules for the project and similarly to what we get with 07:25.630 --> 07:33.650 Django we now see that the app is running at these local addresses on the port 80 80 and we also see 07:33.650 --> 07:40.670 a very useful ad message which reminds us that the development build is not suited for production because 07:40.670 --> 07:42.050 it's not optimized. 07:42.550 --> 07:48.220 And if we want to create a production build we can just give the command and be an Iran build. 07:48.260 --> 07:53.570 But let's now have a look at this address so copy link addresses. 07:54.110 --> 07:57.040 And this is our low view application. 07:57.110 --> 08:03.320 We see that we have a lot of links to external resources such as for example the documentation forum 08:03.350 --> 08:09.310 chart and so on but up here we also have two more links which are part of the application itself. 08:09.380 --> 08:17.100 And notice how by clicking on DMA there is no refresh happening you see because they're using a view 08:17.100 --> 08:21.310 router the application knows that for each single address. 08:21.320 --> 08:25.590 In this case it's less about and the home page for each one of them. 08:25.690 --> 08:27.640 It is to show a different component. 08:27.680 --> 08:33.590 And this is one of the most important concepts of a single page application that you are going to discuss 08:33.680 --> 08:37.160 and practice in great detail during the whole section.