2.1 Why Change?

There are two things that I want to do in this lesson. The first is briefly go over the tools that I will be using, just in case if you want to follow along exactly what you see on screen. The second is to go over a very simple example, because it's going to illustrate two main points that will recur throughout this course, as to why you might want to consider using Vue instead of jQuery, or at least converting your jQuery code into Vue. So the first and really the most important is Node.js. And it's not so much because it's Node.js, but because of NPM. NPM is the defacto standard for client side dependency management. And if you don't use NPM, then I highly recommend that you do so. Because it will drastically change the way that you write your applications. Now as far the particular version is concerned, it doesn't matter, just pick the LTS version, install it, make sure npm is checked, it is by default but just make sure, and then install it and you're good to go. So with that out of the way, that's really the only tool that I wanted to talk about, primarily because everything else is going to be pulled in through npm. Or we're going to use a CDN, at least as far as pulling in jQuery and Vue. We could use npm in those cases but then we'd have to talk about using some build tool, and yeah, we'll just keep things simple. So the first thing I'm going to do is create our project, and I'm going to say --yes, just so that it will populate all of the default values for the properties other project. And this is why I want to use npm because we can install a package called lite -server, it is a light HTTP server that automatically refreshes the page whenever you modify a file. So it monitors the files, it checks to see if something has changed and then it will refresh the page in the browser. It's a very nice utility and especially if you need an HTTP server to do any time of Ajax stuff. Now we won't be doing Ajax stuff, but once again, I want to use an HTTP server, so there you go. So while that is installing inside of the code editor for this project, I'm going to create a new file called bs-config.json. And this is the config file for light server, there are two things that I want to specify. The first is server property, this is going to have another property called based directory, this is the home directory if you will, where all of the files are going to be stored that will be served. So in my case I'd like to use the folder public to contain all of these things, and then the second is going to be another property called open. Whenever you run the light server command it will automatically open your default browser to the URL for light server. And I don't want that because sometimes I will stop the service so that I can make some changes or install a new package, and then start it up, and then it's just another browser window that I have to close down. So by setting open defaults, I don't have to worry about that. And then in package.JSON, I'm going to change the test script to simply dev, and then I'm going to say lite-server, and that's going to be it. So with that done, I can go to the command line say npm run dev and that's going to start up lite-server. Let's create the public folder, which I probably should've done before running lite server. We'll just see if this works, and then inside of public I'm going to create another folder called simple. For all of the examples that we work with I'm gonna put them inside of folders that are representative of whatever example we worked with in that lesson. So this is going to be a simple example, so I'm going to call it simple. As far as the files are concerned, the naming scheme is going to be the name of the example, simple. Followed by jq for jQuery or Vue for Vue and then HTML and JavaScript. So in this case, we're going to have that simple.jq.html and then simple.jq.js. We'll put our code inside of external files because that's typically what we would do in a real world example. So as far as our HTML is concerned, once again, we are going to be using CDNs. So I'm going to drop in bootstrap, so that we have something other than the default browser rendering. And then jquery, which in this case is 3.3.1 which at the time of this recording is the latest version. So as far as this particular example is concerned,we're going to have a div element with an id of text and the text inside of it doesn't matter. So what we want to do is whenever we click on this, we are going to change the style and I think of that ground color would be a nice visible change. So we're going to do this by toggling a class, I like the color blue, so I'm going to use the background color of blue and that's going to be fine. Let's go ahead and pull in that external file, and as far as the JavaScript is concern, it's going to be very simple, all right. The first thing that we're going to do is have immediately invoked function because we want to protect this super important code, and then we will do our typical jQuery thing. We will select our element using the jQuery function, we will have our selector, and then we will listen for the click event. And then inside of our click event handler, we will need to use the toggleClass method so that we can toggle on the blue-bg class. Now, we could use the dorm API here, and a real world application, that's what I would be doing. However, since we're doing things jQuery e, then I'm going to wrap this with a call to the JQuery functions so that we can use the toggleClass method there. And there we go, very simple, so let's look at this at the browser and hopefully this will work. And yes, nothing's here, okay, there was an issue running light server, okay. So now they should work. Let's go back, and we'll refresh the page, there is our text, we click, we see the background color and it toggles on and off. So nothing out of the ordinary there. Now, looking at our HTML, let's assume that this is a massive project. We have a tone of HTML, we have a ton of markup inside of those HTML files, and we have a ton of JavaScript files. And we are going through and we are looking at the markup. This doesn't tell us anything, yeah we see a div with an id of text, that has some text inside of it. Whoo, whoop de doo. So if we wanted to know what exactly was going on with this element we would have to either run the application, and play around to see what the behavior was, and if that's the case then we would have some idea of, okay we need to look at JavaScript files. Which, hopefully our JavaScript files are logically named, not every project is going to have logically named files. So hopefully we can isolate that code and then see what exactly is going on. So a lot of ifs that's a lot of time spent trying to figure out what is going on with a very simple element in this particular case. Well, let's look at this same example, but with Vue. So lets start by copying our file and I'm going to rename it to simple.vue.html. And as far as our our CDN, I'm going to replace jQuery with Vue. Now, this particular CDN is going to update every time, Vue is pushed out to npm. So this is the latest version, I don't know what version it is as of the time of this recording, but this will be the latest version always, which may or may not be a good thing. And so let's create our simple.vue.js file. Now, we are going to start off the same, we will have our immediately invoked function but that is going to be the only similarity, well not really. We will create a new Vue object, and we will specify the element that we are going to work with, this is the other similarity where we specify our element. Now we will come back here but the main difference is going to be inside of html because, where jQuery allows us to completely separate our markup and our behavior. Vue does not, and while the separation of concerns have been beat into us year after year, after year, after year. Now we're getting to the point to where it kind of makes sense to mix our markup and our JavaScript or our markup and our behavior. Because we are starting to think more in terms of components which really started with jQuery. I mean the whole idea behind the jQuery plugin, is to have a component and as time went on, there started to be a very large mixing of HTML inside of our JavaScript for the jQuery plugins. So the next logical step then was things like angular and more specifically React and Vue, as well. But with Vue, we have the ability to essentially declare what exactly is going to be go with this markup. So we'll start with our click event handler, whenever we click we want to change the style of the element, and the way that we could do that is to maintain state. So we'll have a property called active, and we will simply just change the value of active every time that we click on it. So very simple there, and then we will use that value to conditionally add or remove our CSS class. So inside of our v-bind class attributes, if you're not familiar with Vue, the v-bind can be shortened to simply colon, so inside of here we will say blue-bg is going to be applied based upon the value of active. But we're not finished, we have to go back to our JavaScript file, and we have to add that property to our data, we have to tell Vue that hey, we have this active value. But here's something else, we could set the default value here as true if we wanted, that would of course apply that class to the element or, we could give it a default value of false. False makes much more sense in this case, so we could go to the browser, we can go to that file, and once again we see that same behavior. But as we are looking at our markup, we can see practically everything that we need to see here. We see that there is a click occurring, that we are doing something, that we are changing state based upon the click. And that state is being used to conditionally apply this blue-bg class. So here are the two main reasons why you might want to use Vue in place of jQuery, and convert your existing jQuery into Vue code. The first is the declarative syntax, by looking at your markup, you have a better understanding of what is going on with that element. There is something to say about separating your concerns. But when it comes to component based applications, mixing markup and behavior makes much more sense, especially when you can see everything that you need to know what is going on with that element. The second thing is kind of related to that first thing, with this declarative syntax we now have state. We have something that we can hold onto that we can then easily implement other features with like for example, if we wanted to conditionally show or hide an element inside of our div element here. Let's say that we have an H1 element that will have a v-if attribute, if active then this going to show, so we can just say hide then if it's not active then it's going to hide. Now, this isn't a very useful feature but the fact remains that, without having to write any extra JavaScript code, we have implemented this feature. Now if we wanted to do this with jQuery we would have to write extra lines of JavaScript code. Not so much here, we have something to track state, which by the way we didn't have to write any JavaScript for. Although if you technically want to say that this is JavaScript then, yes, that is true. But this approach is much easier, it's much easier to read and easier to understand especially if you just need to quickly review code to get an understanding of how the application is working. So over the next two lessons, you're going to essentially see the same things. You're going to see declarative markup in syntax that help you understand what is actually going on by just looking at the markup. You're going to see state being introduced where state wasn't before, which actually simplifies code. And these are the primary reasons as to why you might want to rewrite your jQuery code with Vue.