Javascript Component Frameworks - An Intro to React and Vue (2020)

so in the second half of this course we continue with rails but we're gonna start bringing in some aspects of JavaScript some students in this course like to build the second project in a way where rails is acting solely as a json api and we're not using any of the rails erv views and we're only using a JavaScript framework for the the front-end views and so and so I'm gonna go a little bit over some of this JavaScript stuff it's not just react and view that we need to cover there are some sort of additions to JavaScript that you likely did not touch on when you saw JavaScript in we have to have one that we need to sort of get you up to speed on I have shown this website briefly in the past in this class this is the stated the JavaScript survey the 2019 Edition where they have surveyed like 20,000 different JavaScript developers and if we just look it over again specifically looking in the the front-end frameworks sort of section you can see the the various frameworks that they are tracking here react view angular pre-act is just a sort of a reimplementation of react so we could sort of bundle those two together and then ember and spelled which is sort of one of the newer frameworks on the block and they've broken it down into the category of used before would use again so this is someone who's done development using a particular tool and would want to continue using that tool in future projects and you can see here react is definitely the number one player in that space there is the used before but would not wish to use again and so this is a bit of a damming response here you could see angular so the leads the pack in terms of the with 30 almost 36% of people saying they had used angular but wouldn't use and it's not clear if they mean the most recent version of angular or an older version angular changed quite a bit in its for various versions then there's sort of the the hype cycle questions like have heard of it and would like to learn and so here we have spelt the sort of the new framework on the block being the the highest with 45 percent followed by view at about 35 percent and then heard of but not interested in in learning and their ember leads the pack ember is sort of the the oldest out of these established frameworks and although there's still a very large and vibrant community around ember the sort of the development world is very I would say fashion driven and we liked our China new things so when things become a little older and more established people are less interested in using them even if there are still you know valid and and probably often really good solutions and then there's just the straight I've just never heard of it angle here so typically in this course I've only introduced UJS just because that was the the one of these frameworks that I'd spend the most time in I've spent more time now doing both react and view development so this term I'm going to today give you a quick overview of both of these frameworks and we're gonna be doing it in the context of plain old JavaScript and what I mean by that is that there are also sort of flavors of JavaScript that are becoming popular these days where you write in this other language and it gets compiled down to JavaScript because our browsers only understand JavaScript so you could write in something like typescript or reason and compile it to JavaScript for the browser the most popular of these is typescript you've all used typescript as terms in terms of being a user in that we've been using vs code and vs code is a web app so vs code is written in HTML typescript at CSS and then it's wrapped with a project called electron which allows it to be distributed across multiple platforms so it's a really neat idea of being able to take your web skills and then packaged applications that will run on Windows and Linux and Mac that are that are web applications a lot of these things also have sort of corporate sponsors in a sense so typescript is it comes from Microsoft Microsoft is the sort of the reason being for for typescript and it's third at the corporate sponsor behind typescript we're not gonna dive into any of these but it's worth knowing that they're out there and that there's some interest in them the big thing that typescript brings to the table is pipes so it's JavaScript but with the stronger type system put in place so it's it's strictly typed or I think you can sort of bring in the types incrementally whereas JavaScript proper is very loosely typed in terms of the front-end frameworks the the corporate sponsors here are react is created by Facebook and angular has Google as its corporate sponsor UJS does not have a corporate sponsor it was created by a single individual Avenue and it now has a whole that source team around it but it doesn't have a large corporate backing and some people see that as a positive thing some people see it as a negative thing so take it for what you will we're gonna use instead of setting up in sort of our whole dev environment to work with this I mean we could do all of our development in vias code but it would probably take us a while to get all of the modules that we needed set up and the various extensions for vias code set up so we're actually going to use a online tool called code sandbox so if you want to code along today just head over to code sandbox IO right now and create yourself an account I think you can sign up with probably a some form of social sign up where you could sign up with your Google account or github or something along those lines I think I use my github to create it and then I will show you what it looks like internally I will just pop into to one of these maybe this one right here so it's a complete development environment in the browser it's got an area where you are writing code in the middle it's got a file explorer over on the Left it's got a place where you can add JavaScript dependencies so it has support for NPM packages built in which is something else we would have to have set up if we're setting up a local development environment so you can add dependencies over here and it manages them for you behind the scenes and then the application that you're building is displayed on the right here and as you code it in the coding area it updates automatically in this little area here and the really neat thing about this code sandbox well there's two neat things one you can just take this URL and share it with someone and immediately they are in the same development environment and so they can see the code they can see the app running but you can also take this little browser here it's got a little URL and you can copy and paste that URL and share it and your whatever you're making is instantly deployed to the web with a shareable URL so the URL is not super human readable but it you know to get something out there industry share it with someone send somebody a link to show them what you've been working on without having to think about deployment at all is super super impressive and so this is like a little to-do list application I wrote this app twice during reading week once in UJS and once in react just so I would get a better sense of the differences between the two frameworks and sort of building the same app and both frameworks it gave me a chance to sort of compare and contrast the things that I knew about both of the frameworks but that I hadn't really fully thought about in terms of what one does versus the other all right so I'm gonna head over to my dashboard here if you are in your code sandbox account the first thing you want to do is create a new sandbox and I'm going to I'm going to start with a react example and I'm gonna use it to talk a little bit about component frameworks in general and then I'll implement the exact same stuff using view and then I'll go and implement a slightly more full-featured application using view itself and then I'll share the you know the the the react version of that code after class because I don't think we'll be able to see the full larger application developed in react but I'm going to create a new sandbox here and you get a bunch of templates that you can start with whether it's just like a vanilla JavaScript there's no frameworks involved or you're building angular or you're building pre-act or you want typescript or whatever we specifically want just the react template and so when we open that up we get a little demo window that just says hello start editing to see some magic happen I'm just gonna move that a little bit off to the side here so we have a bit more room you can see there's some dependencies these are MPM dependencies so that's one of the things that you that you if you haven't done some JavaScript since web dev 1 the idea of dependencies in JavaScript will be new to you it's very very similar to what we've been working with with Ruby and the gem ecosystem right so with Ruby we have a gem file where we list the various gems that we want to be installed and when we run bundle install that gem file is parsed and it fetches not only the gems that we have listed but the gems that those gems depend upon and then the gems that those gems depend upon and it sort of fills out the whole dependency graph for us the same thing goes in add more javascript application where you have NPM dependencies and so that's the node package management system and so we have three dependencies here are sort of three baseline dependencies react Dom and react scripts and in Ruby we have a gem file that lists those here we have a package JSON file and so you can see inside of here we've got some dependencies there's the dependencies listed right there and so if we were doing this development locally we would use either the NPM command line tool or there's another tool that works with package hydration files called yarn and we would use it much like we use bundle install so I might type yarn space install at the command line this package JSON would be processed and then all the dependencies would be downloaded into a node modules folder online we don't need to do that step it just happens for us okay some of the other things that we can look at here is we've got sort of a baseline set of files and folders we have a public folder and into that folder there is a index.html and if we go and take a peek at what's inside of here a little bit more it's just a standard HTML document if we wanted to change the title of our app you know we could change that here the only thing that really matters in this document though is this one div where it has a div with an ID of route the way that these JavaScript component frameworks operate is that they allow you to inject JavaScript apps into specific elements within a web page so the react app that we're gonna be building it could just be injected into a part of a larger static HTML website it could be injected into a part of a rails based web site in our case it's gonna be injected right into this div with an ID of reach and that's going to be the only thing in the HTML that we're sort of starting with here see the other than the fact that there's no script tag so if someone came to this website without jobs enabled they would see that but this is all the HTML that we're gonna have inside of the actual HTML file the rest of the HTML is going to be generated by way of JavaScript and injected into this ID root div and where that happens that's going to be happening over here in this index J s we don't need to touch this file either it's just been automatically generated for us and I'll talk about this stuff in a moment their imports above but you can see here this files using the Dom so it's going document dot get element by ID to find that div with an ID of root so that's this div right here and then it's going to something called react Dom and saying render our app inside of that root element and what is our app well our app which looks like a little HTML tag here is being imported from another file that's this file over here and then we have two other import statements up at the top here and again if you are operating from sort of the web dev one understanding of JavaScript we don't have imports or modules covered in that course and so these dependencies here like react and react Dom this is how we bring them into our application with these import statements and so here I am saying import react from the dependency react and input react Dom from the dependency Dom those are should become objects inside of our code and that's how we can go here to react Dom and call its render object so this react Dom here is being imported from the react Dom dependency there so we can import code from dependencies but we can also import code from files that we have created ourselves and one of those files that was created for us here that we're importing from is this app that J s so we're importing an app object from this app which is n dot slash meaning like the current folder and if we go to that app we can see that it exports something called app so for every export that you have in a file you can do an import in another file so this file here is exporting a default function called app and that's being imported over in this other file so that it can be rendered into our Rudel event in this file here we still need to bring in react because this is going to be a react application and this might strike some of you is a little bit odd but this is also where we import our CSS and so we don't have a style tag or a link tag in the HTML here to bring in the CSS the CSS is being brought in inside of our application it's importing from this dot slash styles that CSS file which is right here you can see there's just some basic CSS inside of that file and we can import it into our JavaScript application there and then the app itself quote unquote app here is defined as a function that has a single return statement and this is the part that always strikes people is a little bit odd when they first see something like react is that this is a mixture of what looks like HTML and JavaScript and so in this return statement we're returning a div that has a class name of app and inside of it as an h1 and h2 that's exactly what we have over here and if I was to take this app and open it in a different window here and I was to go to my dev tools and I was to hover over things you would see even though it's not in the source code right in the source code we just have the div with the ID of root but in my dev tools you can see that div with the class of app an h1 that says hello code sandbox and an h2 that says start editing to see some magic that stuff is all coming from right here and it's being injected into our application now the whole idea behind react is that it is reactive it is allowing us to make things that look and feel and act like applications this is not so reactive we could have accomplished the same thing by just straight up having this HTML in our index.html so I'm going to add some reactivity in a moment and then one of the things that you you need to get used to other than the fact that you can just embed HTML directly inside of a return statement like this and notice it's not a string it's not like a it doesn't have quotes around it I'm not just like embedding like a string that contains HTML this is actual HTML or in fact not really it's called JSX and what I mean by not really is that it does differ in some very specific ways from HTML one of those is that normally in HTML when we apply a class to something we use the class attribute but in JSX we have to use class name where it's sort of camel cased with the capital end name so that's a slight difference and the other difference is that html5 you don't have to sort of self close single tags whereas in JSX you you have to sew JSX is a lot less permissive than HTML proper so in HTML proper I could start a paragraph tag have some content inside of it and the browser would just close it for me even if I didn't close it with GSX though that's not the case so genus X is far less permissive than what a browser would allow in terms of valid HTML so you can see over here I've got an unterminated JSX content meaning I started a tag and I didn't close it and so I'll have to close it like that and same thing for like things like like image tags where you have to like it's just a tag and it typically doesn't have an end tag well you would have to have like a slash to close it to make it something that is self closing so JSX is more akin to we used to develop webpages in the days of XHTML where XML and HTML were sort of put together into a language that was XHTML which was again similar to this very strict in terms of things eating to be properly closed so those are some of the differences that you need to think about when you're thinking about JSX all right so I'm gonna I'm gonna get rid of some of this stuff here and I'm gonna try to build out a little application that is reactive that has some form of state and that's also something that if you think of a lot of sort of simple web pages if they're just providing information they don't necessarily have any state and all I mean by state is like some variables that change their values at particular points in time but we react we do have this idea of State before react we might have stored state in something like JavaScript cookie or something like that or he might have persisted all of our state on the backend and saved it in the database with react we can have a concept of state that is persistent to a certain extent like it goes away if you were to reload the webpage but it persists while the page is open and so what I would like to do is I would like to put a little h1 in here that says react demo and then below it I'm gonna put a button that says click you can see as I'm adding code here it's updating automatically over here which is sort of a nice way to be developing and I'm gonna put a paragraph tag in here and it says you have clicked end times and eventually I want this n to be dynamically updating so that as I actually clicked this button that n which would start at 0 would you know start to grow in and in its number are you just quick show of hands who here has done some react programming already okay were you using react hooks or were you using like class-based components both okay so I'm not covering class-based components in this course I'm gonna go straight to hooks because that is sort of the new recommended style of creating components for those of you who haven't done any react that's a part of react that you can likely skip over and not have to worry about if you end up working in some legacy code you might see some components that were created with Java scripts class syntax but in this course we're gonna jump right to what's called react hooks which is allowing our functions or allowing our components to stay as pure functions and we can sort of layer some state into them using what's called a hook and so I want a little bit of state to capture the clicks and so what I'm gonna do is above this return statement so remember this whole thing is a function and it currently just has a single return statement but in any given function we can have more code in it right you can do a bunch of stuff before your return and one of the things we're gonna do here is we're gonna bring some state into the mix and so I'm gonna use the Const keyword and I am going to get myself access to a getter and a setter for a particular bit of state using something called a react hook specifically the use State hook and so up here I have to say use state yeah that's fine yeah oh you are absolutely correct it is and Here I am going to make it getter and setter for something called count the word count is unimportant that's just what I'm defining I want to call that my state right so that is like just like as programmers we can always pick the names of our variables this is the name of the state that I want to create and then I'm gonna use that state and I'm gonna give it a default value of zero now as I said as we're working through this we're gonna hit little bits of JavaScript that you may not have seen before especially if you haven't worked with react one of them was import and export statements another one is what's called destructuring so if you look what's happening both here and here we have some instances where we're getting data back and we're wrapping a variable in either a object or a array and that is called a destructuring assignment what's actually happening here with you state is you state is returning to us an array of two things but we don't want an array we want to break that array out into two separate variables and so the way you can do that so that you don't just get back a single array is in your assignment statement you create an array and inside of it you put your two variables and then after that point whatever was returned at position zero of the array that you State gave us will be in this count variable and whatever was in position one of the you state array would be set count so it's a way of like taking a composite thing and D structuring it into multiple things and so we now have a getter for count and a setter called set count as a state in react is considered to be immutable you cannot change state directly I can't go to this count they count plus plus the only way to modify count is to use the setter so that's why these are both set up as constants right so I'm getting a Const to a getter called count and a Const to a setter called set count and that will give me the ability to both retrieve the count and modify the count but I cannot modify the count directly and then I want to inject that count variable into my application and I do so inside of my JSX with single curly braces sometimes called mustache braces so you'll see people call this like mustache syntax because it looks like a mustache right on its side and you can see here that it says now at zero times here and that's because the state was initialized at zero if I change that to ten it goes to ten times right and if I changed it to 100 it would say 100 but I'll start it back at zero so that's a little bit of state that I have now brought into my application and I'm using a getter to get that state and inject it into my JSX and now I would like a little bit of state change a little bit of reactivity so that when I click this button it's going to actually make that change so that's gonna happen right here on my button I'm going to define an on change and inside of your mustache braces I could do one of two things here I could put a anonymous function directly inside of here and have that anonymous function or a callback function being executed when the button was clicked or I could just put the name of a function that I want to be called and I could define that function up here which again will seem a little bit weird I'm going to define a function inside of a so this whole thing is a function with the return statement and between where I'm defining my state and where I'm returning I'm actually gonna define another function that's where I'm gonna define a callback function so I'm gonna call this like button clicked or something button clicked yeah let's not call that all change that should be on click and again a little bit different from plain old HTML we're using camel cased on click to set up this click handler I'm currently getting a reference here because I haven't actually defined a button clicked function yet I can define that up at the top here so I'm gonna say function button clicked and I can now change its behavior I can say set count what do I want to change count to well if I just wanted to change it to a specific number like the very first time I click this button it should change to 10 like it just call set count 10 and so when I click the button it changes it to 10 but what I really want to do is I want to take the existing value of count add 1 to it and then use that to set the new state of count so I could get that existing value of count add 1 to it and then send that off to send count so that every time I click this button the value goes up by 1 and I can reload this page to get it back to zero like that I could even make another button if I wanted to and that other button sole purpose could be just to reset the clamp the count back to zero right so take a moment and try to do that yourself once you get this up and running see if you can add another button with some text that just says reset and when that buttons clicked it should reset the value of count to zero so just take a few minutes and if you can implement that sort of copying what I did for the click event on the button that we have right now and I'll just pause this for a moment let's let's quickly implement a reset button here so I'm just gonna put a button I'm gonna give it an on click and I'm gonna call it reset clicked and I'm gonna say reset count inside of the button and then I need to define a function called reset flicked which all it needs to do is go to set count and set it to zero and so that way I can click a bunch of times and then I can reset the count back to zero click a bunch of times and reset back to zero like so I'm gonna put one more little bit of state and reactivity in here just to show that it's not just things like clicks that can affect the change there's all sorts of different events that we can attach behavior to and so what I'm gonna do here is I'm gonna put an h2 here that's just gonna save Mirror Mirror and what I would like to do is I would like to have an input of pipe text just the default for input and I want whatever I put in that input to be immediately mirrored into this paragraph tag below it so that as I type into the input the same text that I'm typing into the input would get mirrored down below and again notice the fact that I need to put a slash at the end of input it needs to be self closing otherwise I'm gonna get a JSX error saying I have unterminated JSX contents again much more strict in terms of validity so I'm going to bring a little bit more state into the mix here I'm gonna create a constant and I'll say text and set text and I'm gonna use state here to just define state as an empty string to begin with so that is right here Const text set text using state and then I want to bind that state to both the output of the paragraph tag that's down below I'm going to attach it to the value of the input as well and I put an on change on that input so that when the input changes it updates the text itself so I'll say here on change input change just gonna be the name of my handler I can output inside of this paragraph tag below the getter for my text so inside of my curly braces here I've got the word text that's just getting my get her up here so if I change the initial state of that we could see that reflected here because of the text and if I go and remove here it'll change as well and then I can define a function here and this time the function needs to reference or at least get access to the input because it's the input I want to pull the value of the input into the function so that I can then use the set tags to set the text and if you remember working with just plain old JavaScript event handlers they can optionally take in an event that gives you access to the event that actually triggered the thing so I'm gonna say input changed I'm gonna take in as a parameter the event and then every event has a target the thing that the element that triggered the event in that case that'll be our input and an input to get its value has a value property and so I can use set text that was my setter defined above with my hook and I can go to the event target value on change Li that needs to be a function it is a function input changed oh yeah yeah I'm not in not in quotes there we are this is and then just to be sort of complete about things I could also I think bind the value to the text and that way text could be modified by other things and the input could be updated as well and what I mean by that is for example when we reset the clicked we could also have that reset our little mirror here so we could set text to a blank string and that would affect not only the paragraph tag but it would also affect the input because we bound text to its value so clicking that clears out both of them that was done again just by calling set text up inside of this reset clicked and ensuring that we had values that detects down below here so that's just an initial demo of this idea of components I haven't even gotten into sort of more the complexities of the fact that you could like nest components inside of components and you could pass properties from a parent component to a child component or you can even pass like handlers like callback handlers down to children to have them send data back up to the parent we're not going to get into any of those more complex topics today but we have at least seen that we've created a single component we layered in a little bit of state into that component with our you stayed hook we were able to build some JSX add some change and click handlers to the mix and then output some of our state inside of HTML or in this case as a value of a particular input any questions comments or concerns so far about this style of sort of reactive development using a JavaScript framework again if we went to our app over here in the view source none of this we present but all of that is present inside of here inside of our little dev tools and so like as we interact with the value here you can see in dev tools getting highlighted what's being actually changed behind the scenes which is pretty neat and same thing goes for here it seems to be one safe behind oh it's as if this one's actually not saved it was still taking my click Handler as a string there we are and again we could see that sort of updating behind the scenes here if we watch this stuff changing a handy thing to have installed when working with react is that there are browser extensions and so there's like the react dev tools extension that would give you access I just don't have it installed right now but it would give you access within your dev tools to another tab which would give you the ability to sort of dig into and look at the state of your react component and nested components if you have them but sort of a handy thing to have when working with these kind of component frameworks all right we're gonna now create the exact same demo but using view J s and we'll just see some of the places where View differs from react and some of the places where it is quite similar they're both they both are quite similar in a lot of ways view like rails leans more heavily on magic things in react are very explicit and immutable like you have these getters and setters to change your state in view you can manipulate directly it's not a mutable state and and things are a little bit more magical around how things operate and what that means is that view code tends to be shorter then react code sometimes up to you know half as long in terms of number of lines and again some people see that as a benefit they're like oh fewer lines fewer bugs and some people see that as a deficits meaning that like you're relying on magic so that the code might not be as readable for someone coming to it for the first time so I tend to gravitate to more towards view because I sort of like frameworks that offer me magic and I sort of like to have shorter of concise code other people like that more explicit flavor that's present and react where you're sort of manually doing all the things that need to be done and not relying on magic you'll probably lean towards one or the other when you you can sort of compare and contrast them so I'm gonna head over to my dashboard and I'm gonna create another sandbox and this time I'm gonna pick view from the list and I'm gonna do the same thing that I did with reactors I'm going to just quickly go over the file folder structure which is slightly different and well and the dependencies here so you can see we have view as a dependency we also have probably view CLI the dependencies specifically battle both react and view when you write code in them you typically are using babel and what babel is is it's a transpiler for javascript javascript is is standardized as something called ECMO script and there are improvements to echo script that happen all the time but they don't immediately land in all of the browser's at the same time and you can have certain sirs that are stuck on older versions of equi script or you have companies that have sort of standardized on older browsers and you might need to write code that still supports a very old browser and so what babel lets you do is it lets you write in the most modern version of ECMO script and then it will transpile your code down to a flavor of JavaScript that will be understood by even old browsers and so this is actually happening sort of behind the scenes when you're working with these various frameworks this babel is is transpiling your code and you can either target specific browsers you can say I want to support you know ie11 specifically or you know maybe you have some weird requirement to support like ie6 in some kind of bank that stuck on that flavor of IE but also with babel there are plugins that you allow you just to target sort of what are the most popular browsers out there including some legacy ones so that's sort of happening behind the scenes the other things that are happening sort of behind the scenes here you might have noticed that you know when we work with our Ruby code we have a rouble cop that's doing some linting and some auto formatting for us in the JavaScript world we're using es lint for our linting rules and in the case of the set up with code sandbox we're using prettier as our Auto for matter and so these things are just automatically part of code sandbox if you were doing this development on your own machine you would have those things installed as extensions inside of es code and so es lynch is sort of what's gonna put little little squiggly underlines under things telling us that maybe we're doing something that goes against community convention or something that might lead to a bug and the other thing is prettier it's like for example if I leave off some of my semicolons by accident and then I save the semicolons pop back into existence because prettier is rewriting my code on save to be sort of consistent in the in sort of the prettier style so with a view project just like with a reactor one we do have a baseline index.html and it's the same kind of idea once this file gets set up we don't really touch it beyond that whereas in react the default is to have a div with an ID of route in view it's we have a div with an ID of app but it's basically the same thing there this is the HTML element into which our app is going to be injected and just like react you could have a whole bunch of other HTML here and so you could have a bunch of static HTML that makes up your website and then you could have like a react or view component that's just one part of a much larger website so you could have a bunch of HTML in here that defined much larger structure and you could just target man'll this div and that would be a piece of the the puzzle that you were building out as your application again in our case it's gonna be the only thing we're just gonna build our app and we're gonna target this div it's gonna go into there so we don't need to come back to that file anymore there is a main Jaso in react we have our index jas here we have a main GS doing some of the same stuff here so in the react version we went and found our particular div and we rendered our component into it this is the view way of doing that we create a new instance of view we're saying we're rendering our app which is being imported from another file and we're mounting it into and this is how we target that div with an ID of app we're just saying hash mark app which represents like CSS sort of targeting syntax to say like target that div with an ID of app and put our app inside of it so again we don't have to come back to this file too often once it's set up the thing you will notice is that at least when we're using what are called single file components in view we're not creating GS files we are creating dot view files and view files are a mixture of three things a view file has a template area which is the mark-up for our code it has a script area which is the code itself and then it has a style area where you can style your components and you could add what's called a scoped property here meaning that the Styles would be only applicable to the component that you're working on and so every component we develop in a view app where we're using these single file components has those three things template script and styling and so it we're a little bit different from react in that we're not mixing markup with JavaScript we're not gonna have JavaScript and all of a sudden inline inside of that JavaScript is gonna be HTML or JSX things are separated out so that our HTML is all by itself up in this template area the scripts are down in here and then styles are separated out so it's it's slightly different in terms of how it encapsulates the different parts of our components all right I'm gonna remove some of the stuff that is just default in here so I'm gonna leave my ID app here but I'm gonna remove the image inside of it in the script tag I'm gonna remove the import statement so I don't want a separate component and I'm just gonna leave this export default as an empty object and I'll just leave this these default styles in place we won't do too much in terms of styling today so you can see that gave me a sort of a blank to work with here just like in our react app I'm gonna put an h1 up at the top and just say view demo instead of react demo I'm gonna try to implement the same thing so I'm gonna put a paragraph tag in here that says you have clicked and times and I'm gonna put a button in here it says click me like so in react we used use state to set up our state in view what we do is inside of this object here it's this main object that is the code to our our component and if we have state in our component we set it up as a data property of this object and specifically it's gonna be a data property that points to a function and the function is going to return the the base state of our application and so the function is going to return itself an object and inside of that object is our base state and so we're gonna have a count and I'm gonna set it to zero so data points to a function and that function returns the sort of the baseline state of our application and the initial state of any of our state variables so here count is set initially to zero and if I want to display that count inside of our template again a slight difference here from react in react we used single mustache quotes in view we use double mustache one of the things I found about code sandbox is that for whatever reason when using view with code sound blocks it's a little laggy in terms of when it updates the Associated example app this is not present when I'm doing my work locally so if I was developing a view up locally that would have updated already here it seems like it's not quite as nice in code sandbox when working with view in that this area doesn't always immediately update but here you can see it says we've clicked zero times if I have count initially set to ten and I reload that a glitch emic glitch what is glitched here for me weird this is something that I experienced with the other section as well is that although this code sandbox is lovely it's not nearly as nice as having your own vocal development because it does just sometimes straight-up glitch out like something is effectively broken right now even though my code is correct all I changed was my count from zero to ten but it doesn't seem to be working anymore over here just sort of lame see if I just go back to zero change it to 10 now not exactly sure why it's glitching out but we can just continue with the demo it might just take a little while to catch up all right so I've defined a little bit of state I want to do the same thing that I did in react world is that I want to define like a click handler here on my button so that when I click that button that state will actually update and so the way I do that in view is I create an act click and here this is one of the places where I continually mix up between the two different frameworks is that in react when we set up our handlers we say on click and then we put the thing inside of curly braces and view we say at click and we put our handler name inside of quotes and so here I'm going to say like increment count it's gonna be the name of my click Handler and I define that in my script area here specifically I'm going to after data put a comma and I set up an area for some methods to be defined inside of their own object so data is its own property inside of the view object and now methods is another property inside of the view object right here and inside of methods I'm gonna have my increment count method which I'm gonna define as a function and this is the part of view GX that tends to rub react developers the wrong way is that I have mutable state and so I can just go and change this value of count directly liking to say this count plus plus and this right here refers to it's sort of a way of getting at this data so by saying discount plus plus that's going to increment count by 1 which will then update the count that's being displayed above here and again got a bit of a lag in terms of how things are operating but there we go so as I click so you can see you could very easily create your own little clicker style video games in this manner because you have the ability to click things and change numbers and so just like we did with react take a moment and try to replicate what I did for this increment count click button to create a little reset button to reset the count back to zero all right I will come back and implement the reset button myself so in my template I'm gonna add a new button and it's gonna say reset count inside of it I'm gonna give it a click handler that says at click click equals and here I can even just do an inline one I think let me just see if that is a thing that I can do yeah so you can do this in react as well I didn't demo that when I was working with react but sometimes when you have like a really really short function you can use JavaScript's arrow syntax sometimes called like fat arrow or stabby arrow functions did you cover arrow functions or spend much time with them in in web dev one so they're just that they're an alternate way of defining a function so instead of saying like function like that basically the word function goes away and it's replaced with the stabby arrow and so your parameters if you have any are still defined inside of the curly braces and you can if you only have a single line of code you can also remove the curly braces so here I have a anonymous function being defined that has a single line of code in it that's just sitting count back to zero so sometimes we will do things like that as a way of just just quickly defining the function in line rather than going and defining a separate function inside of our methods we could do one or the other right so now I've given you an example of both where we have click me calling increment count which is defined below here but in the case of reset we just have that inlined directly like so and that's the whole reason behind arrow functions was just conciseness they don't they also change the way that things bind to this keyword but at least in the way that we're using them right here it's much more concise than writing out a full off the word function alright I'll implement the next part of the demo here which was just that little mirror ring and so I'll put an H - that says mirror mirror inside of it and the idea here was that we're gonna have an input and below it a paragraph tag and you can notice that the mark-up that I'm writing here is much more permissive than what was allowed in JSX so I can get away with not having close tag on my input but I believe if I was using prettier view rules it would probably ask me to put one in anyways can't remember if that's one of the basic rules don't know look it just removed it for me or maybe prettier did that or viewed or something took it away all right I need a bit of State a bit more state just like I did in the react example where I can save the text that gets input in this input so that it could then be mirrored down below and so I'm gonna go to my data area because that's where my state goes and I'm gonna create something called text and I'm gonna give it a default value of just an empty string and then here I can echo that text into my markup with my double mustaches and then again I'm gonna use some of the magic that's available in view so in react we had to set up an on change handler - when the input changed to manually set the state of this text variable in view because we have mutable state I can just do what's called a v-model binding I can just say the model equals text which just means like the state of this input is going to be bound in a two-way map to the text variable and that way as I type code in my input that gets error hello because of the two-way data-binding that the model affords us oops no I don't need control s for saving do I it just saves automatically and so you can see the code is you know not significantly shorter but it is shorter then react just because some of that magic right one of the reasons it's shorter is because I did an inline definition here for the reset and then another reason it's shorter is because I'm relying on the model to do the two-way data-binding rather than having to define a non change function and manually update my state and so we've now seen the same demo implemented across two different component frameworks view came after react and so what view did is that actually took some ideas from the first version of angular the idea is similar to like the two-way data-binding it took some of the ideas from react and it sort of tried to cherry pick that what it thought was sort of the best out of the existing frameworks if you go look at something like svelt which is sort of the new kid on the block in terms of frameworks you can see that spelt has gone to both react and view and angular and sort of cherry picked the best ideas or at least best according to this fault developers the best ideas from all those frameworks and put them into into spelt and this is sort of how things tend to evolve in terms of open source projects on the web right one project influences the other and what comes next tends to be an evolution or based on the best parts of things that came before I haven't played around with felt yet I've just looked at some of the examples that are up on the website and I took a stroll of like a to-do app that was written it's felt it looks yeah it looks like a mash up of a bunch of these other frameworks and it's getting it's getting quite popular I think because it has sort of sort of removed some of the pain points that were present in some of the older frameworks and you know taken the best ideas any any questions about view or react or component frameworks in general so we're gonna take a little break I'll pause the video we'll take like break into a quarter after and then I'll come back and I'll build a slightly more complicated application in view and then I'll share with you the the same code written in react so we are gonna create another view sandbox so I'm back at my dashboard here and I'm saying create view sandbox cuz that's the last one I created if you don't see that there you can just go to create sandbox and pick view and then I have some CSS that we can use sort of as some starter CSS and I've just put that up as a gist so head over to just GIS T dot github.com slash stun eye and it's the very first gist that's being displayed you just have to click on it and then click raw and then copy and paste that so just copy all of that so again that was GIS T github.com slash stun guy very first one click raw and then copy and paste those styles or these copy them then over at your view application when we open up the now dot view we're gonna paste the code in there we're gonna go to the style tag we're gonna remove what was in there and we're gonna paste in those styles and then I'm also going to remove all the contents from my export remove the import above it and remove the two things up here as well so I've just sort of stripped down my template to a single div I've stripped down my script tag to a single export default on an object and I've pasted my Styles inside there all right so I want to set up a simple to-do application it's going to have a single input into which a user can type a new to-do item they want to add to their to-do list there's going to be a button for adding those to the actual to-do list and then the list itself will be displayed and there will be a way of like marking particular items as being complete or not and so there is going to be two bits of state that I need to set up and so I'm going to set that up inside of my data property so I'll say data which is a function that returns state of my app and the two bits of state I'm gonna have is a new to-do item that's just going to be bound to my input so that as the users typing into the input there's going to be a V model that binds directly to this bit of state and then I'm also gonna have an array of to-do items which will initially be empty and that's that's going to be it for the state of this application so it's going to be a variable to track what's inside of my input and as we're adding items we're going to be adding them to this array so inside of my template here I'm gonna put my to-do list and below that I'm gonna put an input and I'm gonna use v-model to bind it to my new to-do items state and just a check to see if that's working properly I will display the new to-do item down below looking good the font is super small down below but at least we can see that that's operational the v-model is properly binding one to the other gonna have a button that says add there it is and I want it as I click that button I want to take my new to-do item and add it to my array and so I'm gonna add a click handler here I'm gonna say when this button is clicked I want to call a method called add item my template got a little squiggly on it because that's because this add item has not been defined yet trying to give myself a little bit more room here huh okay so in view we have data and we have methods so I'm gonna make my methods object here methods object and inside of that methods object I can create my add item function and I could use a arrow function here if I wanted to as well and so what I want to do is I want to get this new to new item and I want to add it to my to-do list which is just an array and so in JavaScript we can treat arrays like stacks and they have a push method and I can use that to push new items onto my stack so I can go directly to this dot to do items dot push and a to-do item I'm gonna make it an object a JavaScript object that's gonna include a few things one of the things it's gonna include is the text of the to-do item itself and so I'll say I don't I think it's not what do I want to college yeah let's just call it text that's gonna be that this dot new to-do item so that's taking the current state of this variable here putting it inside of an object and pushing that into my array I also want a boolean value to represent whether or not this to-do list item is done and so I will give that an initial state of false and then it could be really handy in all of these frameworks when you have a collection of things it's often quite handily handy to have a unique identifier for these so if it's if the data is coming from a database it might be like a UUID or something like that or a primary key I'm just going to save a timestamp which is just gonna be the current date so just date not now as a way of sort of uniquely identifying this to-do item and then after my two new to-do item has been added to my to-do list I want to clear it out like I want to like after I hit add here click I want that to go away so that I can put a new item in there and so after my push here I can go to this dot new to-do item and just set it to a blank string so my total add item function now looks like this I'm pushing a JavaScript object with text done and time stamp in it and then I'm clearing out my to-do item so that I do this and I click Add it goes away now for debugging purposes it would be nice to see if this push is actually working and this is gonna I'm gonna go and copy and paste my url here I'm gonna drop it in here give it us this is the glitchy part of code sandbox what I would like to demo let me just save this what I would like to demo is just the the view developer extension so there's the react has a dev extension that adds to the dev tools view also has an extension that adds to the dev tools if you do a quick search just for view developer extension you should be able to find the extension that fits your particular browser so I'm using Firefox so we just say view Firefox extension and I would get the view dev tools for Firefox if your intro museum tools for Chrome and then if I come back over here there's my application that's running my copy and paste from this little thing here so this is the app if I go to my dev tools with the control shift I there is a tab specifically for view and what I can do is I can navigate to my application and it actually shows me the state of the application and I can I can manipulate that state directly I so I can go into this new to-do item and I could change its value and immediately that changes the state of my application so I can like reach right into the state of my app and change it or as I change the state of my app in the application I can see that reflected down below here and so this would give me the ability to debug whether or not things are properly being added to my to-do list so I can say like item 1 and if I click add you can see that my to-do items has now an array of size 1 and if I expand the first object in it the text is item 1 it has a timestamp it's done property is set to false I can set an item to in there and click add and now I've got two items and so it's really really nice to have these extensions that allow you to debug the state of your application so that just shows me that things are working well in terms of the the state being updated how I'm expecting it to be updated now I want to display my to-do list below my input so I've got the code already going to bind my input to my new to-do item I've got the code going so that when I click Add I'm actually adding new items and clearing out the state of my input down below here I'm going to want to display my - duze if I was working in react I would use JavaScript to map over the elements in my to-do items and drop down little bits of JSX and view instead we do not mix and match JavaScript in our markup we use view directives and I'll show you what a view directive is looks like so I'm going to put it an ordered list here into which I can put my to-do list and then inside of that ordered list I'm going to put an li so a list item and I want this list item to be repeated once for every element that's inside of my to-do items array and so there's a directive for that just like we have the model as a directive there's also a V for as a directive and so I can see before to do then I can say either in or of they they both do the same thing to to do items so this to-do items here is referencing my array of to-do items v4 is saying create an Li one Li for every to do that's in to-do items and then within the scope of this element I'm gonna have access to a to-do variable that has the contents of that to do so what that means is I could just for demo purposes just put the to-do items text property in there what don't you like V for oh it wants a key and that's why I have a unique thing when I said it was handy sometimes to have a unique identifier like a UUID or a timestamp when you loop over a property and view it wants unique things to have unique identifiers and so I'm going to set that up as what's called a key and so I'm just going to say the key is that to do time step something still not doing what it should be doing error compiling template oh I forgot my clothes on my oh well and as I add things to my to-do list and I click Add they are being populated down below by way of my v4 so looping over my to-do items it's gonna create one Li for each item in that array and will give me access to a to-do variable for each item through which I can get access to that should use timestamp for the unique key and the text should actually display the text in the unordered list or the ordered list so it's let's see what else I can do eventually I would like some way of flagging these items is being done or not but I also would like it's it's sort of a pain to have to always type something in here and then immediately click Add it would be nicer if I could just type something in and click enter currently that's not supported but I already have a method that will add an item to my list and so what I can do is I can go to my input right here and I can add something there as well I can say on KeyUp and I'm adding this to the input specifically on key up and specifically on key up for the enter key add item and so now when I say this and I hit enter ah the other thing it just makes inputting that stuff into my to-do list all that much easier and I'm just reusing the functionality that I had already declared so I don't have to rewrite any code I just bind it to a different click handler or sorry a different handler so in one case the add button has a click Handler and now my input as a key up handler but it's only dealing with the Enter key which is again a really nice bit of magic that few gives us access to the other bit of magic that I really like with the model is it can be handy to trim whitespace off things and so you know right now there's nothing stopping like adding in an empty item into my list or an item that's full of a bunch of white space into my list I can get rid of empty items quite quickly I can say something like if and I'm inside of the add item right now I can say if this dot new to-do item triple equals an empty that just immediately returned put a little guard statement up there and so that means that although I can still put in items that have something in them I can't put empty ones in but I still can put ones that are full of spaces in so I could within this function trim the contents there's a JavaScript string property or a string method for trimming whitespace off of a string but view also gives me a little bit of magic that I can use with the model I just have to look it up you b-model trim he modeled dot trim okay that's an easy one so I can CV model dot trim and what it'll do is it'll just automatically trim whitespace from this property here and so that as I hit enter I can't put empty things in there anymore and I shouldn't be able to allowed to put um empty ones in so that's that's handy a model trim and now the last thing I want to do is to actually make use of that done property so that I can like flag things that's being done maybe put a little check mark beside items and when they're done I could make me put a strikethrough through you know through the text and maybe even like dim them out a little bit and so I want to do that now and I'm gonna do that now by going inside of my li so I'm going to space my li over multiple lines and inside of it I'm gonna put a label wrapping my text and inside of that label I'm gonna put an input of type check box so that as I add items I get a little checkbox beside them but currently the check box is not interacting in any way with the state of the items sort of done property and so I'm going to use the model again to bind it to that little bit of state and so inside my input I'm gonna say the model I want the each of these check boxes to have a two-way data-binding to their Associated to-do items done property we can't actually see that doing anything just yet unless we go and take a peek at the view extension again so if I go over here to my view application and I add a few items this the other thing and I go and look at the state of the first two of them you can see that they are initially set to false when I click either the word this or the checkbox that false changes to a true so it's true now and now it's false true or false is it done or is it not done it's done or is it not done and just to make that a little bit more apparent in the visual look and feel here is I will put some strikethrough on the text and I'm gonna use a if statement to do that and again where we in react I would use just a regular JavaScript if statement or maybe I would use like a ternary operator but because I'm in view I have I have a like a view directive to do that for me so I can say I'm gonna set up a del know if you've ever used the del property for the del tag before but the default styling of a del tag is like strikethrough that means that something has been deleted so I'm gonna say del V F so only display this del if the to-do item is done and then inside of that now I'm gonna put the to-do items text so is my del and then I'm gonna have below that a span and I'm gonna say V else so otherwise if it's not done just display the to-do item text inside of span which visually is nothing at all just a container to binds to that I need to put an extra quote there so a little if-else statement done through few directives so if the to do is done display the text inside of adèle if the to do is not done just display the text inside of a spam and now I can say this the other thing and if I click something as being done it gets a strikethrough to represent that it's done and we can continue to add features in this way getting more and more complicated with the to-do list that we're building up on learn I'm going to share a few things I'm going to share a react version of this exact demo so that you can compare and contrast the building of this application in View with react and you can see again that the two frameworks aren't so different but the react code is slightly longer because you have to be more explicit about what you code in react and the view code is slightly shorter because we're relying on some magic like the v-model bindings and the auto trimming and the key up enter there's a lot of little helpers that are that are giving us that those capabilities and then I'm also gonna share like a very full-featured to-do list application again written in both view and react so that you could see what a very complete application might look like between the two of them anyone need to see any bit of this code beyond the template here before we're done for the day so there's the template there's the script down below so in total here we've got about 41 lines of code a number of them are like single lines for curly braces you I quickly hopped over to the react implementation that I have of this code we would see that the react version is about twice the length it's like 82 lines of code whereas the view version is as I said like yeah 41 so it's exactly half-size view compared to react and again there's pros and cons with that smaller is not necessarily better but in in my mind I tend to lump smaller code with fewer bugs just because of human error so the more code you have the more opportunity there is for there to be bugs in the code a number of years ago NASA did a giant audit and all of the code that they were supporting and all of the code that they were writing and they were looking for what was the cause of the bugs in their code what correlated to bugs in their code and the only correlate that they could find across all of their code bases was number of lines of code that was the only thing that they could find that was directly correlated to bugs was lines of code so there is something to be said for a framework that allows you to code the same functionality in fewer lines but again the opposing argument is that maybe that code because of the magic is less understandable to someone who is new to the framework because they have to pick up all of the conventions and so the the way we're gonna continue in this course I'm going to continue presenting ideas in both the act and view and it's going to be up to you if you want to use one or the other or neither in your final project so the final project can be coded completely just in rails alone with rails based views if you want to bring in a component framework you can use react or you can use view I would recommend using the one that you gravitate to the most although if you've already gone a bunch of react experience you may want to leverage that experience and continue on and react or you might want to explore a view just to get an experience in a different framework so it's gonna be your call as to sort of where you want to take that part of the final project if you want to include JavaScript or not or which are the two frameworks that I've presented that you want to actually use and if someone wants to use angular they could as well but that's something that I could provide zero assistance on because I don't know angular so you'd be on your own even though that would be fine if you really want to use that because it would be interesting for me to see a version of the project that included angular alright that's all I got for you for today thank you very much for coming to class and listening to me talk about JavaScript component frameworks

Channel: Kyle Geske

Views: 192

Keywords: Web Dev, Web Development, Javascript, React, ReactJS, Vue, VueJS, components

Id: f2jlTtYwpt8

Length: 94min 33sec (5673 seconds)

Published: Thu Feb 27 2020