Your SlideShare is downloading. ×
0
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
High-Quality JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

High-Quality JavaScript

591

Published on

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.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
591
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. High quality
  2. MarcBächingerPrincipalconsultant,HTML5Evangelist talkpoweredbyZühlkeJScrew! MichaelSchnyderSoftwareEngineer,Dronepilot
  3. THEY SAID: „JAVASCRIPT ISTHE FUTURE OF COMPUTING“
  4. THEY SAID: „JAVASCRIPT ISTHE FUTURE OF COMPUTING“
  5. dynamictyping very-latebinding
  6. dynamictyping very-latebinding must run to be verified!
  7. 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);
 }
 });
  8. BONE AND BANE OF JS $.ajax({
 url: "person/42",
 dataType: "json",
 success: function (obj) {
 $.extend(Person.prototype, obj);
 }
 });
  9. 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);
 }
 });
  10. COUNTERMEASURES!
  11. DEVELOPMENT CYCLE findbugs, checkstyle IDE compile testing jUnit selenium Java
  12. DEVELOPMENT CYCLE findbugs, checkstyle IDE compile testing jUnit selenium Java
  13. DEVELOPMENT CYCLE static code analysis development productionalizing concatenate minimize testing unit test component tests JavaScript findbugs, checkstyle IDE compile testing jUnit selenium Java
  14. ARCHITECTURE AND DESIGN
  15. MODULES! require(["app/services"], 
 function(services) {
 // use services
 }
 );
  16. TOOL CHAIN
  17. ! TOOL PARADE jshint uglify esprima require.js less bower istanbul karma jasmine
  18. DEVELOPMENT CYCLE grunt jshint IDE/Editor/CI productionalizing cssmin htmlcompress testing jasmine qunit uglify concatenate
  19. 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.
  20. RELEASE WITH GRUNT jshint copy concat uglify cssmin htmlprocessor karma checkstyle findbugs copywebfilestodistributiondirectory concatenatefile(js,css) minimize runtests
  21. GRUNT AS OFTEN AS IT GETS jshint copy concat uglify cssmin htmlprocessor karma
  22. GRUNT AS OFTEN AS IT GETS jshint copy concat uglify cssmin htmlprocessor karma onlocalfilechange
  23. GRUNT AS OFTEN AS IT GETS jshint copy concat uglify cssmin htmlprocessor karma onlocalfilechange onpushtorepository
  24. TOOL INTEGRATION
  25. BARE BONE BUILD ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- *.html *.js *.css ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- Editor Browser
  26. CI MIT JENKINS
  27. CI MIT JENKINS
  28. WEBSTORM IDE
  29. MICROSOFT What is Microsofts answer for developing Enterprise JavaScript Applications?
  30. JAVASCRIPT FOR VISUAL STUDIO “Enable efficient SPA development on the .NET platform by providing a proven, enterprise-ready toolchain”
  31. ZÜHLKE SPA STACK
  32. HIGH QUALITY JAVASCRIPT ?
  33. WHATTO DO ? leverageJavaScriptbuildtools toolintegration continuousintegration unittesting architectureanddesign
  34. thx! @marcbaechinger
  35. BACKUP SLIDES
  36. 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
 }
 ]
 }
 },
 [...]
 }
 };
  37. 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"
 }
 }
  38. 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"
 }
 }
  39. GRUNT: LIVE RELOAD ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- *.html *.js *.css ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- Editor Browser
  40. GRUNT: LIVE RELOAD ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- *.html *.js *.css ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- Editor Browser watches 1
  41. GRUNT: LIVE RELOAD ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- *.html *.js *.css ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- Editor Browser save 2 watches 1
  42. GRUNT: LIVE RELOAD ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- *.html *.js *.css ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- Editor Browser save 2 watches 1 request reload 3
  43. GRUNT: LIVE RELOAD ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- *.html *.js *.css ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- ---------------
 --------------- --------------- --------------- --------------- Editor Browser save 2 watches 1 request reload 3 load 4
  44. 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"
 }
 }
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. 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
  52. RUNNING GRUNT WITH MAVEN • yeoman-maven-plugin • Exec Maven plugin

×