Andrew Hall


Future of Web Apps – Day 2 Session 2 – front end automation tools – Rob Dudley

This was live blogged

There’s nothing wrong with being lazy – lazy developers are happy developers. Developers spend less time doing things they don’t want to and can concentrate on the things they actually enjoy!

Everytime you start a project you are wasting time doing things that you do Everytime instead of actually doing work!

Bower is a front end package manager built by Twitter and runs on node.
You can install packages via bower and you can search for packages. You can do this via command line or via the online version.
Bower also handles dependencies for you. You can also use bower Json files to handle all the libraries you need for your project.
Bower also handles updating of packages too using the “update” command.
There are plenty of alternatives to bower too

Grunt let’s us automate our front end dev workflow. We can take code that other people have written and run them against our own code.
For example for minification or concatenation. But out of the box, it doesn’t do anything.
This also has a Json config file to tell grunt which packages to load.
You can also specify different builds for dev and live environments.
Watch also allows us to monitor changes in our code base and run tasks against them.

One of the biggest problems with grunt is knowing which plugins to run!
Make sure that you only do tasks with plugins that you need to.
Plugins with the contrib keyword are official plugins.
Just like bower, there are plenty of alternatives here.

Yeoman is a web app scaffolding too. It uses bower and grunt.
When creating a new project, yeoman will ask you questions about how you want your package to be built asking you which libraries you want to be included. It’s main power is that you can create the basics of any project you want from a template. There’s probably a template for any project you want to develop.
Yeoman also configures your bower and grunt packages for you too.

We can also retrofit these tools into existing projects. To do this:

Install bower
Then gradually build up your grunt file
Use yeoman for repeated tasks
And build incrementally – don’t try and do it in one lump!

Using these tools lets us as developers be more productive doing the things we actually are good at and enjoy doing instead of wasting our time building up new projects.

Leave a comment or tweet me