WEBVTT 00:00.150 --> 00:02.130 Hello everyone and welcome back. 00:02.130 --> 00:05.430 In this lesson we're going to create our first view instance. 00:05.520 --> 00:08.170 We're going to use view by including it in our web pages. 00:08.170 --> 00:10.280 We have a script tag getting the code. 00:10.290 --> 00:12.120 We are content delivery network. 00:12.120 --> 00:16.770 We're also going to talk about that activity a very important feature that will allow reach the e-mail 00:16.770 --> 00:18.600 content to dynamically change. 00:18.660 --> 00:19.590 Thanks to you. 00:19.590 --> 00:21.250 Let's get started. 00:21.300 --> 00:26.010 We are invisible to your code as you can see I have created a folder called the first viewing instance 00:26.250 --> 00:28.290 which we're going to use in this lesson. 00:28.290 --> 00:31.750 Let's now create a new file within this folder. 00:31.770 --> 00:39.300 Just going to call it a low view dot HCM L and weaving this file we can get all the boilerplate code 00:39.360 --> 00:44.820 that we need by typing h the e-mail and clicking on one of these options. 00:45.060 --> 00:53.460 You can set something like Hello view its title and we can now right click on the file select coping 00:53.760 --> 01:00.490 path and we can outpaced the path in Chrome like so. 01:00.600 --> 01:04.930 And as you can see from the title of the window we've successfully opened the file. 01:04.930 --> 01:08.520 Let's now go to the home page of user yes and address user. 01:08.530 --> 01:09.610 Yes dot org. 01:09.670 --> 01:15.340 This Web site is really great especially because it is the home of the frameworks documentation which 01:15.340 --> 01:17.280 as we said is awesome. 01:17.320 --> 01:23.260 Most of it if not all of it is written and maintained by one of the future yes core developers called 01:23.320 --> 01:29.770 Cleese Fritz up and I definitely suggest you check it out because it contains a ton of useful information 01:29.800 --> 01:30.270 really. 01:30.340 --> 01:37.150 You can find a detailed and comprehensive guide installation instructions API reference and so on. 01:37.150 --> 01:42.550 One important thing to keep in mind however is of course the version of you that you're going to develop 01:42.550 --> 01:48.880 with as you can read at the moment the current latest stable version is to dot six dot nine. 01:49.240 --> 01:54.820 However according to the frameworks development roadmap it seems like version 3.0 is going to come out 01:54.820 --> 01:56.050 later on this year. 01:56.050 --> 02:01.940 And in that case feel free to use it any way of course always use the latest stable version available. 02:01.990 --> 02:08.140 Also because according to ever new himself that are not going to be any major breaking changes in their 02:08.140 --> 02:09.480 eye level API. 02:09.520 --> 02:14.790 And that's because most of the changes for version 3.0 are going to happen under the hood making the 02:14.790 --> 02:17.590 framework faster lighter and more reliable. 02:17.590 --> 02:22.390 So before starting with the installation itself I also want to show you the view J. 02:22.420 --> 02:30.070 Yes Dev Tools page in Chrome Web Store and view the tools is a very useful extension for the bargain 02:30.120 --> 02:34.870 view applications which is going to make your life as a developer much easier and which we're going 02:34.870 --> 02:36.850 to definitely use in this course. 02:36.850 --> 02:43.330 So be sure to download the official version you can recognize it by number of users and once installed 02:43.420 --> 02:46.630 you also want to check the settings for the extension. 02:46.630 --> 02:52.240 You can just check for extensions in your browser and then click on refugees as tools as you can see 02:52.240 --> 02:56.800 once installed this little icon is going to pop up here in the toolbar. 02:56.800 --> 03:02.650 And one important setting to enable is allow access to file a new array also which allows us to use 03:02.650 --> 03:07.680 these debugging tool without necessarily app to have a web server running. 03:07.990 --> 03:13.710 Going back to the installation page we see that there are several ways that we can include and use future 03:13.710 --> 03:14.180 yes. 03:14.200 --> 03:19.930 In other projects in this lesson as we've said we're going to use in Sudan content delivery network 03:20.050 --> 03:24.730 which is no doubt the most beginner friendly of all just copy these lines. 03:25.150 --> 03:31.660 And then you can paste it right here before the body closing tag. 03:31.660 --> 03:37.260 And we're now finally ready to start developing as you can see I'm currently divided the screen into 03:37.270 --> 03:39.760 parts editor and a browser. 03:39.760 --> 03:48.160 And the first thing that we want to do is to create a GSR file which I can just call made with GSA inside 03:48.160 --> 03:51.200 the same folder without HDMI fi Liza. 03:51.460 --> 03:58.300 And within this file we're now going to create our instance each and every view to a yes application 03:58.360 --> 04:05.410 starts by creating a new view is this which is in fact the root of the application itself and it created 04:05.410 --> 04:07.960 a new instance is really easy. 04:07.960 --> 04:14.350 First of all you declare a variable which by convention we normally call VM or just app and then we 04:14.350 --> 04:22.660 can create a new instance using the view function to this function we pass an object which is called 04:23.110 --> 04:29.230 options and we think this object we can define all sorts of different optional properties that allow 04:29.230 --> 04:33.950 us to basically create the desired behavior for our application. 04:33.940 --> 04:36.540 We're going to use a lot of different options in this course. 04:36.550 --> 04:43.760 But remember that as we've seen you can also browse the full list of options in the API reference to 04:43.820 --> 04:46.050 address future yes dot org. 04:46.480 --> 04:54.520 So the very first option that we need to set is L which stands for element and disruption expects as 04:54.520 --> 05:02.830 a value SPSS selector pointing to our age the AML element in that page where we want to mount an instance. 05:02.830 --> 05:05.020 Typically you will want to use a do you. 05:05.050 --> 05:08.330 And in this case I'm going to use an I.D. as selector. 05:08.770 --> 05:14.370 So I need up and error in our l view both HDMI and template. 05:14.450 --> 05:23.500 Now going to create a div with Heidi up so when the page loads are viewing this is going to be mounted 05:23.710 --> 05:27.420 in the div with I.D. up. 05:27.730 --> 05:36.370 And of course we also need to import our main dot J Yes fire source script like so we've SLC equals 05:36.740 --> 05:40.210 main that the G Yes which is the name of our file. 05:40.360 --> 05:48.760 So just to briefly recap if your application consists of a root view instance that we create using new 05:49.150 --> 05:56.350 view and data we can customize seeing different properties to the options object and as we'll see later 05:56.350 --> 06:03.490 on during the course the Arab can also be optionally organised into a tree of nested and reusable components 06:03.550 --> 06:09.850 which is going to make our life much easier when dealing with complex applications and other fundamental 06:09.850 --> 06:14.650 property of the options object that we need to talk about is data. 06:14.950 --> 06:21.310 And as the name suggests inside data we define all the data properties that we want to use with our 06:21.340 --> 06:27.880 application for example can define message as Hello World. 06:27.890 --> 06:35.350 And now that message is defined within the data object I can use it inside the div where our application 06:35.350 --> 06:35.920 is mounted. 06:36.100 --> 06:38.340 And there are several ways to do so. 06:38.380 --> 06:43.880 The easiest is to just pass the name of a property we've double curly braces. 06:43.960 --> 06:48.990 And now if we refresh our page you'll see that we get hello world. 06:49.000 --> 06:57.060 This is called the mustache syntax and is basically the most basic form of data binding text interpolation. 06:57.160 --> 07:02.550 And as you can see we also have deep V from our extension that is lighting up. 07:02.620 --> 07:07.300 And that's because the extension knows of course that we are working with future yes we could have of 07:07.300 --> 07:14.050 course put an interpolation inside maybe an HMO tag like so maybe in each one. 07:14.200 --> 07:20.000 And another common way to do so is to use the V text directive. 07:20.210 --> 07:26.350 And so you're going to need your HDMI tag and then inside you find that activity you want to use this 07:26.350 --> 07:27.500 case v text. 07:27.850 --> 07:32.170 And you have to specify the data portability that you want to use. 07:32.170 --> 07:39.190 Now if we refresh debate once again you can clearly see that both of them are basically equivalent even 07:39.190 --> 07:44.890 though to be honest most of the time we're going to use that mustache like this index and one of the 07:44.890 --> 07:49.740 cool things about this syntax is that we can also define expressions weaving them. 07:49.900 --> 07:56.860 So let's make an example I'm going to define in other data property value and I can pass it a number 07:56.920 --> 08:03.070 like five and just to be clear Yeah we can pass whatever we want whether it's a number a string an array 08:03.130 --> 08:10.720 boolean object and so on and I can now use value so that expression for example you can define an H2 08:11.340 --> 08:15.970 and you decide something like value times five. 08:16.240 --> 08:25.770 So let's refresh once again we get to twenty five of course because value at the moment is set it's 08:25.800 --> 08:32.610 five in the previous lessons we said that view yes allows us to build reactive applications and this 08:32.610 --> 08:39.680 means that when a new instance is created all the properties defined inside the data object are added 08:39.690 --> 08:45.090 to views of the activity system which will constantly monitor all the different properties define. 08:45.140 --> 08:51.570 And if the value of one of them changes the application will basically update the view showing us all 08:51.570 --> 08:52.360 the new values. 08:52.380 --> 08:56.750 So let's make an example and going to open the development console. 08:56.770 --> 09:00.080 They can zoom in a little bit like so. 09:00.390 --> 09:05.940 So to reference one of the properties inside the data model we need to use the name of the instance 09:05.940 --> 09:06.690 itself. 09:06.870 --> 09:15.360 For example app dot message like so you see to the console suggests US the current value is in the world 09:15.930 --> 09:24.060 and we can update it to something like new message you see it as soon as they press enter the page has 09:24.060 --> 09:25.680 been updated automatically. 09:25.920 --> 09:31.110 And of course if different parts of the same page are shared in a property all the different parts are 09:31.110 --> 09:32.910 going to update accordingly. 09:32.910 --> 09:36.580 For example app dot value equals ten. 09:36.810 --> 09:42.780 You see that now we get 10 and 15 and let's not make a couple of other examples of expressions inside 09:42.780 --> 09:44.470 the HDMI file. 09:44.520 --> 09:53.430 So yeah for example we can define another H2 and you say we can make something like the sum of strings 09:53.460 --> 09:55.510 like hello view. 09:56.310 --> 09:56.760 So. 09:56.810 --> 10:10.030 Or maybe some math like a store near something like 3 1 times five. 10:10.240 --> 10:11.840 Let's refresh. 10:12.310 --> 10:24.120 We can even do something like H2 and you can call math the rundown refresh and if we get the random 10:24.120 --> 10:30.040 number and as a matter of fact we can increase the complexity of this oppression as much as we want. 10:30.090 --> 10:47.020 For example message that split not reverse in large like so and yet again dot join like so let's close 10:47.980 --> 10:48.850 the quarterly basis. 10:49.330 --> 10:56.650 Let's go back to Chrome and of course we now get the reverse of the world clearly defining all these 10:56.650 --> 11:02.530 logic inside the HDMI AFIS is not the best idea especially if you're thinking about maintaining Europe 11:02.620 --> 11:03.870 even just a little. 11:03.880 --> 11:06.520 Of course we're going to see more appropriate ways to do so. 11:06.520 --> 11:11.980 In the following lectures and not only that I guarantee you that once you understood all the basics 11:12.040 --> 11:12.420 of your. 11:12.430 --> 11:13.110 Yes. 11:13.120 --> 11:16.260 What can we meet is going to be a pleasure because of its ease of use. 11:16.600 --> 11:19.000 As you can see working with text is pretty easy. 11:19.030 --> 11:26.040 But what if we had to work with images for example you have got a link of an image of our solar system. 11:26.070 --> 11:31.360 So yeah you can define something like image suits equals the linkup. 11:31.570 --> 11:38.290 So let's try to use this property the same way we've used message and value and let's see what happens. 11:38.380 --> 11:41.050 We can of course use an image tag. 11:41.100 --> 11:45.540 And so maybe we can pass image source like so. 11:45.680 --> 11:47.040 So let's save. 11:47.560 --> 11:49.650 Let's go back to cruel. 11:49.740 --> 11:52.140 Let's refresh and you see no image. 11:52.320 --> 11:58.210 And that's because in order to actually show the image we need to use another directive like vortex. 11:58.230 --> 11:59.520 Be used before. 11:59.670 --> 12:02.800 Which is called the bind. 12:02.820 --> 12:08.570 Then after the directive we had two points call on and the attribute did we want to bind the two. 12:08.670 --> 12:15.620 In this case so so that we just pass the property without curly braces. 12:15.630 --> 12:16.690 Let's now refresh. 12:17.220 --> 12:19.620 And entities are beautiful. 12:19.620 --> 12:23.070 So let the system which is actually quite impressive if you ask me. 12:23.190 --> 12:27.470 We can use v bind also with other attributes. 12:27.480 --> 12:35.950 Example Yeah we can define something like Link and any r h yes you do. 12:35.970 --> 12:42.030 Yes the talk we can now bind it to the H ref a tribute in an ankle tag. 12:42.210 --> 12:53.540 So yeah is going to be Lincoln and you can just set that active v bind like so that you can at official 12:54.620 --> 13:00.770 website and if you now refresh the page it is the link to your G Yes. 13:00.770 --> 13:03.130 So as you can see V bind is pretty amazing. 13:03.140 --> 13:05.350 And if it's that way then we can use it. 13:05.390 --> 13:11.020 If the Justice keep the name of the directive to just use the colon like so so I can remove it. 13:11.170 --> 13:11.450 Yeah. 13:12.800 --> 13:13.400 As well. 13:13.490 --> 13:19.750 And if we refresh the page you see that both the image and the link are still here. 13:19.760 --> 13:23.200 That was it for these first practical lesson about the future yes. 13:23.210 --> 13:24.170 See you in the next one. 13:24.170 --> 13:26.480 Well we're going to talk about events and methods.