High-Quality JavaScript
3 likes1,154 views
The document discusses best practices for developing high quality JavaScript applications. It recommends leveraging build tools like Grunt and integrating tools for linting, testing, minification and concatenation. Continuous integration with Jenkins is also suggested, as well as using IDEs and editors that support JavaScript. Architectural patterns like modules and design principles are important.
![MODULES!
require(["app/services"],
function(services) {
// use services
}
);](https://image.slidesharecdn.com/high-quality-javascript-140327082004-phpapp01/85/High-Quality-JavaScript-16-320.jpg)
![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
}
]
}
},
[...]
}
};](https://image.slidesharecdn.com/high-quality-javascript-140327082004-phpapp01/85/High-Quality-JavaScript-41-320.jpg)
High-Quality JavaScript
- 1. High quality
- 3. THEY SAID: „JAVASCRIPT ISTHE FUTURE OF COMPUTING“
- 4. THEY SAID: „JAVASCRIPT ISTHE FUTURE OF COMPUTING“
- 7. dynamictyping very-latebinding must run to be verified!
- 8. 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); } });
- 9. BONE AND BANE OF JS $.ajax({ url: "person/42", dataType: "json", success: function (obj) { $.extend(Person.prototype, obj); } });
- 10. 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); } });
- 11. COUNTERMEASURES!
- 14. DEVELOPMENT CYCLE static code analysis development productionalizing concatenate minimize testing unit test component tests JavaScript findbugs, checkstyle IDE compile testing jUnit selenium Java
- 16. MODULES! require(["app/services"], function(services) { // use services } );
- 17. TOOL CHAIN
- 21. 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.
- 22. RELEASE WITH GRUNT jshint copy concat uglify cssmin htmlprocessor karma checkstyle findbugs copywebfilestodistributiondirectory concatenatefile(js,css) minimize runtests
- 23. GRUNT AS OFTEN AS IT GETS jshint copy concat uglify cssmin htmlprocessor karma
- 24. GRUNT AS OFTEN AS IT GETS jshint copy concat uglify cssmin htmlprocessor karma onlocalfilechange
- 25. GRUNT AS OFTEN AS IT GETS jshint copy concat uglify cssmin htmlprocessor karma onlocalfilechange onpushtorepository
- 26. TOOL INTEGRATION
- 27. BARE BONE BUILD --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- *.html *.js *.css --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- Editor Browser
- 28. CI MIT JENKINS
- 29. CI MIT JENKINS
- 30. WEBSTORM IDE
- 31. MICROSOFT What is Microsofts answer for developing Enterprise JavaScript Applications?
- 34. JAVASCRIPT FOR VISUAL STUDIO “Enable efficient SPA development on the .NET platform by providing a proven, enterprise-ready toolchain”
- 35. ZÜHLKE SPA STACK
- 36. HIGH QUALITY JAVASCRIPT ?
- 40. BACKUP SLIDES
- 41. 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 } ] } }, [...] } };
- 42. 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" } }
- 43. 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" } }
- 44. GRUNT: LIVE RELOAD --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- *.html *.js *.css --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- Editor Browser
- 45. GRUNT: LIVE RELOAD --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- *.html *.js *.css --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- Editor Browser watches 1
- 46. GRUNT: LIVE RELOAD --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- *.html *.js *.css --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- Editor Browser save 2 watches 1
- 47. GRUNT: LIVE RELOAD --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- *.html *.js *.css --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- Editor Browser save 2 watches 1 request reload 3
- 48. GRUNT: LIVE RELOAD --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- *.html *.js *.css --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- --------------- Editor Browser save 2 watches 1 request reload 3 load 4
- 49. 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" } }
- 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
- 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
- 52. 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
- 53. 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
- 54. 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
- 55. 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
- 56. 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
- 57. RUNNING GRUNT WITH MAVEN • yeoman-maven-plugin • Exec Maven plugin