JavaScript Development Tools

a short Journey

Florian Hirsch / adorsys

JavaScript in the 90s

The 2000s

HTML5 and CSS3

Ten years later

NodeJS (2009)

Non-blocking I/O

• Thread-based networking is relatively inefficient and very difficult to use
• Blocking methods execute synchronously and non-blocking methods execute asynchronously

var fs = require('fs');
// blocking
var data = fs.readFileSync('./data.txt');
// non-blocking
fs.readFile('./data.txt', function(err, data) {
  // callback will be executed when data is read
});

Don't block!

JavaScript Event Loop

Hands on

RequireJS

A JavaScript module loader

Hands on

NPM

Node Package Manager

“Use npm to install, share,
and distribute code;
manage dependencies in your projects;
and share & receive feedback with others.”

Hands on

npm init # setup configuration package.json
npm install # execute configuration
npm search lodash
npm install lodash --save --save-exact # add a dependency with exact version
npm install gulp --save-dev # add a development dependency (local)

^1.2.3?

Semver

1.2.3

[MAJOR.MINOR.PATCH]

• MAJOR version when you make incompatible API changes
• MINOR version when you add functionality in a backwards-compatible manner
• PATCH version when you make backwards-compatible bug fixes.

(not to be confused with sentimentalversioning.org)

Tilde vs Caret

~1.2.3 – patch level (1.2.3 ... < 1.3.0)
^1.2.3 – minor level (1.2.3 ... < 2.0.0)
*      – latest version

... and don't forget the major zero!

pro tipp:

npm shrinkwrap

Bower

A package manager for the web

$ sudo apt-get install -y nodejs & npm install bower & bower install jquery

You are now ready to fade a div out.

— I Am Devloper (@iamdevloper) 9. April 2015

Hands on

npm install bower
bower init
bower search jquery
bower install jquery

Grunt

The JavaScript Task Runner

Hands on

npm init
npm install --save-dev grunt grunt-contrib-clean \
grunt-contrib-concat grunt-eslint

Gulp

The streaming build system

Hands on

npm init
npm install --save-dev gulp gulp-concat \
gulp-rename gulp-uglify

Grunt or Gulp?

• Performance
• Code vs Configuration

PhantomJS

Headless Webkit with JavaScript API

Hello PhantomJS

var page = require('webpage').create();
  page.open('https://www.vr-leasing-gruppe.de/', function(status) {
  console.log('Page loaded with status: ' + status);
  if (status === "success") {
    page.render('vrleasing.png');
  }
  phantom.exit();
});

Testing

Hands on

Test runners

Hands on

CSS post-processing

PostCSS

.box {
  box-sizing: border-box;
}

gulp.task('styles', function() {
  return gulp.src('app/styles/main.scss')
    .pipe(autoprefixer({browsers: ['last 3 versions']}))
    .pipe(gulp.dest('dist/styles'));
});

.box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Yeoman

Yeoman

yo angular:route abschluss

-> app/scripts/controllers/abschluss.js

angular.module('vrlobs').controller('AbschlussCtrl', function($scope) {

});

-> app/views/myroute.html

<p>This is the abschluss view</p>
      

Thanks