High-Quality JavaScript
Upcoming SlideShare
Loading in...5
×
 

High-Quality JavaScript

on

  • 631 views

The said coding with JavaScript is for toying also. There no way to do serious software engineering with JavaScript. The JS community proved that quote is wrong - this talk argues the same way.

The said coding with JavaScript is for toying also. There no way to do serious software engineering with JavaScript. The JS community proved that quote is wrong - this talk argues the same way.

Statistics

Views

Total Views
631
Views on SlideShare
627
Embed Views
4

Actions

Likes
2
Downloads
8
Comments
1

1 Embed 4

https://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

High-Quality JavaScript High-Quality JavaScript Presentation Transcript

  • High quality
  • MarcBächingerPrincipalconsultant,HTML5Evangelist talkpoweredbyZühlkeJScrew! MichaelSchnyderSoftwareEngineer,Dronepilot
  • THEY SAID: „JAVASCRIPT ISTHE FUTURE OF COMPUTING“
  • THEY SAID: „JAVASCRIPT ISTHE FUTURE OF COMPUTING“
  • dynamictyping very-latebinding
  • dynamictyping very-latebinding 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 IDE compile testing jUnit selenium Java
  • DEVELOPMENT CYCLE findbugs, checkstyle IDE compile testing jUnit selenium Java
  • DEVELOPMENT CYCLE static code analysis development productionalizing concatenate minimize testing unit test component tests JavaScript findbugs, checkstyle IDE compile 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 copywebfilestodistributiondirectory concatenatefile(js,css) minimize runtests
  • GRUNT AS OFTEN AS IT GETS jshint copy concat uglify cssmin htmlprocessor karma
  • GRUNT AS OFTEN AS IT GETS jshint copy concat uglify cssmin htmlprocessor karma onlocalfilechange
  • GRUNT AS OFTEN AS IT GETS jshint copy concat uglify cssmin htmlprocessor karma onlocalfilechange onpushtorepository
  • 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 ?
  • WHATTO DO ? leverageJavaScriptbuildtools toolintegration continuousintegration unittesting architectureanddesign
  • thx! @marcbaechinger
  • BACKUP SLIDES
  • GRUNTFILE.JS module.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 Browser watches 1
  • GRUNT: LIVE RELOAD ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- *.html *.js *.css ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- Editor Browser save 2 watches 1
  • GRUNT: LIVE RELOAD ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- *.html *.js *.css ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- Editor Browser save 2 watches 1 request reload 3
  • GRUNT: LIVE RELOAD ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- *.html *.js *.css ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- Editor Browser save 2 watches 1 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 1 register 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 1 register 2 3 changed
  • 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 register 2 request rerun 4 3 changed
  • 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 register 2 request rerun 4 execute5 3 changed
  • 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 register 2 request rerun 4 execute5 test report 6 3 changed
  • RUNNING GRUNT WITH MAVEN • yeoman-maven-plugin • Exec Maven plugin