How to start a new web project

image05
Standard

Web development has long been an ad hoc process and the trend has been to clone or download various libraries/frameworks into folders depending on your programming background and never touch them again. Most don’t minify, lint or combine js/css file for the sake of readability and maintainability. Thanks to new developments in web technologies this doesn’t have to be a Friday night argument at the pub along with where to place the opening brackets and how many spaces/tabs should be used for indenting.

Convention over Configuration is the concept of designing software to have the well known/common configuration options as defaults, so no configuration is needed in most cases. Yeoman follows a similar concept to force best practices that have evolved within the industry when starting out new projects. Yeoman is able to combine, minify all your javascript/css required for the final build and comes bundled with a small webserver and live reloads the browser every time you make changes to a file.

This is in addition to jshint – a tool that helps to detect errors and potential problems in your JavaScript code, autoprefixer to add css vendor prefixes (eg: -webkit -ms etc.), mocha a JavaScript test framework, svgmin/imagemin to minify/compress images.

Yeoman is not the only tool to do this but it’s so easy to setup there is no excuse not to use it.

OK, time to get started! We are going to step up simple HTML5 boilerplate website with bootstrap and add angular.js to it.

1. Yeoman is based on node, so download and install node.JS if you haven’t already.
Node will also install npm or node package manger which we will use next to install yeoman.

2. Install yeoman sudo npm install -g yo

3. Install webapp generator sudo npm install -g generator-webapp
(You can find many other starting points/generators at official or community generators )

4. Scaffold out HTML5 Boilerplate website yo webapp

5. Now that we have a basic starting point, it’s time to add the other frameworks we need using bower. bower install angular-latest
You can search for more bower packages here.

Yeoman includes grunt, so you are able to add any task to your workflow.

Leave a Reply

Your email address will not be published. Required fields are marked *