High-Quality JavaScript

High quality

Marc BächingerPrincipal consultant, HTML5 Evangelist

talk powered by Zühlke JS crew !

Michael SchnyderSoftware Engineer, Drone pilot

THEY SAID: „JAVASCRIPT IS THE FUTURE OF COMPUTING“

dynamic typing

very-late binding

dynamic typing

very-late binding

must run to be verified!

BONE AND BANE OF JS

$.ajax({ url: "person/2", dataType: "json", success: function (obj) { var person = new Person(); $.extend(person, obj); global.person.push(person); } });

BONE AND BANE OF JS

$.ajax({ url: "person/42", dataType: "json", success: function (obj) { $.extend(Person.prototype, obj); } });

BONE AND BANE OF JS$.ajax({ url: "person/2", dataType: "json", success: function (obj) { var person = new Person(); if (someCondition(obj)) { $.extend(person, { getFullname: function () { return first + " " + last; } }); } global.person.push(person); } });

COUNTERMEASURES!

DEVELOPMENT CYCLE

findbugs, checkstyle

IDEcompile

testing

jUnit

selenium

Java

DEVELOPMENT CYCLE

static code analysis

development

productionalizing

concatenate

minimize

testing

unit test

component tests

JavaScriptfindbugs, checkstyle

IDEcompile

testing

jUnit

selenium

Java

ARCHITECTURE AND DESIGN

MODULES!

require(["app/services"], function(services) { // use services } );

TOOL CHAIN

!

TOOL PARADE

jshint

uglify

esprima

require.js

less

bower

istanbul

karma

jasmine

DEVELOPMENT CYCLE

grunt jshint

IDE/Editor/CI

productionalizing

cssmin

htmlcompress

testing

jasmine

qunit

uglify

concatenate

JSHINT - NOT A COMPILER

app/scripts/domain-factory.js !line 4 col 3 Missing "use strict" statement. line 11 col 47 'suffix' is defined but never used. line 16 col 22 Missing semicolon. line 35 col 5 'person' is not defined. line 37 col 11 Expected '===' and instead saw '=='. line 38 col 5 Expected '{' and instead saw 'c'. line 38 col 5 Expected 'c' to have an indentation at 7 instead at 5. line 43 col 24 Missing 'new' prefix when invoking a constructor.

RELEASE WITH GRUNT

jshint

copy

concat

uglify cssmin htmlprocessor

karma

checkstyle findbugs

copy web files to distribution directory

concatenate file (js, css)

minimize

run tests

GRUNT AS OFTEN AS IT GETSjshint

copy

concat


karma


copy

concat


karma

on local file change


copy

concat


karma

on local file change

on push to repository

TOOL INTEGRATION

BARE BONE BUILD------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

Editor

Browser

CI MIT JENKINS

WEBSTORM IDE

MICROSOFT

What is Microsofts answer for developing Enterprise JavaScript Applications?

JAVASCRIPT FOR VISUAL STUDIO

“Enable efficient SPA development on the .NET platform by providing a proven,

enterprise-ready toolchain”

ZÜHLKE SPA STACK

HIGH QUALITY JAVASCRIPT ?

WHAT TO DO ?leverage JavaScript build tools

tool integration

continuous integration

unit testing

architecture and design

thx!

@marcbaechinger

BACKUP SLIDES

GRUNTFILE.JSmodule.exports = function(grunt) { var DOC_ROOT = "public_html", DIST_DIR = "build"; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), copy: { dist: { files: [ { expand: true, src: [DOC_ROOT + '/**'], dest: DIST_DIR } ] } }, [...] } };

GRUNT: BASE{ "name": "jquery-app", "version": "0.0.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-cssmin": "~0.6.1", "grunt-htmlcompressor": "~0.1.8", "grunt-contrib-watch": "~0.3.1", "grunt-regarde": "~0.1.1", "grunt-contrib-connect": "0.1.2", "grunt-contrib-livereload": "0.1.1" "grunt-open": "~0.2.2", "grunt-karma": "~0.6.1", "karma": "~0.10.1", "karma-chrome-launcher": "~0.1.0", "karma-jasmine": "~0.1.0", "karma-qunit": "~0.1.0", "karma-html2js-preprocessor": "~0.1" } }

GRUNT: LIVE RELOAD{ "name": "jquery-app", "version": "0.0.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-cssmin": "~0.6.1", "grunt-htmlcompressor": "~0.1.8", "grunt-contrib-watch": "~0.3.1", "grunt-regarde": "~0.1.1", "grunt-contrib-connect": "0.1.2", "grunt-contrib-livereload": "0.1.1" "grunt-open": "~0.2.2", "grunt-karma": "~0.6.1", "karma": "~0.10.1", "karma-chrome-launcher": "~0.1.0", "karma-jasmine": "~0.1.0", "karma-qunit": "~0.1.0", "karma-html2js-preprocessor": "~0.1" } }

GRUNT: LIVE RELOAD------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

Editor

Browser


------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

Editor

Browserwatches1


------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

Editor

Browser

save

2

watches1


------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

Editor

Browser

save

2

watches1

request reload

3


------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

Editor

Browser

save

2

watches1

request reload

3

load

4

GRUNT: KARMA{ "name": "jquery-app", "version": "0.0.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-cssmin": "~0.6.1", "grunt-htmlcompressor": "~0.1.8", "grunt-contrib-watch": "~0.3.1", "grunt-regarde": "~0.1.1", "grunt-contrib-connect": "0.1.2", "grunt-contrib-livereload": "0.1.1" "grunt-open": "~0.2.2", "grunt-karma": "~0.6.1", "karma": "~0.10.1", "karma-chrome-launcher": "~0.1.0", "karma-jasmine": "~0.1.0", "karma-qunit": "~0.1.0", "karma-html2js-preprocessor": "~0.1" } }

GRUNT: KARMA------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

fooSpec.jsbarSpec.jsbarSpec.js

Chrome Firefox

Android

iOS


fooSpec.jsbarSpec.jsbarSpec.jsfooSpec.jsbarSpec.jsfooSpec.js

Karma

GRUNT: KARMA------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------


Chrome Firefox

Android

iOS



Karma

watches 1

GRUNT: KARMA------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2

GRUNT: KARMA------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2

3changed

GRUNT: KARMA------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2

request rerun 4

3changed

GRUNT: KARMA------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2

request rerun 4

execute5

3changed

GRUNT: KARMA------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

*.html *.js *.css

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------

------------------------------ --------------- --------------- ---------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2

request rerun 4

execute5

test report

6

3changed

RUNNING GRUNT WITH MAVEN

• yeoman-maven-plugin

• Exec Maven plugin

High-Quality JavaScript

Technology

Transcript of High-Quality JavaScript