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

572

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
572
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
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

×