FREE EVENT: Pixel8’s Basic Software Development Training (Morning Session)

face [Music] so we set this up first [Music] let's see [Music] copy [Music] [Music] but [Music] um [Music] [Music] [Music] hello everyone and good morning so this is me joshua from pixelate and i welcome you to pixelate's basic software training program so we apologize for a bit of a further bit of delay we were having some technical difficulties while setting up the live stream so now that all is going now or now that everything is up and running so we can now proceed with our training so before we begin please do make sure that you let your colleagues or your friends know about this live stream so that we can reach more viewers so that we can also teach more people regarding the technologies that we use here at pixelate so for today's discussion what we will be discussing is ujs so we will be tackling ujs for today for the entire day rather so for this morning what we're going to tackle is the basics of view js for the basics what we will be tackling is the how views or rather how view js works what vgs is its functionalities as well as how we can code using view js but before all of that we need to first set up our environment which was discussed in our previous live stream session so for those of you who were just or for those of you who are new to the live stream or was not able to attend the previous live stream what we will be doing first is we need to set up our environment first for creating a view js application so we we you a or we will be providing a handout for you in terms of a render we will be providing a view js handout for you in order to use it as well as to guide you on how to set up your vgs environment in the handouts also we will include some example code as well as some sample snippets rather and as well as comments on how to install and then set up view js itself so we will providing we will be providing you with the links down below later so aside from that we will be also tackling vue.js in advance in terms of logins as well as the pc or the advanced usage in terms of using plugins so what we do what do we mean by plugins so in terms of plugins what we will be talking about is in specific view x as well as view router so in the afternoon session we will be tackling those two as well as what components are so those are the or rather those are the topics that we will be handling in the afternoon session but before we jump into those we need to start first with the basics and so to begin this training we will now be starting with the js so before we begin with the lecture itself we need to first set up our djs environment so we will we will be providing you with the link to the handouts itself in order for you to follow along as well as to guide you into setting up your vgs environment so [Music] so as you can see we have here a training handout or we will give you a training handout so this link will be provided to you in the comment section below we will be sharing them with you in order for you to view this training handouts so in order to or rather guiding you simpler in order to guide you into or rather what do you mean [Music] to give us uh to give you a basic rundown of the handout what it contains is commands for setting up view js so first what you need to do is you need to install node.js you might ask what is node.js so nodejs is a system that allows javascript to run alongside the machine itself so it gives us much more capabilities aside from rendering into the browser itself so we now have access to the machine itself not just the browser so after that you will also notice that we provided in the handouts the installation of git which was previously tackled in the previous live stream so in this case why we added git here is because we will be using our git repository which was used previously in order to implement our vgs code so next what you need to install is the ucli so in order to install new cli you need to first install node.js and then use that to install ucli itself as a global component next for the in preparation for the afternoon session we will be installing in advance the view x as well as view router inside the project that we will be creating and then next you will see the commands for creating a project as well as running a project also you will see in the handout some views or rather some basic components which are as you can see right here we will be sharing them with you in order for you to try them as well as to implement them yourselves later on if you have time you will be adding these as well and then we will be implementing them ourselves so you have a lot of basic uh what we call these basic functionalities for ujs aside from those you also have this component life cycle which we will be tackling later on we will be explaining to you how you or rather how what a new life cycle is aside from those you also have like life cycle books which are hooks that are inserted based on your current life cycle so we will be explaining all of these later on you also have computed methods and then or you have computed properties as well as methods so you have some short descriptions here as well as sample code so all of these material materials will be provided to you in order to help you with your vjs development so you have the or you have sample code here for passing data child component as well as you have data or as many as you have examples for passing from and to uh every component so once we clear that up what we'll be using next is view x so as you can see here we have view x this or rather view x will be handled in our afternoon session so you will also see in the handouts the basic uh rather you have a guide here for brother for a guide for guiding you as well as to tell you what to do and then you also have a description for the core concepts here you have states getters mutations actions and modules so later on we will be tackling them as well so okay so aside from that we also have the setting up of state getters mutations as well as actions so for the view router you will be tackling them also so in the later part of our uh in a later part in our discussion new rocker will be tackled as well so we will be explaining to you what view router does and what it can do to your application to make it behave as a single page application so we also have here how to set up view router we also here have how to add routes dynamic routes as well as programmatic navigation so we have all of these input or we have all of these prepared for you in order to guide you in our in your ujs development so so okay so with that in mind we will not be you cannot proceed with the basic bjs training itself so uh so okay there you go now that we have that out of the way uh it were all right there are the links posted already posted in the left document parasaur handout [Music] [Music] so with that in mind we can now proceed to setting up the vgs environment so starting with that what we need to first do is install node.js right so the first step would be to install node.js so where would you or rather how would you install node.js so [Music] in order to demonstrate you simply need to head over to node.js dot org and then once we go through here you simply need to click the lps version we recommend lts in order so that your nodejs build is a stable one so we don't have that much complications when it comes to development now once you have your note up and running what you need to do next is to do the following now that you have your node.js up and running you simply open a terminal for us to install the vjs cli so once you have your node up and running you simply type npm space installed space dash g and then you type at view dash cli so in order to demonstrate we simply need to head to view cli which is this one right here so all of these urls are provided in the handouts for you to follow along so once you follow along that once you go with the urls themselves you will see that they have this command as an installation guide so see we need we simply need to copy this command and then to run it in our terminal so if we do that we now have this command right so what we need to do is we simply copy the command and then we paste it on the terminal of buffer on our terminal and then we press enter now while it is installing what we need to do next is to install git so for those of you who have not installed git yet you may head over to git if i'm correct git dash scm so you can head over to that link or you can refer to the handouts to go to the download link or to go to the website and then to hit the download button so now that we have our git uh now that we have our git up and running what we're going to do after we set up the git is we need to create a project on that git repository so while our meanwhile while the ucla is still installing we will head over to our repository so he we proceed to [Music] let's say here so let's create a folder around here so best let's see so here we have an empty folder right so what we need to do first is to clone the repository that we were using in our previous live stream so for those of you who are not yet or just came to this live stream for the first time we will be sending you the name as well to the gitlab repository that we will be using so we need to head over to gitlab so the link for this url or rather we will provide the link to this url in order for you to follow along as well so this is a public repository so you can view it anytime so once that once we have this repository up and running or we have this gitlab website now what we need to do next is to clone this in our local environment so in order to clone this we simply need to click this button right here which is the clone with https option and then once you got that done you need to head over to our folder here which is our empty directory of choice or for those of you who want to use a different folder you may do so as long as it is empty so what we need to do here is we need to uh we need to open a terminal so we open it terminally what we're going to do next is we're going to type g space clone and then we replace the link itself so one way of pasting the link is to simply hit right click in your terminal now once you've got that down you simply press enter and then we wait for git to clone the repository so for those of you who might be encountering errors or issues one common issue with gitlab is you may not be able to pull the repository in case you don't have an account so that's one common error that we have so in order to prevent that you simply need to register an account to gitlab.com which is this website right here you need to create an account for gitlab next once you have an account for gitlab in order for you to push your branches to the repository itself you need to contact us in order for us to add you to the repository itself so you simply need to add your or you simply need to tell us your gitlab username and that's all we need in order to add you to this repository so for the purposes of this training we will be using this repository the entire for for the entire duration for the previous session that we had in the legs or for the previous training session previous training session what we did was we created this repository as well as introduce you to the basics of git so for those of you who are new to the live stream you may refer to that previous session in order to guide you in using git as well as to catch up along so it's always up and running so you don't have to worry about that so now that i let's see so now we have cloned our gitlab repository right so if we head over to our directory you will see that we have a gitlab repository right here right so we need to simply head over to that directory and then we need to type the space branch so for now you will see that we have a main branch so in order to get all the branches we need to simply type the patch but since i think become the entire repository you already have all of them so heading over back to gitlab you will see that we have several branches already up and running here so you will notice that we have a branch for activity one so for those of you who would like to participate with the activity one we also provide we have we will also provide the link the activity one in order for you to do that as well also for the purposes of the basic training as well we will have an activity or we will have another branch suited exactly for the activity in gjs so now that we have our git lab or now that we have our git up and running we can now check back to our ucla installation so just in time so we now finished our installation of ucla now in order to check that your ucla is up and running you simply need to type view and then press enter so what view will return to you is a help text so as you can see here you now have a view cli up and running so now that we have our git up and running as well as we now have our view cli ready to be used let's jump first to git in order to set up our environment so for the git or later on in the activity we will be giving instructions as to how to set up your git report or your git branch in order to comply with the activity as well as the instructions for the git player for the view application that you're going to create so yes you've heard it right we will be creating our own applications so for the purposes of this training we need to first set up our environment so now that we have our ucli up and running we simply head over to any repository or rather any blank directory of our choice and then we need to add a folder so let's say let's let's say let's name it as view something like that so any name will do as well so we simply head on inside the folder and then we open a terminal now that we have our terminal up and running we simply need to use the following command so we need to type view space create and then simply type a folder name so if you take a look at the training handouts scroll this back upwards in order to create a viewport in order to create a project you simply type view space create and then the app name itself or the folder name so that's what we're going to do as well so if you create let's say u view dash so you simply now wait for the view to initialize our project so while initializing the project you will notice a or rather there will be a set of options that will appear in the terminal as we're setting up the view application so this is what you're going to see in your first new setup so you simply need to select the view tool now you might ask why do you do for the purposes of this training we will be using view 2 in order to make sure that the plugins that we're using later on in the end in the advanced training or in the advanced training module which is the ux as well as view router those two modules are compatible with youtube for now so for later on we're going to upgrade them once they are already up and running and have their own stable versions so for now we're going to settle with youtube so we simply select youtube and then we're going it's going to ask you for the package manager you want to use so in this case we're going to use npm you may also use yarn if you like so you may ask what is yarn yarn is basically the same with npm but in terms of performance and yarn is much better compared to npm but since we have npm up and running already we will be using npm instead so while the cli is building up our ujs app we can head over to our let's see we can now head over to discussing first what the training handouts contains so it's just a short overview so later on as we discuss and as we go along we will be tackling all of these things so you have a complete guide here or the basic rundown of a view js application so you have class binding you have input binding you have also element visibility you have event handling you also have conditional rendering so you have all of these capabilities built into djs so what that means is your vue.js is not just a simple application as you might think it is it's not just html combined with javascript so it's not that it's not like that at all so what do we mean by that what it means is your view js app is not just a static content it is dynamic as well as reactive so later on in our discussion we will be discussing what those two mean so and why vjs is like that so let's see it's not this one so the other terminal so while it is installing i think we can now proceed to our discussion so so now that our ujs is some power now that our view js environment is still installing because it's going to take some time based on your it depends on your machine so for those of you who have faster machines this process can [Music] can be just a short one but for those with a bit slower machines this can take up some time so while the environment is still cracking up we cannot proceed to our discussion so so let's okay stop there it is so again let's see okay so again good morning and it is i joshua your software engineer supervisor here at pixelate and we're going to discuss this time djs so beautiful view isn't it i think so so in our case it is indeed a beautiful view not just figuratively but literally so okay it's the temperatures [Music] is it nicely yes let's try and take it down ah it really is nice okay so there are i think [Music] is a bit noisy it's rendering twice so anyway so going back so you might ask what is you so now that we have the technology we shall not ask the question what is that technology so again going back to the question what is you so we're going to answer that question so you is a progressive framework or a progressive framework for building user interfaces what do we mean by progressing progressive in use definition means it can be plugged into any part of existing code so what do you mean by that in uh imagine that you have an html website right so imagine that you have a header a body as well as a footer so that's the basic layout of a website right [Music] because the laptop is quite messy [Music] oh so going back i think it's okay so let's set up the camera first let's see it's good okay so it's perfectly fine thank you guys so again so going back oh okay so what do we mean by progressive it can be plugged into any part of the existing code right so what it means is simply if you have an existing html code let's say a header a header part you also have a footer part as well as the body part you can plug your ujs app to that application without let's see you can plug your vgs application directly to that page without changing your code at all so how is my ass how is that possible view js itself is just a framework meaning it is just a job file that we attach to any website so that means you can plug your view js applications anywhere as long as it has an id so later on we will be discussing that part also vue.js library focuses on the view layer only so in terms of in terms of the view layer what it does is it also it only manipulates the view layer so for the view layer what you can kind of imagine it as the itch or it's it's the part where the it's the part that you can see in a browser so that's what it modifies only so that's what it focuses on okay so aside from that ugs can also power sophisticated single page applications so you might ask what is a single page application so for those of you who don't know what a single page application is it is an application that the that requires no refresh whenever you change a app so what does it mean so every time you click a link it redirects right so it loads a new page so for the single page applications that is not the case what happens is you only load the page once and then the application never refreshes anymore so that's what it means when you have a single page application meaning you simply swap components based on the route you want to take so that is what a single page application is so you might jump of course you will be asking the question why do you if you if you consider the other frameworks you also see the same question so you will be asking why you well in our case we want to teach you view because of these six features or these six reasons first is the easy learning curve pure js is not that difficult to learn at all it has it has an easy learning term so that means you won't have to you won't encounter that much issues when developing ujs applications next is scalability for the scalability ujs can be easily scaled based on the context as well as based on what you as a developer needs in an application for flexibility view js can handle dom changes as well as handle data changes easily without breaking that much so that is what we mean by flexibility you can plug it to any content you can plug it anywhere you can plug it simply as it is or you can create a standalone for it simplicity next you have simplicity right so view is not that complicated when you see it or rather when you apply it to yourself or if you use it yourself it only has three components it only has three sections per component so later we will be discussing those also community as of now you have a if you check the github repository of vgs or if you check the community of bgs it has a lot of members and it is still growing so it's a large community you won't have problems that much when it turns in terms of maintenance so we won't be encountering that much issues as well as we have several other people who are having the same issues aside from us so lastly is reactivity so reactivity is something that ujs can do so you might ask what is reactivity reactivity is a feature of wgs that allows you to change content on the fly so later on we will be this we will be showing you how it works so how does it work so here you can see a basic view js component file a view js file or rather a dot view yes so a view js file consists only of three sections you have the template you have the script and then you have the style so for the template block that is where we will add the html elements of our component for the script block we will use that block for javascript code also the script block uses the new script syntax in order to implement its own functionalities and then for the style block it is used for cla or for css styling also css styles are applied only to this specific component so that is one powerful feature of ugs meaning you can add styles to the component alone without affecting the other components styles so in a sense you have a sense of isolation between your components so ugs also has what it or has what you call the declarative rendering so for those of you who are not yet or for those of you who have never encountered the let's say the term yet declarative rendering is a system that enables view to declaratively render data to the dom what it does is it clicks data and the dom under the hood therefore making the dom reactive so what do you mean by that so example here you have a simple component right so what we did here is we have a message block right so in the top corner you will see that we have this message block rendered here so what it does is rather what this means is we're binding the message variable in the script to the dom itself as you can see right here so if you see the arrows what it says here is that the message value is set now once we set the value the dom re-renders and use the updated value without doing anything at all so that means upon loading of the component the data is already binded to the dom meaning whatever your data content is that is what appears in your dom as well so in order to demonstrate [Music] so in order to demonstrate that okay so okay don't see okay so now that we have our ucli up and running we now have to running our view application so just in time with our discussion so in order to run our view application we simply need to use the following command as you can see in the handbox so simply need to use the view npm run server right so before we do that though we need to edit something first in our application so we need to head over to the application we created and then we're going to edit the package.json so we need to edit this file so we open this with notepad for now let's use notepad so then now that you have this line right here you will see in the handout that you need to edit line six so you simply copy this command here and then we replace line six with that one so we count from here one two three four five six so you edit this serve line right here so we grab this one and then we replace them with this one right here and then we hit save once we do that we now proceed to running the application itself so we simply type npn space run and then we type server what it's going to do is it's going to serve the application there okay so we need to get inside i'm in the wrong direction so we need to type npm run and then serve so what it's going to do is it's going to start a development server that we will use in order to develop our application also it features what you call a hot reloading so in terms what do you mean by hot reloading hot reloading is a feature that allows you to develop code on the fly without refreshing the application itself so if we head over to this link we simply go to school space now for for now so we head over to localhost 880 so what you're going to get or what you're going to be greeted with is the js app itself so now that we have our ujs app app up and running we now go to our fav or we now open this directory itself with our ide of choice we can open it using sublime or in our case we're going to use phpstorm so you can use an ide of your choice but for those of you who can or rather for those of you who want different ideas there's no problem with that so ib in choice is a matter of personal preference so the fan is lovely so once we did once we have that we're going to open and then we're going to head to our test directory so we need to head over to temp hopes from to open the wrong project so simply open it again and then okay let's use sublime instead so we need to open our directory here right so you need to open a project by choice so we click open so we head over to our test directory here so let's find it okay then you proceed to this one oh no it's not this one it's here yes okay this one so now that we have our project up and running you simply now wait for it to load so i apologize okay so it's now loading so now you can see that we have a ugs app right now so while waiting for it to load okay let's wait for it to load for now what we're going to do is you will notice that package.json is edited right so now that we have edited the package json we now have a basic ugs app so to give you a basic run through the public is where we will add the cut icon and index.html so it's the public directory but what we're going to focus on is the source directory so you will see that you have the application right here you have assets here which are the assets that you will be using in the activity or in the components themselves you also have the components right here so in order to demonstrate let's edit the hello world component so here is our app right so let's try removing something like this so let's say let's focus on the app that we first so here you will see that you have a basic app right so you have a template you have a script which is this one the template you have this script right here and then you have the style right so now that it's up and running we can try editing this right now so let's try and comment up this part first and then hit save and then let's remove the component here as well and then let's remove this one so let's hit save so what's going to happen is it's going to rebuild our application and then what we're going to see is so let's wait for it oh right it's quite slow oh it's still combined okay so there you go so as you can see the content is now gone right because what we did was remove the component so what we're going to do is we're going to apply our own component here instead so the first step that we need to do is we create our own component so we simply head over to the components folder and then we add a new view component [Music] so let's say let's type it as let's say what difference this is the most difficult part of the developer finding names so let's try using index instead so now we have an index the glue right so as you can see you have a three sections for the index file you have a template which is this section right here you have the script which is this section and then you have the style so for the template what we're going to do is let's try adding a simple d so now we have an html content right and then let's add an h1 let's say hello something simple is that so now we have a basic vgs component right next in order to make it appear in our page right here what we're going to do is we're going to import our component so we have this import component here right so we simply remove the comment and then we replace hello world with index right which is the file name and then we're going to specify the file itself which is as you can see here we have index from the index.view right and then we're going to grab this and we're going to use it here so we remove this so now you have index imported in our component next instead of using the hello world component we're going to replace index here and then we remove the message so what did you so to explain or you might ask brother what did you just do so first what we did was we created a component file which is the index.view which is this file right here and then what we did was in our main component which is the app.view which is the one that is rendering all of this content that you see on the screen imported the index component inside the app so now you will notice that the index is imported inside the app.view and then we declared it as a component of the application right here now that we have declared that as a component we can now use it as a component itself to the template block so what it means is since we have declared it here whatever the content of the index that view in the template section will also get displayed here so that's what it means when you use components in a view instance so now as you can see we have a hello right so hello so now that we have our environment ready to go and up and running we can now experiment with the handouts that we gave you in order to demonstrate what vgs can do so going back to the training handouts you will see that you have the activity here as a basic right so let's start with that so what is reactivity so in order to demonstrate you can add a simple reactivity feature right here so let's say you want to let's create a real time or rather let's create a view application that displays the current time so as you can see here in this example what we created is a date and then you have the null and then the second interval right so we're going we're going to go with that first so in order to implement that what we need to do first is we need to declare a data so we need to declare data function so data is a block where you declare all of the variables that you can use in a template so for example let's set here date once i declare here that you have a date for example like this one or rather wrong since it is a function you need to first return an object so in a data function what you need to do is to always return an object so in this case we're going to return let's say the date let's say for now it is null so like that so now we have a null date right so while it's still right there or rather well we declare the date right there what we're going to do next is to replace or we're going to add another section here so let's say the date is now here's the important part we add a double curly break curly brackets right here meaning whatever is inside here is the is considered as a javascript so in this case we're going to add the variable name here as you can see it auto that's the variable so when you say date inside the curly brackets it refers to the date variable right here so for now it is set to null right so what's going to happen is it's going to display nothing here so [Music] as you can see the date is blank right so since it is blank what does what this means is the variable contains nothing so in order to populate this we need to add a function that adds a value to it so let's say we have let's say [Music] something if you type to let's say adjust for testing purposes let's say a string a i am the date is let's say what takes day so september september september 4 2021 so we have a static content right once we do that the value gets updated here as well so if i remove the specific value from here and hit save what's going to happen is it's going to update the values as well so that's what it means when you say your dom is reactive meaning it reacts to the changes of your code or to the changes of your variables so in order to demonstrate its reactivity we're going to add a function that increments the current date in order to create the illusion that we have a date up and running so in order to do that we simply need to create a set internal function so let's grab this one so now that we have copy the function we need to add a mountain so you may ask what is mounted so mounted is a hook meaning when you say hook it is part of the view life cycle which we will be tackling later on we will be showing you what the view life cycle does so in in basic language terms the mountain is the part when or rather where the dom is already loaded meaning the data it's or the html itself is now ready to display content or rather the data is already displayed once that we do what once that function or once that state is reached in a ujs app if you have declared a mounted function in your view js component whatever is inside of it gets run through as well so in this case let's add a function that creates a set interval which what which is basically displaying the current date every one second so you have a set interval here and then you have a function that populates this date meaning we're pointing to this variable right here and then we're assigning this value so we created a date object and then we format it to the local stream so this function will run once every second so once we do that what's going to happen is let's just put this back to now for now once we do that what's going to happen is we're going to have this so as you can see i am doing nothing currently it's like my hands are up here but the dom is updating constantly so since we added the function that red that computes the current date every single second you get the illusion that we have a clock running in our dom so that is what it means when you have a reactive component that is one of the most powerful features of vgs it allows you to bind reactive content to your html so one use case of reactivity is imagine if rather imagine you have a let's say what we call this you have a text that you want to change values over time now instead of doing that manually by clicking something or triggering an event you have a data that is bound to the dom directly so you have this one so as you can see we're not changing anymore any content but it still keeps updating itself right since the date already since the date variable is bound to the dom which is in this case here here's the data right so we have the variable here and then we declared it as an element to the html at the top in the template right so since we have already bound the data as well as the template they are not connected based on the date variable we now can manipulate the contents of that variable so in this case we added a set interval so what the set interval does is it changes the value of date once every second so whatever the current value here is it gets transferred to the date variable and then it updates itself once every second so imagine that you started with null right so it is bland so it gets rendered blank initially then once this function runs the value of now gets overridden with this value and it constantly gets overridden every second so that is what is going on in this example that we are in this example demonstration here the date value is constantly updating every single second and changes value based on the function itself so that is what it so that is what it means when you have a reactive a ujs app so in the handout you will also notice the input binding so when you say input binding imagine you have a form so you have a form right so you have a text box there or a input type text in a sense and then you have a submit button so in terms of input binding we can bind data directly to the html's values themselves so in order to do that you simply need to add an input element so let's add an input type let's say text and then in order to bind this one you need to add a v model effect so for now we have an mpv model right so next we need to add the let's say input text so let's declare this value so now we have an input text right here and then we add the v model right here so what we did was we bound the data directly to the form itself which is in the form of input so in order to display as well what it can do we can add another div here let's say uh h6 new type right then then let's bind the input text here so let's add the input text so once you hit save if we go back to our application you can see this one here right so if i type something here guess what happens that is what you call input binding whatever your content is or rather whatever the content of your form is or your input is it gets bound to the variables themselves so if you declare that variable or if you use it in a different part of your component it gets updated as well so now you have two options now you have two elements combined together so if i remove this one as well it gets updated also so they are reactive meaning they are connected together whatever the value i set here gets set as well to the value below meaning they are connected with a single data variable so that's what it means when you have an input binding so let's say hello there so it gets updated in real time as well so whatever the content here is that is free for that that will be the content of the other variable as well if you declare it in a template so here i am so like that so that is one example of input binding so it doesn't just apply to inputs themselves you can also use them in select you can use them in let's say range of buttons check boxes so you can use them in any part of an in any part of a form so aside from input binding you also have class binding so what is class binding class binding basically is a way of binding classes to your elements based on a certain conditions so in this example let's try to manipulate the input that you just created so let's say you want to validate if this has content right so first what we're going to do is we're going to declare classes so let's say let's use this classes right here so first we need to declare these styles right here so as you can see what we did is we created two styles right we have the green border which signifies that it all is well and all is good and then we have a red border which means that something is wrong so now that we have declared that styles what we need to do next is to bind that to our input template or in our input html value in the template so you can see here that we have a class right so we grab this one and then we paste it here so i will be explaining to you how this works you can see that we have the class right here right and it has a column here as well so the column here indicates that we are binding variables to our property as you can see we have the name right and then we have the exclamation point name so let's replace this with our values here like so meaning okay let's rearrange this form for maximum readability there we go so going back in order to in order to make a graph what this does [Music] here is the class themselves right so we declared the classes green border as well as the red border so what we need to do if you have something like this is first you need to add a column to declare that it is a data binding and then we're going to add an object inside of it indicated by the curly brackets here so let's add a space here instead in order to make it more visible so now you can see that they have they are an object rather so it is an object next we're going to fit the object with key value pairs so in order to do that you need to declare the key as the class name itself so in this case we have a green border right so we use green border as the class name right here and then the other value or the the value of that key must suffice either true or false meaning if the variable here satisfies as true this class which is the green border appears but if it is false the class or rather if this input text is false the class here is not added to the element so what does it what do you mean by that so in order to show you what it does in real life so you can see here that our input element currently has a red border now why is that that is because we declared the specific condition that if the input text is nothing or contains nothing which is indicated by the exclamation point or in other terms a falsie statement it will display the red border but if the input text returns a not m or a truthy value meaning it contains something it will display the green border so if we go back here if you type we word something you will notice that the border color change to green right so in order to emphasize we can apply this same class binding to our element here like that so like this one [Music] let's move this so like that and then you'll see like that oh bro so instead of using the border let's say red text so let's add another class here so let's say text color or other color right and then let's add a green text and then let's set it to color green now we have two classes right so we need we simply need to grab this class and then we paste it right here and then for the red one we grab this one and then we paste it here right so once we do that you have a red text right because it contains nothing but if you type something here the text turns green as well as the border turns green so that is one example of input binding or rather class binding so you can bind classes to your elements based on certain conditions so you can change classes on the fly so you can change classes on the fly using code conditions so in this case so in this case okay so in this case what we did was we bound the conditions based on the value of the input right so let's say if the input if the input value contains a text name hello or any text for that matter the border gets or the border turns green so you have here a green border and then the text as well turns green because that is what we indicated in our conditions right so if we go back to the code we bound the green border as well as the green text to the element so that's what we did next if we have a falsie value here we remove this one it turns red because what we declared in the code is if the false if the input text contains nothing or it has a falsie value the red border appears as well as the red text so as you will notice it just switches classes on the flag so that is what it means by that so that is an example of a class binding next you can or we have element visibility based on the input binding so let's say you have a or rather we can what we can or to explain further element visibility right so you can hide or show elements based on input bindings so let's say you want to display this let's say this element right here you want to display it only if the user has inputted something but if he does not input anything we will not display this yet so in order to demonstrate we can remove the clasp for now since we can do that so in order to do that we simply need to add a visual [Music] visual property and then the condition for displaying it is if input text is true meaning if there's nothing here it doesn't display and the soon as soon as i type m something or i content here it appears uh hello let's see so as you can see like that so okay so what it means is that if the input if the input value here or rather the text box contains nothing like this one it won't display anything at all but if we add let's say let's add the text let's say text like this one you will see that the html gets displayed as well but as soon as we remove this the element hides again so that is what you mean or that is what is meant when you say element visibility based on input binding so you can display lf you can display elements based on the input bindings themselves so that is another feature of ujs so event handling so in this case what are what are events so events are stuff that triggers or that gets triggered when you do certain actions for example a clip or something like that right so let's use the most basic uh something called this let's use the most basic event instead in order to demonstrate what vgs can do when it comes to events we can use the button right so let's create a button here so button add click let's say show alert select this and then let's add an html content here next we're going to create methods now you might ask what are methods methods are a section of a ugs component that allows you to declare functions that can be used in the template blocks here so if you say show alert here if you see a click rather if you if you use a click which is right here you simply click the or the what happens is if you click the add click or what do you mean what you call this if this event gets triggered which is a click meaning if you click the button this func this method gets triggered so right now we don't have a show alert mod method yet so what we're going to do is we're going to create that so as you can see we have a show alert function here right so like this one next is what we're going to do is let's say alert hello so what happens is if we click this button there should be an alert right so there's nothing anyway so it so let's try refreshing it for now there you go so if you click the button so what we uh let me let me then let me run through what just happened earlier so we have a button right so this button is that so if you click this button what happens is this one gets triggered so the click event gets fired now when it gets fired it's going to ask for a method which is the show alert that we declared here so if you click the button it fires the show alert method which is below here now once the function is fired what the function does is it shows an alert so it displays the alert that it displays an alert model at the top and then shows a string which is hello so that is what happened earlier so if we try it again if i click this button the hello appears so that means ujs can handle events as well so it can handle native events it can also handle vjs events so we also have a conditional rendering so you might ask what is a conditional rendering conditional rendering is a fancy term used for displaying html contents based on certain conditions so this one is an example of a conditional rendering so if you take a look at the example here okay so okay so we have a click me right so let's add another button let's see okay so let's just close this one instead okay and then let's add this button here okay so now we have two deals right so that and then if i let's add a quick event again so so [Music] then let's just leave it empty for now toggle let's say toggle element and then let's say click me too so now we have two buttons right so if you take a look oh so it's an error still an error okay okay okay so let's add a current element here there we go so let's rearrange this so right so now we have two buttons right so if we click the the second button which is this one the toggle element method is going to get triggered so since we don't have that yet let's declare that first another element so let's let's say like that now what's it going to do is it's it's going to flip the value of the data component so in the data let's declare a let's say show element for now let's set it to false meaning the value of this is a false one right so what we're going to do in the toggle element is to simply flip that value over so this the show element is equals to the opposite of the element so [Music] what we just did is every time the function gets triggered the opposite value of the variable here is stored to the component so if this one is true it becomes false and then if this one is false it becomes true so now that we have that we simply grab this one and then let's add a let's say h let's add another div here let's say this one hello hello there something like that so now that we have a basic tip what we're going to use is an if statement so let's just let's just paste this here so what did we just do so what we did is we created a button that whenever it gets when when or rather that when you click that button the toggle element function fires right so this that show element gets flipped so if it is false it becomes true and vice versa now once we click the button the value here changes and then the value here has also changes so what it does is if you click this button oh so let's refresh first the element appears and then if i click this again it disappears right so that is what you call conditional rendering so conditional rendering is a function of a part of ujs that allows you to render content based on certain conditions so in a sense it is similar to class bindings so if the show element value here is true then the entire component or the entire html block here gets rendered but if it is false it gets de-rendered so you may you may ask or you may notice as well that the visual and the viv is kind of the same right so in reality they are not the same at all so in the columns in the view js handouts you will notice that it has a class here regarding vf versus visual and what to use between two so you can just take a look at it and then you will see the difference between two so later we will be talking about them as well so for now let's leave it at that next we have list rendering so one common uh one rather one common html property that we use is we render lists right so if we render a list we need a list right so what we call this yes so as you can see in the example you have a list of objects right here so we have three objects and then it is an array of objects so to demonstrate this rendering or rather to demonstrate what it means to render this list right here you can head over to our code here so let's create a and then what we can do is let's see let's add a what we call this so let's let's deal with the template later let's start with the data first so let's say we have tasks so we have an adding in tasks right what we're going to do is we're going to add objects to it so [Music] let's say uh so text let's say code and then another text let's say develop or rather test or wrong let's say build and then we have another object let's say text and then let's set it to deploy so now we have three objects right so with these three objects we cannot create our own list so we can render this as a list so to give you an example or to demonstrate you simply need to create an unordered list the ul right so we have the um so now we have an unordered list right next we're going to list an item which is the li and then what we're going to do is we're going to add a b4 so what does v4 mean b4 is a view directive for looping arrays as well as for creating loops so if you create a v4 you need to specify what to loop so in this case we're going to loop the masks so what we're going to add here is we have a task in the array passes so meaning for every object in the task it is declared as a task variable here next we're going to add a key now key is a unique identifier in your object that tells you what the object is so in database layman's terms it is the id so it is the unique identifier it is the primary key so in vjs the key must have a unique value in order to in order for view js to track what content is moving and what is removed so in this case we're going to use the task that text meaning the key will be the value itself here as text since we can all conquer that the text value is unique right so they are all unique so you have code you have build and deploy next we're going to declare a object we're going to do the clarity rendering inside the li so let's set the task the text so there you go once we go back to our application you will notice that vue.js has entered our list meaning with only a short with only a short code like this one we can render as many items as we want so let's say let's add another so let's say evaluate once i hit save the value gets added here as well as you can see right here so now we have four items but if i remove this one as well we will go back to three items right so that is what you call this rendering so view js can list items and then render them accordingly [Music] so for the view component lifecycle we can head over to the link right here in case the image is a bit small so let's try and head over to there i think the image is kind of small so you can open this in a new new tab so very well so here you have the view image life cycle so what we can uh for the view image lifecycle the init is the start of the application it is where the events and the views like and the view life cycle gets initialized so in order to jump to that part of the initialization you can use a before create hook as you can see we have the before create so if you use a before create hook whatever content is inside there gets fired as soon as the events and life cycle is initialized for every component or for that component next what is going to do is going to initialize injections and reactivity once it is injected you now have it created that means that at this point in time during the created let's say hook in that point in time the component itself is already created but there's a difference you see below that it has a template or it has a condition so it asks if it has a template if it has a template the template gets compiled if it doesn't have one it compiles as a template but if in case it has a template option it gets rendered as a function so after it does that process you can inject in a b format meaning this hook is the part where the application or the component itself is not yet mounted to the dom or not yet included in a sense it is only created yet so it is not yet plugged into the dom itself so the next process would be to create to create the element and then to add that created object or that created component into the element itself so once it does that the mounted group gets triggered so now you have mounted so at this point in time your component is already visible so you can already see your component so as you can see here you now have mounted meaning the application itself is now mounted so you can now see it in the code itself so you can now kind of you can what you call this the elements themselves are now visible on your screen so that is the part of mountain so in case that you have a date change meaning the value of the data around here which is or any value here for that matter in case any value out there gets updated or gets changed [Music] updated gets fired so it is another hook as well so if you have an updated group you can fire that or the hook itself to expire once it is done the virtual rob is real the virtual dom is re-rendered and then gets patched or rather it's the other vienna so when they change the before update gets fired and then the virtual dom is re-rendered and gets patched after that the updated hook gets fired in case you want to do something after the data is updated but in the case of you want to do something first before updating the data you can use bb for update hook now once the app that unmount is called meaning you want to change component let's say or you want to hide the component or to destroy it the before a knot gets cold meaning before the element is unmounted this tube gets fired first and then once it is unmounted already mini it is gone from it is removed from the dawn the unmounted fire the unmounted hook gets fired so that is the basic view or that is the view js life cycle so from the top first you need the event you initialize the events and the life cycle itself and then the before fade gets fired next the injections and reactivity gets initialized after it does that the created hook gets fired and then it asks if it has a template option it's either a yes or no regardless of the choices or regardless of the values or regardless of the response of these two the before mount gets called once it is called the update element and or rather the element itself gets created and then appended to it so you have the component and then you have the component and then you have the element and then they get bound together so now the mountain the mountain hook gets called so at this point in time the dom is already updated right so you can see already the component at this point in time so whenever data changes while it is mounted the before update the before update hook gets cold if it is there as well and then once it finishes the virtual dom gets re-rendered and then gets patched meaning the values change and then the dom gets re-rendered based on the value of the change of data and then once it does that the updated hook gets fired as well so it just repeats that process until such time that the component is already unmounted meaning we're going to destroy the component so before it does that what it does first is it calls the before amount uh the before unknown they call this hook so it runs its functions as well and then lastly the component itself is not unmounted meaning it is gone so at this point in time the last function to be called is the unmounted hook meaning at that point or at this point in the life cycle the dominance or the component is already gone in the dome as well as it is not visible anymore so that is the vjs life cycle so as you can see you have hooks here as well right so if you take a look at the train handouts you will notice that we have hooks right here so you also have comments as well here to guide you in using the hooks so in our code we use the mounted hook meaning if we go back to the life cycle it is around here so at this point in time if the component reaches this point in the life cycle our function here gets called so it ah it is uh what we call this it is run through once so then that's the point in time but when the function finishes running that or the mounted hook is finished the dom is already mounted so it is now displayed so if you take a look at the script here we have comments to help you understand as well what happens in a view life cycle so the before create is called after the instance has been initialized as you can see in the life cycle also you have the created hook so the created hook is called after the instance is created you also have a before number which is called right before the mounting begins meaning before the element gets added to the dom itself now mounted is called after the instance has been mounted to the dom itself in the next you have updated so updated is called after and then a data change caused by the virtual dom right or the data change causes the virtual dom to be re-rendered and patched meaning if there are changes to the data the updated hoop gets called and then before amount is called right before component is instance is unlocked meaning removed and then lastly the unmounted is called after the component has been removed already so that is the view life cycle hooks so based on your needs you can customize them or you can update them based on your instances as well as needs so in case you for example you want to run a certain function before any display or before any data is displayed right so in those cases you can use the mounted book to run your functions and your code before anything else happens with the dom so in case you want to run something every time the data is let's say change you you use the updated hoop to fire a function which runs whenever and whenever stuff gets updated or when data gets gets updated and then if you in case you want to run something or in case you want to run a function once the component itself is destroyed you use the unmounted hook for that so aside from the hooks themselves you also have computed properties and methods so what are those so there is a key difference between computed properties and methods so as you can see here we have a short what we call this we have provided you a short definition as to the two items so computed properties are values which are cached based on their reactive dependencies meaning it only re-evaluates or rather it only changes its values when some of its rapid dependencies have changed so what does that mean let's say you have a list like we have a list of five objects so you have imagine you have an array of five objects let's say the example for let's say this example so you have all these three right in a computer property what happens is if the data somewhere along the way changes the property gets recomputed again but with computed properties if there are no changes to the actual area itself meaning this one the data here is still the same it is cache meaning there's no computation involved with that one meaning it only changes its or it only renders if the value has changed since the values did not change it is not going to recompute it whenever the dom refreshes so one example of this is let's say you have an array of 10 objects right imagine an array of 10 objects and then you added uh rather let's say you change the value for the other data so you have another data variable somewhere along your component and then that value change so what happens is if that value changes view js re-evaluates all of your data variables and then renders them to the dom accordingly so if it detects that your computed property has not changed at all it will not recompute itself anymore therefore saving you cpu time meaning since it is cached it only com it only computes once and for every dom refresh if the contents are not changing at all the value or the dom itself retains the same values without recomputing so in a small instance it may not matter that much but imagine if you have an array which contains let's say a million objects inside of it now every time what happens is if that arrow is not a computed property every time the dom changes the entire array gets re-evaluated so that is cpu costly and it's very cost com in a sense it is very costly in terms of cpu power because every time the dom changes the view js has to run the entire array of millions of objects and then displace them accordingly meanwhile if that array is a computed property it only the view js only needs to compute those array once and then if there are no changes to that it never recomputes it again it simply reduces the one which was computed previously so that way you save a lot of computing power and then you save as well done reactivity so to make the long to cut the story short as you can see here we have a tldr you need to use computed properties when functionality reacts to don't changes meaning there are frequent changes to the dom itself but you need to use methods when functionality is triggered by a user event so as you can see here so we have methods right methods are in other terms methods which are this one below here although the computed and methods are completely the same the difference is that methods has no caching at all meaning if you bind a method to the dom whenever the dom changes it runs the function whenever a rerender happens which is ctu intensive meanwhile computed properties only runs its function whenever it detects that the data has changed but if it does not but if it has not changed upon dom refresh it will not recompute those values again so imagine you have a millions again of area of objects so for the computed properties what happens is it evaluates the millions once but for the methods whenever the dom update or whenever there is a dom update the method itself gets called meaning you need to run through all of those millions of objects every time the dom changes so that is very city of costly so that's why we recommend that you use computed properties when functionality reacts to dom changes meaning you have a certain function that is dependent on the dom changes meaning it is based on the ui state meanwhile you use methods when the functionality is triggered by a user event for example a click for example you have different types of events so the click is the most common so that means if you have a click function or a function that runs whenever you click something you declare that as a method but if you have a functionality that needs to compute every time the dom changes you need to use computer properties in order to save cpu processing capabilities so as you can see here in this example we have a list uh let we have a rendering of a list right so we rendered a list here and then you can you will notice that we have a computed object here and then we have a function which is things to do so if you read the comment it says that this statement's result is cached and will only re-evaluate meaning it will only run this function whenever the sample list which is this list changes content otherwise if it retains its values it will never run through this function again every time the code or the dom changes so it only runs through once but if a change is detected obviously it's going to run the function again meanwhile if you declare it as a method that is the that is not the case so every time the dog changes this function gets triggered again and again and again and again every time the dom changes so that is one key difference between the two that's why we use computed properties to save computational power and then we use methods when we use when we use them for user dependent events so next here is what uh this one is what we discussed earlier the v if there's a special argument so as you may notice in our code here we have a v if right so we have a v as well as a visual so they are fundamentally the same they have the same uh fundamentally they are the same in terms of principle but functional wise they are different at all so if you uh go into this uh example v if is a real conditional rendering what do we mean by real real means in a sense that if you use a v if that that component gets rendered real or gets rendered in real time and at the same time everything gets initialized and de-initialized every week instance so if you take a look here events listeners and child components are properly destroyed and recreated meaning it is costly to use v if compared to visual because every time you use a leaf let's say you bound an element and then let's say v if right so you click a button let's say a button and then the v if is based on the click event which is what we did earlier right so what it happens what happens is if the component satisfies as true it will get rendered meaning it will create event listeners for that component and then it will render the child components as well so that means it is in a sense a lazy loading so you only in a sense you only load the component once the event itself has been fired or has been or the the condition to satisfy or the condition satisfies as true so as you can see here dom elements are properly destroyed and recreated so in other in other terms it is lazy so in essence dom elements which are being h10 themselves will not render unless condition is true on first load so that is the key difference [Music] so imagine you have a vf component and then it is set to false right if it is set to false once the dom initializes and gets displayed so imagine you have a dom which is displayed down and then you have a component which is based on a viv that component will not render as long as its value is false so that is the difference but if it is set to true then that is the only time the component gets rendered into the dom that is what it means by lazy so you only load the component once the condition satisfies as true so upon first load it will not display that component at all nor will it render it to the dom whereas the v show is a different case a component declared with a v show is always rendered regardless of condition meaning if you declare a component as a visual upon first law in the first initialization of the component that component is rendered as well but the key difference is the key difference is it uses css to toggle the elements on and off meaning it uses the css capabilities which is visibility to show and hide elements so in essence event listeners and child components stay rendered regardless of condition so on first load if you have event listeners for that component and you have child components they get rendered as well so they stay there until the parent component is destroyed so though elements stay rendered when toggling the visibility on and off so that is the key difference for visual and vehicle so to recap v if properly creates and destroys your components including its event listeners so in a sense it is lazy loading whereas visual is is always rendered regardless of condition including its event listeners and child components so the only way to turn them on and off is using ascs visibilities so to make the long story short we use visual if you need to toggle something on and off very often very often meaning you need to display and to hide content all the time or most of the time or in in weird cases all the time but if that is not the case use v-if instead meaning you use b if you if the component is not supposed to appear and disappear that much so let's say it only appears based on the based on a user event so we're not sure if that's going to display immediately or not so that is one of the cases where you can set the visual versus v if so that is the difference so next we have components so components is a different part of ujs so in the previous topics what we discussed is the basic functionalities of vgs now this time we're going to talk about components so when do you use components we use components if there are repeated functionalities across multiple pages and it is used to decouple long-minded spaghetti code bases so what do you mean by that imagine if all of your functionality and all of your code is located in a single viewfinder that is what it that is what is meant by this long mangled spaghetti code base so you have a in a sense a very long a very complicated single view file so instead of settling for 1v file we can use components for that so imagine you have a let's go back to the website example imagine that you have an html which has which has a header body as well as a footer so you have three sections right there are two ways to go about it either you put all of those html content in a single view file or you split them into three components namely the header component the body component as well as the footer component and then you render them to a single central component meaning the body itself or the html itself so that is what it's meant when you use components so components allows us to separate our codes into more logical sections which can be repeatedly used in different pages for example one example of a component is let's say a modal component or a pop-up or a form so something like that so since we use components it has its own data variables as well right so you will ask how do we pass data to and from components so in order to pass data from parent component to child component we use browse whereas to pass data from the child component back to the parent component we use emitted so that is the key difference between components so in order to demonstrate how to use components we can have a simple component right here so let's say this is our component right so we have the [Music] let's say this so this index that view is basically a component so that is one example so to emphasize we can create the parent component so let's say this is our parent component which is the index right so so that so yeah so we have a parent component named index so let's say you want to create another component let's say to emphasize let's set a child index component so at that meaning we have a component as a child so let's say based on the example we simply add the textual content so let's say let's use this one so it's bad so now as you can see we have a child component right here right so in order to use this component back to our parent which is the index what we're going to do is we're going to import that component by simply typing import and then the file name itself and then now that we have imported it we set the path which is the same directory here so we simply add the period slash the file name so that is how you import the component next we declare here a component so it is an object meaning it declared in this part we declare what components gets re-rendered alongside with the index so we simply copy this file name we created here which is this one and then we add it here meaning we have registered this file as a component of the index file now lastly how do we display it as a component you simply add a div here or any element for that matter and then we paste the component name itself as an html element so once you do that what you're going to see here is our child component is rendered alongside our parent component so our parent component is this one right so you can imagine that this part is the parent and then you have here the child component so we discussed earlier about passing data so how do we pass data from the parent to the child we use props for that so in order to use graphs what we need to do is like this one so now that we have our let's say rather now that we have our parent child component bound together we now ask how do we pass data to and from components right so when there's only two ways it can go about either parent to child meaning from index to child index or from child to parent which is charge index back to index so there's only two ways it can go about you cannot pass data from components which are way above the top of the tree so imagine you have a dumb tree so you have a hierarchy of components it can only pass to and from its parent as well as its child cannot pass two levels above that so that is the limitations of components so in order to pass data to the child component we add props so in order to use props you simply need to use a let's say this one so let's say uh [Music] hello so something like that so we have a stream right child pro child let's say message instead so let's set hello there so now we have a message right next we have our child index component here right what we're going to do is we're going to set it right here so let's say message and then we pass the message variable here now you will notice that we have a column right here right what this column means is that we are declaring a property to the component which is props so in order to catch the value of this or rather what it means is that we are passing the message which is the data here to the component child index in the name message in the form of message so to the child component how do we catch that so in order to catch that you simply need to add a props right here so props is an array of names of properties that gets passed from the parent so in this case we use message right so we simply need to copy this and then we paste this here now that it's passed here you can set you cannot bind it to your child component let's say message so once we do that here is our message which is hello there right so that is how you pass data from parent to the child so if you take a look we did not declare any data variables in our child but rather we simply passed a value from the parent which is this message hi there german let's say um i am from payment something like that so we declared this value right so it's a string what happens is this string data from the message itself gets passed here as a parameter and then gets transferred to this property for the child index next in order for the child for the child property to catch that past variable what we did is we added props which is the message itself right and then now that we have the message as a prop we can use it as a data in a rather as a replacement to date to the data so you can bind that to the dom like this one so if we do that if we go back you can see that our modified string is rendered as well in a child component so you may ask now this step or rather in this case you may ask how do we go back from child to the parent right so we can also do that we can pass data from the child component back to the payment component so in order to do that we will use what is called emit so as you can see here in our example we can pass a data from the child component back to the parent using emit so in order to do that we need to create something that triggers for uh that something that is in a sense a trigger to send data back to the parent so in this case let's use the button let's say button and click emit send to parent so something like that and then let's rename it as send love but something like that so now we have a button component right all right we have a button inside the component what we're going to do is since we created a click event or rebound a click event it's going to ask for a method so let's create that method which is namely the sent pair this one right so like this now we have a function so at this point in time we will send or rather what we want to do is if we click the button we send a data back to the parent so rather how will that happen what we're going to do is we need to type this dot dollar in it meaning we're going to emit a certain event that the parent will need to catch so in this case we need to add the past message let's say pass message and then it should be single quotations like that and then we're going to pass a value let's say i am from childhood so something like this now that we have that what we did or rather what we did basically is we created an event from the child so what happens is if you click the button the send to parent method gets called and then the child component emits an event so what event is that that the event that we declared is pass message now so let's wrap this into a single element like that so we emitted a pass message right so how will the parent catch them by adding an event handler which is add and then you type the pass message why is it you may ask why is it like that so the syntax for emitting events is a pascal case or rather a common case meaning the first letter is small and then subsequent letters gets capitalized like this one so that is common case and then once we head to the parent component the syntax would be like this one so it's snake case so you have the small p and then the capital m gets removed and then ripped and instead replaced with a dash and then a smaller version of that so you have a pass message which is camelcased here and then for the parent you have a snake case pass message like this one and then now that we have handled the event itself we need to add a method for parsing that so let's say ours child message so now we have declared a method so we're going to create that method right here now note the key now notice the key difference here this function here has a parameter which is the message so you will ask where did message come from this parameter here came from here okay again to repeat the message parameter here is this one so let's go back again so we started with a click right so we have a click event and then we have a method which will gets or which will fire when we click the button and then the function creates an emit meaning it emits an event that the parent will catch so the name of the event is pass message and then the arguments we passed to that event is a stream now going to the parent component we catch that event using a snake case like this one right so we catch the event so again the child emitted an event meaning it passed an event back to the parent and then the parent catches that event and then redirects it or handles that event using this function right here which is the parse child message now this parse child message is a method of the parent component which is down here and then we pass a property or rather we have a parameters for that function which is the message now this message parameter here comes from the emit parameter we declared here so that is what the message means so if we remove this we won't be able to access these parameters here or the value here but if we declare it here for any name for any matter what this con what this parameter contains is the contents that you pass in the emit so it can be an object it can be an array or it can be any type of data you want so any data you declare here is set as a parameter for your method in the parent so to demonstrate you should we can simply alert the past message like so so what happens is we have a button here right so let's refresh this one up okay so it's not triggering wait so okay parts challenge message okay so then let's see so it's not very good okay let's okay parts child message as message so send that last message okay so let's turn that so ah okay i get it so okay so the name you pass in the event which is this one must be the same i apologize for that so the event you set here must be exactly the same with the parent here so you see in order to avoid further future conflicts you simply copy your value here and then you paste it here and then add this syntax to indicate an event so as you can see if i click the send log there is the value and do note that this value is from the child component not the parent component okay so we can try to go let's do to the iterate we first created a button with a click event which is handled by the send to parent method which is this one and then once we do that the function emits an event which is named pass message and then we pass a value to that event in the form of a stream which is this one and then that event gets passed to the parent right so back to the parent component we handle that event using the same event that was declared in the child so as you can see they are exactly the same the only difference is we use an event handler here which is the add command which is this output which is this one right here and then in order to handle that event in the parent component we set a method which is named parse child message so that method is this one below and also you will notice that our method has a parameter which is message now this message parameter contains the values here meaning whatever content you put in the emit variable or whatever argument you pass to the emit gets transferred to your parent here in the form of this variable and lastly we simply displayed that variable using or we displayed the content of that variable which is a string using the other command so if you click this envelope you can see that we have a string which is an output from the child component so that is an example of how components talk to each other and transfer data to and from components so that is the basics of djs so to recap we [Music] rather we discussed in what vgs is he tackled the reasons why we can when we should use vgs we also show we also what we call this we also demonstrated its capabilities and lastly we created our own component or we demonstrated the components as well as how we can transfer data to and from components now okay so yes so okay so now that we have that up and running it's time for your view js activity to get your hands on or to get your hands uh what they call this to get to have something to get your hands on and to try to experiment as well so for your ujs activity which is activity2 you will be familiarizing yourself with vjs so you will learn how to create your own ujs app as well as host it in a development server so for this activity you will need to create a simple to-do list so what is a to-do list the to-do list is basically a uh list it is a okay so a to-do list is a simple application that allows you to add items to the list using an input form and then remove items from the list using an x button so that is what a to-do list or what is that is a simple to-do list so you will be using the same repository in the previous activity which is the training repository that we provided so we will in case you need to find the link for the repository you can find it below in the pin comment section so before proceeding with the activity we must first install node.js which is what we did earlier and that's at the beginning of the of the session right so we set up our node.js as well as our view cli so for part one you have the specific instructions here so you simply need to follow them along so first you need to install the cli and then you navigate to the directory of the repository and then you open a terminal and then you create a new branch inside the repository following this format which is activity2 dash your name in order for us to track or rather in order for us to track which activity you are uh developing it is also our way of checking on your progresses because we can see the code base from here so once you created your own branch you need to check up to that created branch and then you create your own view project using the command view create to do so you simply choose the default when the option prompt appears again totally emphasize you need to choose the default which is the [Music] view tool so we will be using view 2 for this activity now once the installation finishes simply type npm run then search so at that point your ujs or your ujs application is now ready for development so for the part two which is the creating the to-do app itself you need to implement the following behaviors first the user types a to-do item on an input box next we saw imagine a an input box so you have an input box right so you type add an item there and then you simply click an add button which is beside the input so you need to click that button in order to add items to the current list next once you do that the you the item itself is appended to be to do this now so if uh imagine this this specific behavior so if you type something on the input box and then you click the add button whatever you type on the input box is added as a to-do list below so you can remove items or rather once the items is added to your to-do list you can remove individual items by simply clicking the x button so there's an x button for every item that you add in your to-do list so that is the behavior for the ujs to-do list app so again you have an input box and then you have to type an item to that and then if you click the button that item gets added to your list which is a list of items below the input and then you can remove items from the list by clicking the x button beside every item so this to-do app caters uh or rather this to do a covers the input binding you also have event handling and then you have the list rendering so this is a combination of all the features that we have discussed earlier so if you in case you have difficulties you can notify us and we can assist you regarding the activity itself but for the part of creating the to-do app we can simply guide you with behavior so but in case you have really or in case you have difficulties we can help you implement those as well so after your coding session you can commit your changes push them to the repository and then notify us in order for us to check your outputs so that is the ugs activity for the basic so rather so that is the activity for the basic new js so for the advanced view js we will be tackling that later on this afternoon so what we will be what will or what are we going to tackle in the afternoon session later so now that we are aware of the basic uh ujs capabilities we can now expand it a little bit further by using plugins using view x v router as well as the yes so i think that's it so we can use view x and v router as well so we can also tap on components so we can tap that along a little bit as well but since we are quite ahead of time we introduced components earlier already so in order to give you a heads up about it and then next is for the advanced training we will be also issuing another activity but it is quite actually it is still the same with the basic activity the only key difference is instead of using the data we use the view x itself so we later on we will be showing you that activity so uh so that's it for this morning session so do you guys have any questions please don't hesitate to comment down below so we will answer your questions in case you have inquiries as well as you need or some help regarding the uh the activities so also please don't forget to head over to our gitlab repository in order to to catch up with the activity as well as to visit the handouts as well so all of uh in the handouts everything is provided already so you can also check the gitlab repository okay so you can also use the or rather you can visit the gitlab repository in order to pull it to your own uh okay so you can use the gitlab repository to pull it into your own environment and then use it to code as well as to create your vue.js application so aside from that you need to set up your ujs project and then for those of you who need to have the handouts you can also so you also have the handouts for the vgs training which is this one which contains all of the topics which will be covered in the basic and the advanced so it's a single file for all the features that we will be discussing in the afternoon session so that's it for this morning session and thank you guys for watching so if you have any questions please don't hesitate to drop by down the comment section and we will be assisting you regarding that so in case you have inquiries please don't hesitate to comment down below so okay ah yes so wait okay so let's also please don't forget to to share the pixelate academy's basic software training program in order to let others know as well regarding this training in order for us to teach more of you guys regarding vjs as well as git lab and git and then lastly tracer so for the next week we will be tackling race r itself so for this afternoon we will be tackling the ux as well as the new router so please do stay tuned for the afternoon session okay so let's okay let's see so oh okay so again okay so let's let's try opening this one with plc [Music] okay it's not displaying property okay so let's see we can set it up later again do oh no it's having technical difficulties so anyway so okay so okay so i think that's it are there any questions so far there's none okay so let's simply okay oh so somebody asked what is the difference between mounted and before mount so okay so for the mounted the key difference between mounted and before mount is before mount is called right before the mounting begins and the render function is about to be called for the first time so imagine that the before mount gets called before the element or before the component itself is even rendered to the dom so imagine that you are let's say you are initializing the component so you have a component right so we are initializing that so before map gets called right before the element even gets rendered so before rendering the element it calls first the format function and then performs its duties and then once it finishes that that is the time that the view js renders the component and then after it gets rendered that is when mountain gets cold so the key difference between the two is before mount is called before the dome gets rendered while the mounted is called after the element gets rendered to the dom so there's a key difference between the two so one key difference is usually in the before mounted the data variables are still not initialized so it is uninitialized in the first run through but in the mountain they are already initialized so best key uh it is suggested to use the what they call this use mounted instead of before not because mounted already has the data bound to the component itself so there are also use cases when you want to use the format for example you want to run a function or you want to check if he is allowed to access the component in the first place if he is not allowed to access then it might as well reject him from displaying the component itself whereas for the mounted instance in case you want to modify the let's say the the data first obviously you need you need the data to be initialized first and then that is the time that the component or the data gets modified after the mounted hook gets called so that is the difference between the two so there are specific use cases for each and so for there are specific use cases for the both of them so so there you go i hope that answers your question okay so let's see are there any further questions so far okay it's called there's none so again guys if you have questions please don't hesitate to comment down below we will be answering your questions as well as your inquiries so please don't hesitate so which part okay so so let's see oh okay ah okay i see okay ah yes so for the trainings again to reiterate currently we're at the basic software training right so aside from the basic software training we also have intermediate trainings as well as advanced so the basics covers the introduction of the qjs git as well as quasar and its basic usages while intermediate focuses more on the usage of these three technologies in tandem so we will you will be using all of these three technologies together with each other and then you will be implementing several uh activities in order to test your knowledge regarding these technologies so for the advanced please do stay tuned for that so the advance will be covered but the advance will be discussed to you once the intermediate is finished also in order to uh to in order to join the intermediate training you must first pass the basic training because the intermediate covers the usage of the three technologies so it so we recur so it is required that you need to pass the basics first in order for you to catch up or to use the technologies stated or to use the technologies in the intermediate levels so for the advanced we will be discussing with you the advanced once you pass the intermediate trainings so that is how it works so also please don't forget to hit the subscribe button in our youtube channel in order to get notified of our future training sessions like this one as well as when new tutorial videos gets uploaded because we upload tutorial videos on a regular basis in our youtube channel so if you want to learn more about the technologies that we use you may subscribe to our channel and you can get notified as well you will learn from our tutorial videos so aside from that you can also like our page which is the pixelate academy in order to get notified whenever we go live as well because we also go live with these trainings here so aside from those we also postponed in our pixelate academy so in case you want to get notified we will be notifying you here in our page as well so okay sorry so so far there are still no questions okay again guys please don't hesitate to comment as well as to leave a uh rather to leave questions down below in order for us to answer your inquiries so please don't hesitate and just keep commenting down below it's okay [Music] so far they're still okay so here's the activity [Music] okay so far there are no questions okay [Music] okay so there are still none okay so let's wait for a bit leaving your questions just before we close this session again guys please don't hesitate to uh to spread the news regarding these trainings that we have in order for us to teach you more or in order for us to reach more people and to teach you guys the technologies that we use as well so in order for us to help you guys develop your own applications as well using these technologies so please don't hesitate to spread the word around so let's see yes okay so is it a good practice to use leaf and b4 together so let's see view the if is a feature that allows you to display or hide content based on certain conditions right so v4 on the other hand is a directive that allows you to look do arrays and area of objects so it allows you to loop all of those let's say let's say items and then display them accordingly so to use v if and v for in combination is not actually a bad practice per se so it depends on the implementation let's say you want to display a list of items if and only if the user wants to view them so one way of one way of implementing that would be to create a button which triggers the v if instance and then once the v if instance gets triggered that is the time that the v for instance gets rendered so in a sense it is not a bad practice so it depends upon the use case as well as the implementation side so in that in that example implementation what we what we did or what what the example did is it only renders the list which is the v4 list once the button is clicked so in terms of performance that is actually a good thing why because the element or the list itself only renders itself once the vf is set as true so in case you set it as visual the list will render on the first floor and then stays there even though the content is displayed or not whereas if you use a viv the list itself will only render if and only if you click that button so in a sense the lazy load feature is a good practice because you save cpu resources as well as we are sure that the user may or may not click that button therefore saving cpu power meaning the list only renders if the user wants to view those items if not then it's not going to display those items so based on use cases it is actually a good practice but there are also use cases where v if is not advised to combine with v4 instead of using v it is better to use visual so one example would be if the let's say the component is reactive or rather is based on user input or something that changes often aside from instead of the typical user input so if the dom changes often and the visibility of that component is based off that one then expect the component to always turn on and turn off so if you bound that to a v if that would be a difficult scenario because it is going to keep on creating and then looping and then destroying once you turn it off and then repeat the process again and again whereas if you use a v show it would only render the component once it would look the components once and then it would simply turn the visibility on and off therefore saving cpu power so you won't be rendering and de-rendering the components all the time so only simply showing and hiding them so that saves a lot of cpu power so there's not there's actually a good or bad practice it just depends on the use case scenario so for the previous use case scenario that is a good practice but for the second use case scenario the vf is not a good practice so it depends on the use case scenario for that so i hope that answers your question so thank you for that okay so what time is it okay so i think we still have a few minutes to answer more questions so you have any please don't hesitate guys to leave questions so we will be answering all of your questions so please just keep them coming please don't be shy okay let's see there's still enough questions so we will be okay so again please don't hesitate so just keep commenting [Music] oh yes so and everything is an airplane [Music] yes it's an airplane okay so so far there are no questions okay so let's see so we still have a few minutes for that so again guys please don't forget to spread the word around regarding these trainings because it will allow us to help you guys learn new js as well as to reach new people or introduce these technologies to those who are not yet aware of them so please don't hesitate to spread the word around regarding these trainings also if you would like to get notified of our training or whenever our trainings go live please don't hesitate to hit the subscribe button in our youtube channel because we also post our live sessions there aside from that we also upload our tutorials there on it on a third week or we every week we upload tutorials there so you won't be missed out of those tutorials as well so please don't hesitate to hit that subscribe button to get notified so okay questions so far okay so oh for the afternoon session we will be starting at 1pm later so we will be seeing you later there so still we still have five minutes so okay so again for the afternoon session we will be starting at 1pm okay also the link for the afternoon session is provided in the comment section as well so you can head over there to get notified or to visit the second session so i think i think there are number questions okay so there are no questions so far i think we can close now still have five minutes yeah i think we can end it here now there are no more questions okay so so again guys thank you for watching this basic training session for the morning session so we will be seeing you for the next session which is the advanced wjs training or advanced vgs topics we will be seeing you later at 1pm okay again thank you for watching this is joshua from pixelate see you later pixelators okay

Channel: Pixel8 Academy

Views: 331

Keywords:

Id: qEWD0B4xJX8

Length: 159min 55sec (9595 seconds)

Published: Sat Sep 04 2021