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 ssh://git@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 (»Empty Grunt Setup«) to start with:

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

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

• https://github.com/mishoo/UglifyJS2
• https://github.com/gruntjs/grunt-contrib-uglify
• https://github.com/gruntjs/grunt-contrib-concat

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

Main »competitors«

• 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.

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

Helpful

• Linting errors described
• Default ESLint config
• ESLint Rules
• Configuring ESLint
• JSHint docs
• JSHint Options

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

The most used tools:

• JSDoc
  • Grunt task
• YUIDoc
  • Grunt task

We are going to use JSDoc over here.

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

Example reports on popular projects:

• jquery
• grunt
• marionettejs

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 (»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.

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

Manage external Libs

• Node related stuff belongs to npm
• Frontend packages may be handled by Bower

Bower ← → npm

Bower has many analogies to npm ( package.jsonvs. 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

bower install

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

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

a. Unit Testing

Frameworks

• Unit Testing for all of us (even without a cli)
  • http://qunitjs.com

  • https://github.com/gruntjs/grunt-contrib-qunit
    
    

• Straight forward Unit-Tests with »Nodeunit«

  • https://github.com/caolan/nodeunit

  • https://github.com/gruntjs/grunt-contrib-nodeunit
    
    

• Test respectively Behavior-Driven JavaScript with Jasmine

  • https://jasmine.github.io
  • https://github.com/gruntjs/grunt-contrib-jasmine

Spy/Mocking Framework

Sinon.JS.

• Standalone test spies, stubs and mocks for JavaScript
• No dependencies, works with any unit testing framework

Test runner

Karma

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

• github.com/karma-runner/karma
• github.com/karma-runner/grunt-karma
• github.com/karma-runner/karma-coverage
• github.com/karma-runner/karma-chrome-launcher
• github.com/karma-runner/karma-firefox-launcher
• github.com/karma-runner/karma-safari-launcher
• github.com/karma-runner/karma-phantomjs-launcher
• github.com/karma-runner/karma-qunit
• github.com/karma-runner/karma-nodeunit
• github.com/karma-runner/karma-jasmine

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

# 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

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

c. Release management with Grunt

• Generate Changelog from Git commit messages:
  • https://github.com/ericmatthys/grunt-changelog
    
    
• Bump version according to semver:
  • https://github.com/vojtajina/grunt-bump
    
    
• See Bootstrap Kickstart

d. Grunt performance measuring and boosting

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

e. TypeScript

JavaScript-Development for »The Enterprise« with TypeScript

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

Related:

• Grunt task for compiling TypeScript
• Grunt task for linting TypeScript

f. Ressources

LiveReload via Browser Extension
LiveReload knowledgebase
Link list with selected ressources
JavaScript The Right Way
Solid JavaScript Coding Guidelines
Idiomatic JavaScript
Excellent Free books
Eloquent JavaScript Learning JavaScript Design Patterns You Don't Know JS (book series)
Slide decks
Front-end Tooling Workflows