Upload File

high-quality javascript

57
High quality

Upload: marc-baechinger

Post on 27-Jan-2015

109 views

Category:

Technology


1 download

Report

Tags:

DESCRIPTION

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.

TRANSCRIPT

Page 1: High-Quality JavaScript

High quality

Page 2: High-Quality JavaScript

Marc BächingerPrincipal consultant, HTML5 Evangelist

talk powered by Zühlke JS crew !

Michael SchnyderSoftware Engineer, Drone pilot

Page 3: High-Quality JavaScript

THEY SAID: „JAVASCRIPT IS THE FUTURE OF COMPUTING“

Page 4: High-Quality JavaScript

THEY SAID: „JAVASCRIPT IS THE FUTURE OF COMPUTING“

Page 5: High-Quality JavaScript
Page 6: High-Quality JavaScript

dynamic typing

very-late binding

Page 7: High-Quality JavaScript

dynamic typing

very-late binding

must run to be verified!

Page 8: High-Quality JavaScript

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); } });

Page 9: High-Quality JavaScript

BONE AND BANE OF JS

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

Page 10: High-Quality JavaScript

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); } });

Page 11: High-Quality JavaScript

COUNTERMEASURES!

Page 12: High-Quality JavaScript

DEVELOPMENT CYCLE

findbugs, checkstyle

IDEcompile

testing

jUnit

selenium

Java

Page 13: High-Quality JavaScript

DEVELOPMENT CYCLE

findbugs, checkstyle

IDEcompile

testing

jUnit

selenium

Java

Page 14: High-Quality JavaScript

DEVELOPMENT CYCLE

static code analysis

development

productionalizing

concatenate

minimize

testing

unit test

component tests

JavaScriptfindbugs, checkstyle

IDEcompile

testing

jUnit

selenium

Java

Page 15: High-Quality JavaScript

ARCHITECTURE AND DESIGN

Page 16: High-Quality JavaScript

MODULES!

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

Page 17: High-Quality JavaScript

TOOL CHAIN

Page 18: High-Quality JavaScript

!

TOOL PARADE

jshint

uglify

esprima

require.js

less

bower

istanbul

karma

jasmine

Page 19: High-Quality JavaScript
Page 20: High-Quality JavaScript

DEVELOPMENT CYCLE

grunt jshint

IDE/Editor/CI

productionalizing

cssmin

htmlcompress

testing

jasmine

qunit

uglify

concatenate

Page 21: High-Quality JavaScript

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.

Page 22: High-Quality JavaScript

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

Page 23: High-Quality JavaScript

GRUNT AS OFTEN AS IT GETSjshint

copy

concat

uglify cssmin htmlprocessor

karma

Page 24: High-Quality JavaScript

GRUNT AS OFTEN AS IT GETSjshint

copy

concat

uglify cssmin htmlprocessor

karma

on local file change

Page 25: High-Quality JavaScript

GRUNT AS OFTEN AS IT GETSjshint

copy

concat

uglify cssmin htmlprocessor

karma

on local file change

on push to repository

Page 26: High-Quality JavaScript

TOOL INTEGRATION

Page 27: High-Quality JavaScript

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

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

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

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

*.html *.js *.css

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

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

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

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

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

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

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

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

Editor

Browser

Page 28: High-Quality JavaScript

CI MIT JENKINS

Page 29: High-Quality JavaScript

CI MIT JENKINS

Page 30: High-Quality JavaScript

WEBSTORM IDE

Page 31: High-Quality JavaScript

MICROSOFT

What is Microsofts answer for developing Enterprise JavaScript Applications?

Page 32: High-Quality JavaScript
Page 33: High-Quality JavaScript
Page 34: High-Quality JavaScript

JAVASCRIPT FOR VISUAL STUDIO

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

enterprise-ready toolchain”

Page 35: High-Quality JavaScript

ZÜHLKE SPA STACK

Page 36: High-Quality JavaScript

HIGH QUALITY JAVASCRIPT ?

Page 37: High-Quality JavaScript

WHAT TO DO ?leverage JavaScript build tools

tool integration

continuous integration

unit testing

architecture and design

Page 38: High-Quality JavaScript
Page 39: High-Quality JavaScript

thx!

@marcbaechinger

Page 40: High-Quality JavaScript

BACKUP SLIDES

Page 41: High-Quality JavaScript

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 } ] } }, [...] } };

Page 42: High-Quality JavaScript

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" } }

Page 43: High-Quality JavaScript

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" } }

Page 44: High-Quality JavaScript

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

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

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

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

*.html *.js *.css

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

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

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

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

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

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

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

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

Editor

Browser

Page 45: High-Quality JavaScript

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

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

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

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

*.html *.js *.css

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

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

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

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

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

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

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

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

Editor

Browserwatches1

Page 46: High-Quality JavaScript

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

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

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

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

*.html *.js *.css

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

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

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

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

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

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

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

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

Editor

Browser

save

2

watches1

Page 47: High-Quality JavaScript

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

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

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

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

*.html *.js *.css

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

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

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

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

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

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

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

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

Editor

Browser

save

2

watches1

request reload

3

Page 48: High-Quality JavaScript

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

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

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

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

*.html *.js *.css

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

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

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

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

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

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

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

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

Editor

Browser

save

2

watches1

request reload

3

load

4

Page 49: High-Quality JavaScript

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" } }

Page 50: High-Quality JavaScript

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

Page 51: High-Quality JavaScript

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

Page 52: High-Quality JavaScript

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

Page 53: High-Quality JavaScript

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

Page 54: High-Quality JavaScript

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

Page 55: High-Quality JavaScript

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

Page 56: High-Quality JavaScript

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

Page 57: High-Quality JavaScript

RUNNING GRUNT WITH MAVEN

• yeoman-maven-plugin

• Exec Maven plugin


TDD FOR BEGINNERS€¦ · •Test-Driven Development •Code quality •High maintainability •Refactoring PRACTICAL DETAILS!! Duration: 1 day-long TDD in JavaScript Prerequisites:

JavaScript CMPT 281. Outline Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages

JavaScript Parser Infrastructure for Code Quality Analysisassets.en.oreilly.com/1/event/83/JavaScript Parser Infrastructure... · Benchmark corpus: jQuery, Prototype, MooTools, ExtCore,

Javascript & Angular .js for the enterprise, lessons learned, typescript scalable code quality

In search of JavaScript code quality: unit testing

High Performance JavaScript (Amazon DevCon 2011)

DLint: Dynamically Checking Bad Coding Practices in JavaScript · membering and following code quality rules in JavaScript further burdens the use of an already complicated language,

Identifying JavaScript Skimmers on High-Value Websites · Identifying JavaScript Skimmers on High-Value Websites Thomas Bower Abstract JavaScript Skimmers are a new type of malware

High Performance JavaScript

Tool Choice Matters: JavaScript Quality Assurance Tools

Object-Oriented JavaScript - Packt Publishing · PDF fileObject-Oriented JavaScript Create scalable, reusable high-quality ... You also learn about the scope of variables and JavaScript's

WTP Unit 4 JavaScript and DHTML. Javascript: – Client side scripting, – What is Javascript, – How to develop Javascript, – Simple Javascript, – Variables,

High Quality Midwifery Care - RCM · 2018-11-06 · 3 High Quality Midwifery Care High Quality Midwifery Care Foreword Delivering high quality maternity care is the responsibility

Developing High Performance Websites and Modern Apps with JavaScript and HTML5

Tabla de contenido - bibing.us.esbibing.us.es/proyectos/abreproy/12355/fichero/ANEXO_A.pdf( Object-Oriented JavaScript. Create scalable, reusable high-quality JavaScript applications

JavaScript Parser Infrastructure for Code Quality Analysis

Quality assurance for javascript

High-quality content for high-quality coaching€¦ · High-quality content for high-quality coaching New Edition! Set the foundation for becoming ... using social media, and avoiding

WORK EXPERIENCE - Fahran · + Ruby, Sinatra as a method of delivering high-quality code. + HTML, CSS, Javascript + Learned the value of maintaining simplicity and + Git, Cl, Jenkins,

Mastering JavaScript High Performance - Sample Chapter

High Performance Kick Ass Web Apps (JavaScript edition)

Understanding, measuring and improving code quality in JavaScript

JavaScript Best Practices Learn How to Write Better Quality JavaScript Software University Technical Trainers SoftUni Team

High Quality Early Learning Settings Depend on a High ... · High-Quality Early Learning Settings Depend on a High-Quality Workforce Low Compensation Undermines Quality “In today’s

High Performance JavaScript 2011

How high quality language environments create high quality ... for... · How high quality language environments create high quality learning environments Kathy Hirsh-Pasek Temple

1 JavaScript 1. 2 Java vs. JavaScript Java –Is a high level programming language –Is platform independent –Runs on a standardized virtual machine

Beyond DOMReady: Ultra High-Performance Javascript

JavaScript 1 for high school

What is JavaScript? Embedding JavaScript with HTML JavaScript conventions Variables in JavaScript

High Performance JavaScript (YUIConf 2010)

IPT High Performance Reactive Programming with JAVA 8 and JavaScript

High productivity web development workflow - JavaScript Meetup Saigon 2014

Code quality e test automatizzati con JavaScript

High Performance JavaScript - jQuery Conference SF Bay Area 2010