I had an internal »Tec Talk« about a JavaScript toolchain including Grunt, Bower, Yeoman. From minifying and concatenating, over linting, documentation, code complexity measuring, dependency management, unit testing to easy scaffolding. I like to share the content and the demo files over here and hope you’ll enjoy it.

The demo project is available at GitHub. Check the different Git Tags according to the levels within the presentation. You can find the slides over here.

Have fun :octocat:

Level 1 – Build Tools

  • Grunt (Task runner)
    • Based on files
    • Configuration over code
    • Great API for writing own Tasks
    • probably a lower learning curve
  • Gulp (Streaming build system)
    • Based on streams
    • Code over configuration
    • Easy API setup your tasks
    • Blazingly fast

Further information about the differences are explained within this supreme slide deck.

Grunt

http://gruntjs.com

Source → Magic happens → Destination

Prerequisites

  • Download and install Node.js which comes with npm
  • Install the Grunt CLI globally with
npm install -g grunt-cli

See http://gruntjs.com/getting-started

Our Project

Our example project can now be installed with:

cd ~/my/path/
git clone https://github.com/mischah/js-tooling-demo.git
npm install

Enter:

grunt tasks

to see the available tasks.

Where the magic happens

The tasks are configured within Gruntfile.js

The dependencies for the tasks are defined within package.json

Start from the beginning

Go to Git Tag level-1 (»Level 1 - Empty Grunt Setup«) to start with:

  • a stupid HTML file
  • just 2 little JavaScript files
  • a pretty empty Grunt file

Level 2 – Minify and concatenate

Performance matters. Therefore you need to minify and concatenate your JavaScript files which can be automated with Grunt

Check Git Tag level-2 (»Level 2 - Minify and concatenate«) to see how to handle these kind of tasks.

Level 3 – Linting

JavaScript Linting = Quality Assurance.

Needed to:

  • Prevent syntax error
    • eg. missing semicolons
  • Prevent logical errors / structural problems
    • eg. unreachable code
  • Force adherence to coding conventions
    • eg. UpperCamelCase for constructors

There are two main »competitors« when it comes to Linting:

  • JSHint
    • Larger eco-system (editor plugins)
    • Defaults are easier to handle
    • Less config needed (caused by less rules)
  • ESLint
    • More rules (especially stylistic issues) eg. »trailing whitespace«
    • More flexibility (configurable → warnings vs. errors)
    • Faster development

Both configurable via dot files within the project (team or company standards).

See this slide deck of mine for details http://de.slideshare.net/mischah/js-linting-en

Helpful

Check Git Tag level-3 (»Level 3 - Linting«) to see how to handle these kind of tasks.

Level 4 – Documentation

Documentation via DocBlock comments as known from Javadoc.

The most used tools:

We are going to use JSDoc over here.

Check Git Tag level-4 (»Level 4 - Documentation«) to see how to handle generating the docs.

Level 5 – Code complexity measuring

Analyze and benchmark code complexity with »plato«.

Example reports on popular projects:

See plato and the corresponding Grunt task

plato is based on https://github.com/philbooth/complexity-report. This is place to read about how to interpret the metrics.

Check Git Tag level-5 (»Level 5 - Code complexity«) to see how easy it is to configure plato.

Hint: Add your reports directory to version control to observe the changes in complexity during development within the team.

Level 6 – Dev Server

grunt-contrib-connect is one possibility to start a static web server.

Check Git Tag level-6 (»Level 6 - Dev server«) to see whats needed to setup a local development server.

Level 7 – Dependency Management

Manage external Libs

Node related stuff belongs to npm whereas frontend packages may be handled by Bower.

Bower has many analogies to npm (package.json vs. bower.json), but:

  • flat file structure for dependencies
    • every dependency in one version in the project!
  • you can define the location of your dependencies via .bowerrc 
{
  "directory": "libs"
}

Prerequisites

  • Download and install Node.js
  • Install the Bower CLI globally with
npm install -g bower

See http://bower.io/#install-bower

Demo

bower install jquery-ui
bower list
bower install jquery#1.10
bower search normalize
bower install normalize.css
bower init
bower install bootstrap
bower list
bower install bootstrap --save

Check Git Tag level-7 (»Level 7 - Bower«) to see an example bower setup.

Module loader for your code

If the framework of your choice isn’t handling the dependencies of your modules:

They all have their own pitfalls. Choose wisely (°ロ°)☝

Appendix

a. Unit Testing

Unit Testing for all of us (even without a cli)

Straight forward Unit-Tests with »Nodeunit«

Test respectively Behavior-Driven JavaScript with Jasmine

Spy/Mocking Frameworks

Test runner

Framework agnostic unit testing on real devices offering simple integration with Jenkins, Travis etc.

http://karma-runner.github.io

b. Project Scaffolding with Yeoman

Yeoman helps you kickstart new projects with interactive »Generators«:

  • Prescribing best practices and tools
  • Help you stay productive

Prerequisites

  • Download and install Node.js
  • Install the Yeoman CLI globally with
npm install -g yo

See http://yeoman.io

Demo: Set up an Angular project

See https://github.com/yeoman/generator-angular

# Install the generator globally
npm install -g generator-angular
    
# Make a new directory, and cd into it
mkdir my-new-project && cd $_
    
#Run yo angular, optionally passing an app name:
yo angular [app-name]
    
#Run `grunt` for building and `grunt serve` for preview

c. Release management with help of grunt

See Bootstrap Kickstart.

d. Grunt performance measuring and boosting

  • time-grunt
    • Display the elapsed execution time of grunt tasks
    • Used within this repo.
  • load-grunt-tasks
    • Load multiple grunt tasks using globbing patterns
    • Increases performance and save lines of code within your Gruntfile
    • Used within this repo.
  • grunt-newer
    • Configure Grunt tasks to run with newer files only.
    • Used for the watch tasks in this repo.
  • grunt-concurrent
    • Run grunt tasks simultaneously

e. TypeScript

JavaScript-Development for Enterprise developers with TypeScript:

  • Strict superset of JavaScript
  • Compiles to plain JavaScript
  • Static typing
  • Class-based object orientation

Related:

f. Ressources

LiveReload via Browser Extension

Link list with selected ressources

Solid Styleguide

Free books

Slide decks