Managing Front-End Dependencies with Bower
As I mentioned at the start of the chapter (and, for that matter, in its title), we’re going to use jQuery and Backbone.js in this project. So how do we include those dependencies? It seems like only yesterday that developers were manually downloading JavaScript libraries from the Web. Well, okay, that’s still common. But it’s not nearly as common as it was, thanks to front-end package managers inspired by npm—most notably Bower.
With Bower, we can install JavaScript libraries for web applications via the command line, keep those libraries up to date, and automatically ensure that their dependencies are met. For example, Backbone relies on Underscore, so when we use Bower to install Backbone, Bower grabs Underscore for us automatically!
There isn’t that much more to say about Bower. It’s a nice, simple utility with an interface closely modeled on npm’s. Conveniently, Bower is itself installable with npm:
| | $ npm install -g bower |
Once installed, Bower can prepare any project for front-end dependency management with its equivalent of npm init:
| | $ bower init |
Go through the prompts, and you’ll end up with a bower.json file (analogous to npm’s package.json), which lets Bower keep track of your project’s dependencies. Now let’s install those dependencies:
| | $ bower install --save jquery |
| | $ bower install --save backbone |
Done! Now, unlike JavaScript dependency libraries such as AMD, Bower doesn’t tell us how to load the dependencies it installs. This means we just need to give our page script tags pointing at the right files—most likely before our own scripts. Below, I’m going to give you the complete index.html for our entire project. Apologies for any spoilers:
| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <title>CoffeeTasks</title> |
| | |
| | <!-- Libraries --> |
| | <script src="bower_components/jquery/dist/jquery.js"></script> |
| | <script src="bower_components/underscore/underscore.js"></script> |
| | <script src="bower_components/backbone/backbone.js"></script> |
| | |
| | <!-- Default data --> |
| | <script src="compiled/data.js"></script> |
| | |
| | <!-- Templates --> |
| | <script src="compiled/templates.js"></script> |
| | |
| | <!-- Backbone models/views --> |
| | <script src="compiled/card.js"></script> |
| | <script src="compiled/column.js"></script> |
| | <script src="compiled/board.js"></script> |
| | |
| | |
| | <!-- Application core --> |
| | <script src="compiled/application.js"></script> |
| | |
| | <!-- Stylesheets --> |
| | <link rel="stylesheet" href="css/normalize.css"> |
| | <link rel="stylesheet" href="css/style.css"> |
| | </head> |
| | <body> |
| | <!-- All content is rendered client-side --> |
| | </body> |
| | </html> |
The rest of this chapter will be devoted to the real nuts and bolts of our application: templates, models, and views.