Hello everyone and welcome back.
In this lesson we're going to create our first view instance.
We're going to use view by including it in our web pages.
We have a script tag getting the code.
We are content delivery network.
We're also going to talk about that activity a very important feature that will allow reach the e-mail
content to dynamically change.
Thanks to you.
Let's get started.
We are invisible to your code as you can see I have created a folder called the first viewing instance
which we're going to use in this lesson.
Let's now create a new file within this folder.
Just going to call it a low view dot HCM L and weaving this file we can get all the boilerplate code
that we need by typing h the e-mail and clicking on one of these options.
You can set something like Hello view its title and we can now right click on the file select coping
path and we can outpaced the path in Chrome like so.
And as you can see from the title of the window we've successfully opened the file.
Let's now go to the home page of user yes and address user.
Yes dot org.
This Web site is really great especially because it is the home of the frameworks documentation which
as we said is awesome.
Most of it if not all of it is written and maintained by one of the future yes core developers called
Cleese Fritz up and I definitely suggest you check it out because it contains a ton of useful information
really.
You can find a detailed and comprehensive guide installation instructions API reference and so on.
One important thing to keep in mind however is of course the version of you that you're going to develop
with as you can read at the moment the current latest stable version is to dot six dot nine.
However according to the frameworks development roadmap it seems like version 3.0 is going to come out
later on this year.
And in that case feel free to use it any way of course always use the latest stable version available.
Also because according to ever new himself that are not going to be any major breaking changes in their
eye level API.
And that's because most of the changes for version 3.0 are going to happen under the hood making the
framework faster lighter and more reliable.
So before starting with the installation itself I also want to show you the view J.
Yes Dev Tools page in Chrome Web Store and view the tools is a very useful extension for the bargain
view applications which is going to make your life as a developer much easier and which we're going
to definitely use in this course.
So be sure to download the official version you can recognize it by number of users and once installed
you also want to check the settings for the extension.
You can just check for extensions in your browser and then click on refugees as tools as you can see
once installed this little icon is going to pop up here in the toolbar.
And one important setting to enable is allow access to file a new array also which allows us to use
these debugging tool without necessarily app to have a web server running.
Going back to the installation page we see that there are several ways that we can include and use future
yes.
In other projects in this lesson as we've said we're going to use in Sudan content delivery network
which is no doubt the most beginner friendly of all just copy these lines.
And then you can paste it right here before the body closing tag.
And we're now finally ready to start developing as you can see I'm currently divided the screen into
parts editor and a browser.
And the first thing that we want to do is to create a GSR file which I can just call made with GSA inside
the same folder without HDMI fi Liza.
And within this file we're now going to create our instance each and every view to a yes application
starts by creating a new view is this which is in fact the root of the application itself and it created
a new instance is really easy.
First of all you declare a variable which by convention we normally call VM or just app and then we
can create a new instance using the view function to this function we pass an object which is called
options and we think this object we can define all sorts of different optional properties that allow
us to basically create the desired behavior for our application.
We're going to use a lot of different options in this course.
But remember that as we've seen you can also browse the full list of options in the API reference to
address future yes dot org.
So the very first option that we need to set is L which stands for element and disruption expects as
a value SPSS selector pointing to our age the AML element in that page where we want to mount an instance.
Typically you will want to use a do you.
And in this case I'm going to use an I.D. as selector.
So I need up and error in our l view both HDMI and template.
Now going to create a div with Heidi up so when the page loads are viewing this is going to be mounted
in the div with I.D. up.
And of course we also need to import our main dot J Yes fire source script like so we've SLC equals
main that the G Yes which is the name of our file.
So just to briefly recap if your application consists of a root view instance that we create using new
view and data we can customize seeing different properties to the options object and as we'll see later
on during the course the Arab can also be optionally organised into a tree of nested and reusable components
which is going to make our life much easier when dealing with complex applications and other fundamental
property of the options object that we need to talk about is data.
And as the name suggests inside data we define all the data properties that we want to use with our
application for example can define message as Hello World.
And now that message is defined within the data object I can use it inside the div where our application
is mounted.
And there are several ways to do so.
The easiest is to just pass the name of a property we've double curly braces.
And now if we refresh our page you'll see that we get hello world.
This is called the mustache syntax and is basically the most basic form of data binding text interpolation.
And as you can see we also have deep V from our extension that is lighting up.
And that's because the extension knows of course that we are working with future yes we could have of
course put an interpolation inside maybe an HMO tag like so maybe in each one.
And another common way to do so is to use the V text directive.
And so you're going to need your HDMI tag and then inside you find that activity you want to use this
case v text.
And you have to specify the data portability that you want to use.
Now if we refresh debate once again you can clearly see that both of them are basically equivalent even
though to be honest most of the time we're going to use that mustache like this index and one of the
cool things about this syntax is that we can also define expressions weaving them.
So let's make an example I'm going to define in other data property value and I can pass it a number
like five and just to be clear Yeah we can pass whatever we want whether it's a number a string an array
boolean object and so on and I can now use value so that expression for example you can define an H2
and you decide something like value times five.
So let's refresh once again we get to twenty five of course because value at the moment is set it's
five in the previous lessons we said that view yes allows us to build reactive applications and this
means that when a new instance is created all the properties defined inside the data object are added
to views of the activity system which will constantly monitor all the different properties define.
And if the value of one of them changes the application will basically update the view showing us all
the new values.
So let's make an example and going to open the development console.
They can zoom in a little bit like so.
So to reference one of the properties inside the data model we need to use the name of the instance
itself.
For example app dot message like so you see to the console suggests US the current value is in the world
and we can update it to something like new message you see it as soon as they press enter the page has
been updated automatically.
And of course if different parts of the same page are shared in a property all the different parts are
going to update accordingly.
For example app dot value equals ten.
You see that now we get 10 and 15 and let's not make a couple of other examples of expressions inside
the HDMI file.
So yeah for example we can define another H2 and you say we can make something like the sum of strings
like hello view.
So.
Or maybe some math like a store near something like 3 1 times five.
Let's refresh.
We can even do something like H2 and you can call math the rundown refresh and if we get the random
number and as a matter of fact we can increase the complexity of this oppression as much as we want.
For example message that split not reverse in large like so and yet again dot join like so let's close
the quarterly basis.
Let's go back to Chrome and of course we now get the reverse of the world clearly defining all these
logic inside the HDMI AFIS is not the best idea especially if you're thinking about maintaining Europe
even just a little.
Of course we're going to see more appropriate ways to do so.
In the following lectures and not only that I guarantee you that once you understood all the basics
of your.
Yes.
What can we meet is going to be a pleasure because of its ease of use.
As you can see working with text is pretty easy.
But what if we had to work with images for example you have got a link of an image of our solar system.
So yeah you can define something like image suits equals the linkup.
So let's try to use this property the same way we've used message and value and let's see what happens.
We can of course use an image tag.
And so maybe we can pass image source like so.
So let's save.
Let's go back to cruel.
Let's refresh and you see no image.
And that's because in order to actually show the image we need to use another directive like vortex.
Be used before.
Which is called the bind.
Then after the directive we had two points call on and the attribute did we want to bind the two.
In this case so so that we just pass the property without curly braces.
Let's now refresh.
And entities are beautiful.
So let the system which is actually quite impressive if you ask me.
We can use v bind also with other attributes.
Example Yeah we can define something like Link and any r h yes you do.
Yes the talk we can now bind it to the H ref a tribute in an ankle tag.
So yeah is going to be Lincoln and you can just set that active v bind like so that you can at official
website and if you now refresh the page it is the link to your G Yes.
So as you can see V bind is pretty amazing.
And if it's that way then we can use it.
If the Justice keep the name of the directive to just use the colon like so so I can remove it.
Yeah.
As well.
And if we refresh the page you see that both the image and the link are still here.
That was it for these first practical lesson about the future yes.
See you in the next one.
Well we're going to talk about events and methods.