Searching for tools
I’ve been searching and trying new workflows when starting a front end project/project phase, there are a lot of interesting open source projects for rapid prototyping ‘static’ websites in a reusable, collaborative, optimised and intelligent way.
I’ve been trying tools like:
- Bower a package manager for the web (meaning front end).
- Compass I know it can do a lot of things but I’m using it only to compile Sass files.
But it wasn’t until I found Yeoman that everything came toghether.
It’s a tool that scaffolds, downloads and prepares all these tools for you doing the tedious configuration part and using best practices approach in all parts.
If you have node already you just have to run:
npm install -g yo
Yeoman has lots of generators which basically are different scaffold variations using different libraries and components depending on which tools you need for the project.
The basic one is called generator-webapp you can install it running:
npm install -g generator-webapp
An then create a new project like this:
It will ask you if you if you want some additional things:
And BOOM, you have a project structure ready to build using grunt, you can create a web server on the fly running
grunt serve or build the project into the
/dist folder running
Then you can use bower to install other js libraries you need like:
bower install --save underscore
--save parameter ensures that the new library is saved on the
All your bower dependencies will end up in the
bower_components folder which is not version controlled, when you want to install it somewhere else you’ll run
bower install inside and it will download all the libraries you need, just as Composer does for the back end.
Using other generators
That’s one way of doing it, another way is to use other generators that are more specific to what you’ll use in your project, for example I usually use Backbone.js in my projects, I could install it via bower, or I could use the generator-backbone, which also gives me other interesting tools when building my app like generate models, collections, routers or views:
yo backbone # generates your application base and build workflow yo backbone:model blog yo backbone:collection blog yo backbone:router blog yo backbone:view blog
There’s a very thorough and extensive post about how to use it in NetTuts