Modern
Frontend
Tooling

NPM

https://www.npmjs.com

Package Manager
for Node

package.json

	{
	  "name": "foo",
	  "version": "0.1.0",
	  "description": "foo description",
	  "main": "foo.js",
	  "author": "@somebody",
	  "license": "MIT"
	}
						

Most important: name and version

Versioning

Semantic Versioning

http://semver.org

MAJOR.MINOR.PATCH

1. MAJOR - incompatible API changes
2. MINOR - backwards-compatible + new functionality
3. PATCH - backwards-compatible + bug fixes

Dependencies

    {
        "name": "foo",
        "version": "0.1.0",

        "dependencies": {
            "lodash": ">=2.4.1",
            "d3": "^3.5.5"
        },

        "devDependencies": {
            "chai": "^2.2.0",
            "gulp": "^3.8.11",
            "gulp-karma": "0.0.4",
            "karma": "^0.12.31",
            "mocha": "^2.2.4"
        }
    }
    						

    # app dependency
    npm install lodash --save

    # dev dependency
    npm install chai --save-dev
                        

All valid versions:

  {
        "foo": "1.0.0 - 2.9999.9999",
        "bar": ">=1.0.2 <2.1.2",
        "baz": ">1.0.2 <=2.3.4",
        "boo": "2.0.1",
        "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
        "asd": "http://asdf.com/asdf.tar.gz",
        "til": "~1.2",
        "elf": "~1.2.3",
        "two": "2.x",
        "thr": "3.3.x",
        "lat": "latest",
        "dyl": "file:../dyl"
  }
						

CLI Commands

    #list installed packages
    npm ls

    #list outdated packages
    npm outdated

    #remove package
    npm rm <name>
						

Bower

http://bower.io

Package Manager
for the Web

bower.json

Manifest file similar to NPM's package.json

  {
    "name": "my-project",
    "version": "1.0.0",
    "main": "path/to/main.css",
    "ignore": [
      ".jshintrc",
      "**/*.txt"
    ],
    "dependencies": {
      "<name>": "<version>",
      "<name>": "<folder>",
      "<name>": "<package>"
    },
    "devDependencies": {
      "<test-framework-name>": "<version>"
    }
  }
 						

.bowerrc

Bower configuration JSON file

  {
    "directory": "app/components/",
    "analytics": false,
    "timeout": 120000
  }
						

Default: bower_components

List Packages

	bower list
						

Grunt

http://gruntjs.com

JavaScript Task Runner

Configuration Based

Install CLI

	npm install -g grunt-cli

	grunt --version
						

In Your Project

	npm install grunt --save-dev
						

Gruntfile.js

  module.exports = function (grunt) {
    // create 'version' custom task
    grunt.registerTask('version', 'Shows version number', function () {
        var pkg = grunt.file.readJSON('package.json');
        grunt.log.writeln(pkg.name + ' version ' + pkg.version);
    });
  };
						

	
	grunt version
						

Grunt Plugins

						
	npm install --save-dev grunt-contrib-jshint
						

  module.exports = function (grunt) {
    // load plugin tasks
    grunt.loadNpmTasks('grunt-contrib-jshint');

    // tasks configuration
    grunt.initConfig({
      jshint: {
        files: ['Gruntfile.js'], // files to run JSHint on
        options: { // options for JShint
          globals: { module: true } // allow the use of 'module' global
        }
      }
    });
  };
						

Gulp

http://gulpjs.com

Streaming Build System

Uses NodeJS streams, thereby removing the need to create intermediate files when transforming source files

Install CLI

						
	npm install -g gulp
						

In Your Project

	npm install gulp --save-dev
						

gulpfile.js

  var gulp =  require('gulp')
  var concat = require('gulp-concat');
   
  gulp.task('concat', function() {
    return gulp.src('./src/js/*.js')
      .pipe(concat('all.js'))
      .pipe(gulp.dest('./dist/'));
  });
  						

Gulp API

	gulp.src   (globs[, options]);
	gulp.dest  (path[, options]);
	gulp.task  (name[, deps], fn);
	gulp.watch (glob[, opts], tasks);
						

The .pipe() is how we connect
single-purpose plugins together

  gulp.src('patern/*')
          .pipe(...)
          .pipe(...)
          .pipe(...);   
   						

Testing

Karma

Test Runner

https://karma-runner.github.io

Write the code and get instant feedback from your tests

• Test on Real Browsers
• Continuous Integration
• Testing Framework Agnostic
• Easy Debugging

Karma
in Action

Code Coverage

Istanbul

JavaScript code coverage tool

http://istanbul-js.org

COVERAGE PER

• statement
• branch
• function

Based on esprima

Istanbul in Action