FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.1 Bower

Web developers use a variety of libraries and frameworks in their sites, jQuery among them, and they need some way to easily manage them. Bower is such a tool, and in this lesson you’ll learn the basics of dependency management with Bower.

Related Links

3.1 Bower

Dependency management is a very important part of web development. Now, the term dependency can be defined in different ways but we typically refer to a dependency as code that we use within our sites that we don't own. We didn't write them. And I know that that could sound disingenuous because these are our websites. We should be writing our own code and using nobody else's code. And I fully understand that mindset because I used to have it, but hear me out. There are a lot of tools available that were written by other people but they were written for the express purpose to make our lives easier. And for example, one of the dependencies that we are going to be looking at in the next lesson It's called jQuery. This is a JavaScript library that, well, it does a lot of things. It makes it easier to work with a DOM. It makes it easier to make web requests with JavaScript, and at one time, it was the way to write cross-browser JavaScript. Now, cross-browser JavaScript isn't that big of a deal now, because most of the browsers have very good HTML, CSS and JavaScript support. So, the cross-browser aspect isn't as big as it used to be, but it still gives us a much easier way of working with the DOM. So you saw that big download button. If you click on that, it takes you to this page. Now you have to decide what version of jQuery that you want and there's also different versions of those versions. There is the compressed version which means that all of the whitespace has been removed. And then there's the uncompressed version that has all of the whitespace, all of the comments, and everything else. The compressed version is something that we would use within our websites so that whenever we deploy it, then that is what we would use. Now we could download whatever version that we wanted, that would give us a file in our computer that we can then put in wherever we needed to. But that's manually managing this dependency. That means at any time that we need to update jQuery, we have to come back here, we have to download it, then we have to move it to the folders that we want to move it to. And that is just a headache. That's what we used to have to do. But now we have tools that we can use to manage our dependencies for us, so that we don't have to do a lot and that is a very wonderful thing. So the first tool that we are going to look at is called Called NPM. It stands for Node Package Manager. Now, Node is a JavaScript runtime that you can use to write applications. Most of the time Node applications are web sites or web applications, but you can write traditional applications with Node as well, you just have to do some other things to make it all work. But one of the aspects of Node.js is an idea of a package. A package is a dependency and they have a tool called a node package manager that makes it easy to manage those dependencies for node applications. So if you go to nodejs.org, it's going to take you to the website for Node.js. And there are going to be Download buttons for whatever operating system that you are using. I am on a 64 bit version of Windows, so we see the Download for that operating system. Now we want Version 5 and we want the stable version, so we'll just download that. Whenever it's done downloading, we will install it. Now, whenever you are installing, there's one very important thing that you need to make sure that you are installing, and that is NPM. So let's run the installer, and it's pretty straightforward. You can take all of the defaults and I think it will give you everything that you need. So here, where we have the custom setup, we can choose to not install Node Package Manager. But we want that, so make sure that that is checked and then go ahead and install Node. Now I already have it installed, so I'm not going to complete the installation, but it's a fairly painless install and once it's done you're ready to go on to the next step, and that is installing something called Git. So if you do a search for download Git, one of these options is going to take you to the website for Git. And there it is, it's the first hit here. And Git is a source control, it's not a platform, but it's a source control tool and it's definitely something that you will want to learn because source control is something that can save you a lot of time. It keeps track of all of the changes that you make in your code. And that is a wonderful thing, because if you ever need to go back, you can, because Git has tracked all of those changes. You can also branch your code so that you can leave your current code as is, but if you need to develop some new features or something, you can also branch your code. And then develop that new feature while keeping your existing code intact, and that is a wonderful thing as well. So you will of course want to download Git for your operating system and install it. The install is painless, just take all of the defaults and you should be fine. So once you have NPM and you have Git installed, we are now ready to get the third tool and it's called Bower. And if you go to bower.io, that's the web site. And this is a Node package, but we use it to manage other packages for the browser. You can see that this is a package manager for the web. Now everything that we've been talking about, NPM, Git, and Bower, these things are commands that we execute from the command line. And if you aren't familiar with the command line, I highly encourage you to do so. Because there are a lot of things that you can do with the command line that you can do with a graphical interface, but the command line is faster. For example, we are going to use the NPM command. Now, first of all, if you're on Windows you can pull a PowerShell or you can pull up just a command prompt. If you're on some other operating system, you can pull up just your console. You will type npm and then press Enter, and you can see that there are a lot of commands. So yes, npm is a very useful tool, we're not going to look at really anything. We're going to use it as a stepping stone to get us the thing that we really want, and that is Bower. So we want to install bower. We do so by using the npm command. So, we say npm space. We want to install a package, but in this case, we want to install it globally so that we can use it everywhere. Because by default whenever you install a node package, it's just going to install it in the directory that you're executing the npm install command. So bower is something that we want to use everywhere, wo we are going to use -g. This means global, we want to install Bower globally. So we say npm, space, install, space, -g, space, Bower. And this is going to download and install Bower. Of course, that depends upon, or how fast it installs depends upon your internet speed. It also depends upon your computer speed, but it really doesn't take that long. In fact, there, it's done. So, whenever you're back at the command prompt, you are ready to use Bower. And we are going to change our directory to go to our working directory, the one that we've been using so far within this course. So that is in my documents and I think it's called Web Dev Two, and yes, that is. So inside of this folder, we are going to say bower install, and then the name of the dependency that we want to download. Now, you have to know the name, but in our case it's jQuery. jQuery. So bower install jQuery, and this is going to go out and download jQuery for us. And if we look at the folder, we're going to see that we now have some other things. So here is Web Dev 2, this is what I've been using throughout this course, you can see the files that we've been working with. But now we have this bower_components. If we go inside of here, we see jQuery and whenever we use Bower to install another dependency, we will see another folder here. But right now, we just have jQuery. And now we have these two folders. Dist, that is distribution. And then source, that is the source for jQuery. In our case, we want the distribution. So we dive into dist, and then we have several different options. The one that we would want to use is this jQuery.min.js. That is the minified version of jQuery. And so we can do one of two things. We can leave this file here, as is, and then we could reference this file inside of our HTML. Or we can move this jQuery file outside of this folder and put it into something a little bit more convenient for us to use. Now if we do the latter, then we lose some of the reason to use Bower. Because if we ever needed to update jQuery, we could just come back to our command line, our install jQuery is going to give us the new version of jQuery. And if we've moved files, then we have to move files again after we've updated them. So in most cases, it's going to be best to just refer to the file as it is in Bower components. So if we want to add that to our HTML page, let's see which one do I have open, this is DOM.html. Then we would say script source and then bower components, and we would just go through our path here. jQuery dist, and then jQuery.min.js, and there we go. Now, another dependency that we will be looking at later in this course is called Bootstrap. It is a CSS framework that makes it easier to write web pages that work on any screen, be it for a desktop, a laptop, a tablet, or a phone. So we will just do bower install bootstrap, and that will give us everything that we need for Bootstrap. And once again it's going to download everything into that bower_components folder and if we look inside of there, we now have Bootstrap and jQuery. So if we dive into Bootstrap, into the dist, there's CSS fonts and JavaScript. We can use any of these files here. The one that we would want is Bootstrap.min.CSS. And if we wanted to use any of the JavaScript utilities, you would want to include bootstrap.min.js as well. So Bower is a wonderful tool. It allows us to manage our dependencies from the command line but we don't have to go to the website to download the file, move it around to anywhere that we need to. Instead we just execute a simple command, and that gives us the dependency that we have been using. If we don't have it, it will download and install it for us. If we do have it, it will update to the latest version. And that's a lot easier than what we used to have to do.

Back to the top