Download - 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“
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
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
uglify cssmin htmlprocessor
karma
GRUNT AS OFTEN AS IT GETSjshint
copy
concat
uglify cssmin htmlprocessor
karma
on local file change
GRUNT AS OFTEN AS IT GETSjshint
copy
concat
uglify cssmin htmlprocessor
karma
on local file change
on push to repository
TOOL INTEGRATION
BARE BONE BUILD------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
Editor
Browser
CI MIT JENKINS
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
GRUNT: LIVE RELOAD------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
Editor
Browserwatches1
GRUNT: LIVE RELOAD------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
Editor
Browser
save
2
watches1
GRUNT: LIVE RELOAD------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
Editor
Browser
save
2
watches1
request reload
3
GRUNT: LIVE RELOAD------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.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.js
fooSpec.jsbarSpec.jsbarSpec.jsfooSpec.jsbarSpec.jsfooSpec.js
Karma
GRUNT: KARMA------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
fooSpec.jsbarSpec.jsbarSpec.js
Chrome Firefox
Android
iOS
fooSpec.jsbarSpec.jsbarSpec.js
fooSpec.jsbarSpec.jsbarSpec.jsfooSpec.jsbarSpec.jsfooSpec.js
Karma
watches 1
GRUNT: KARMA------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
fooSpec.jsbarSpec.jsbarSpec.js
Chrome Firefox
Android
iOS
fooSpec.jsbarSpec.jsbarSpec.js
fooSpec.jsbarSpec.jsbarSpec.jsfooSpec.jsbarSpec.jsfooSpec.js
Karma
watches 1register
2
GRUNT: KARMA------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
fooSpec.jsbarSpec.jsbarSpec.js
Chrome Firefox
Android
iOS
fooSpec.jsbarSpec.jsbarSpec.js
fooSpec.jsbarSpec.jsbarSpec.jsfooSpec.jsbarSpec.jsfooSpec.js
Karma
watches 1register
2
3changed
GRUNT: KARMA------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
fooSpec.jsbarSpec.jsbarSpec.js
Chrome Firefox
Android
iOS
fooSpec.jsbarSpec.jsbarSpec.js
fooSpec.jsbarSpec.jsbarSpec.jsfooSpec.jsbarSpec.jsfooSpec.js
Karma
watches 1register
2
request rerun 4
3changed
GRUNT: KARMA------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
fooSpec.jsbarSpec.jsbarSpec.js
Chrome Firefox
Android
iOS
fooSpec.jsbarSpec.jsbarSpec.js
fooSpec.jsbarSpec.jsbarSpec.jsfooSpec.jsbarSpec.jsfooSpec.js
Karma
watches 1register
2
request rerun 4
execute5
3changed
GRUNT: KARMA------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
*.html *.js *.css
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
------------------------------ --------------- --------------- ---------------
fooSpec.jsbarSpec.jsbarSpec.js
Chrome Firefox
Android
iOS
fooSpec.jsbarSpec.jsbarSpec.js
fooSpec.jsbarSpec.jsbarSpec.jsfooSpec.jsbarSpec.jsfooSpec.js
Karma
watches 1register
2
request rerun 4
execute5
test report
6
3changed
RUNNING GRUNT WITH MAVEN
• yeoman-maven-plugin
• Exec Maven plugin