LLB Web App Series Part 1: Bower
**Quick Background to this series:**Just over a year ago I started to get into web development because I wanted skills to help me start a business. I discovered that web development and programming in general was incredibly interesting, demanded creativity and was potentially staggering in scope and complexity. I’ve been hooked since. During my journey I’ve been frustrated countless times by tutorials which are just annoyingly difficult to follow – full of assumptions which would cause me to stumble. So I’m going to write some that are easy to follow, written for people like me who are self-taught. That is to say, I’m going to be really patronizing.
Remember that although the series title is ‘Web Apps’, all your applications written with HTML, CSS and Javascript can be converted to mobile apps using PhoneGap.
Bower – why should you care?
Because it makes building complex websites/applications easier, and learning how to use it will save you time in the long run. And because loads of boffins use it, so if you want to work with them or learn from their code, you’ll need to understand it too.
Bower -What is it?
Basically it’s npm for the front-end – which means that it installs stuff your app might need (like jQuery) for you without you having to download and maintain it.
**Caveats: **“Part 1″ of this series is starting in pretty random place. In order to follow this tutorial, it is assumed you have a grasp of:
- HTML/CSS
- Javascript/jQuery
If you don’t feel comfortable with these, there’s a wealth of info on the web, but I’d personally recommend:codecademy if you’re broke, and codeschool if you don’t mind paying a few bucks. Also checkout my post onhow to learn them quickly for a good primer
- node.js – This might be massively off-putting, but I’ve made the node.js parts of this tutorial absolutely as simple as possible.
The answers to this question on stackoverflow (an incredible coding resource – perhaps the greatest) contain a lot of useful information about getting started with node.js.
Finally, examples and processes in this post are on a Windows machine.
Alright, let’s get cracking.
If you head over the Bower website you will find what devs call ‘The Documentation’, which means explanations/examples and general reference information. Bower’s description is given like so:
“Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.”
Gawd, so what the hell does that mean? I’ve read James Joyce’s Ulysees twice and still that kind of stuff makes my head feel funny. Here’s my translation:
“If the front-end of your website (all the HTML, CSS and Javascript bits) relies on or is enhanced by other technologies such as add-ons, libraries or frameworks, Bower can download and install all these technologies quickly and will make keeping track of which versions you are using very easy.”
In order to explain how it does this, we will create a demo web app. This is going to be as simple as I can possibly make it. The full source code is available here
App components:
- server.js the node.js server) with the following code (note that you’ll have to install the Connect middleware using npm (see the section below on installing bower via npm for more detail, the command you’ll want is “npm connect”):
<br></br>
var connect = require('connect');```
`connect.createServer(`
`connect.static(__dirname)`
`).listen(8080);`
2) *index.html* (the app HTML – click to make it bigger)
[](http://thelifelifebalance.com/wp-content/uploads/2014/02/LlbBowerTest_index.jpg)
So that’s our ultra-basic app – you can see that it creates a webpage with a button. When the button is clicked, the ‘Hello World’ text disappears. Right now, we’re using pure Javascript to make this happen. But we decide that it would be easier using jQuery. Usually, we would have to download jQuery or find a content delivery network. This time, we’re going to use Bower.
First, let’s install Bower. Assuming you have node.js installed (there’s an install guide on their [site](http://nodejs.org/)), we will use the node.js download tool (i.e. ‘package manager’) npm, to get Bower.
Open the node command line, or the windows command prompt. Navigate using the command ‘cd’ (here’s a [full explanation](http://www.computerhope.com/issues/chusedos.htm) of how to navigate in DOS the project folder where you have saved your files for this demo.
Now type:
`npm install -g bower `
This will install bower (the “-g” bit means that it is installed “globally” – which means you can access bower in other projects. We want that) . Once the install is complete (this may take some time, you’ll know it’s done when your file path is displayed with a blinking underscore), it is time to setup the `bower.json` file. This is where you will define all the technologies you want bower to automatically install for you.
The explanation on the Bower site is pretty good – mostly its key-value pairs in a JSON document. If you’re not that sure about JSON – [check this out.](http://www.copterlabs.com/blog/json-what-it-is-how-it-works-how-to-use-it/) Also, note that JSON has fussy syntax – if you miss a comma or closing bracket, it won’t work. Here’s the one I created using their guidelines:
{
"name": "llb_bower_test",
"version": "1.0.0",
"dependencies": {
"jquery": "~2.0.3"
}
}
```
So here I’m listing as a dependency for my project “jquery” – notice that I’ve specified which version (2.0.3) I want. The “~” symbol, means any version later than 2.0.3, but not any versions later than 2.1.0 (in case an update isn’t backwards compatible). This is the science of update management – a deep rabbit hole we won’t go down now.
Right! So let’s enjoy the fruits of our labor. Recall that in our bower.json file we specified our dependencies – in this case, jQuery? Now, in the command prompt (you will need to navigate to the directory where you have saved the bower.json file) use the following command:
bower install
This creates a new folder in your directory called “bower_components” and inside this folder you will find jQuery downloaded and ready to use. It has been downloaded by typing that one command.
In our index.html file, we include the link to jQuery inside a script tag:
We are now able to use jQuery instead of pure Javascript, if we desire.
Note that the first time I tried to do this I received the following error:
“ENOGIT git is not installed nor in the PATH”
This puzzled me as it implied I hadn’t installed Git (a version control system which is required for node – you get it here)…but I had. A bit of searching revealed that when you install Git you have to ensure that the second box on the screen below is ticked:Run Git from the Windows Command Prompt.
So, install Git with this option selected, close and reopen your command prompt (again, navigating to your project folder), and you’re now good to go.
Now bear in mind this is an incredibly simple example. Of course for a project of this size you wouldn’t bother with Bower. But a reasonable web app will usually have numerous dependencies: jQuery, coffeescript, Backbone.js, underscore.js, Bootstrap, require.js – the list goes on. I’d say that the key benefit of Bower is that it makes it extremely easy for you and others to update and keep track of which versions you are using. It’s a question of just checking/editing the bower.json file. This is much easier than hunting for the files yourself. It also has benefits when it comes to modular loading, which I’ll be exploring in my next post on require.js.
Source Code for the demo in this post is here.