Integrating Code Quality tools into your jQuery Development Workflow

Code Quality Anton Kovalyov @antonkovalyovSunday, April 17, 2011

Who am I? • Anton Kovalyov • Front-end Engineer at Disqus • JSHint maintainerSunday, April 17, 2011

A (very) Brief History of JavaScriptSunday, April 17, 2011

Creation • Prototyped by Brendan Eich in 10 days • Supposed to be more like LISP but got Java syntax • Still has some very nice features: • Functions are ﬁrst class objects • Prototype-based object model • Etc.Sunday, April 17, 2011

Inglourious Browsers • Got hurt by the Browser Wars • Has terrible API (the DOM) • Inconsistency among implementations • Was considered a “toy language” for too longSunday, April 17, 2011

A New Hope • Transitioned from a toy language to the next big thing in a very short period of time • Modern implementations are much faster • Popular libraries (jQuery anyone?) hotﬁx the language • Shifted to outside the browserSunday, April 17, 2011

School of thought: “safe” subset • Safe subset of the language that everybody must use • Good and bad parts have been deﬁned by a single person • To disagree is to be wrongSunday, April 17, 2011

School of thought: “safe” subset • Problem: bad parts are not necessarily bad, and good parts are not necessarily good • Examples: undeﬁned as a parameter, == null to check for null or undeﬁnedSunday, April 17, 2011

undeﬁned as an argument (function( window, undefined ) { // Use the correct document accordingly with window argument [...] var document = window.document; // ... window.jQuery = window.$ = jQuery; })(window);Sunday, April 17, 2011

== null to check for null and undeﬁned // [...] // Use native String.trim function whenever possible trim: trim ? function( text ) { return text == null ? “” : trim.call( text ); } : // [...]Sunday, April 17, 2011

JavaScript: The Worst PartSunday, April 17, 2011

JavaScript: The Worst Part Our ignorance (so, please, learn the language)Sunday, April 17, 2011

Mistakes made by JavaScript people var condition = true; if (condition) { function doSomething() { return “TRUE”; } else { function doSomething() { return “FALSE”; } } doSomething(); // “FALSE”Sunday, April 17, 2011

Mistakes made by JavaScript people var x = 0; for (var i = 0; i < 10; i++) { $.post(‘ajax/test’, function (data) { x = data.j + i; // i will always be 10 here }); }Sunday, April 17, 2011

Mistakes made by JavaScript people • Those things are very annoying • We can (and should) blame the language for some of them • But most of them can be easily detectedSunday, April 17, 2011

Code Quality Tools • Libraries (jQuery, Dojo, MooTools) • Unit tests (QUnit, Expresso) • Syntax checkers (JSHint, Closure Compiler) • Code reviews (your coworkers)Sunday, April 17, 2011

Syntax checkers • JavaScript Lint • Google Closure Compiler • JSLint • JSHintSunday, April 17, 2011

JSHint • Fork of Douglas Crockford’s JSLint • Parses JavaScript and JSON • Driven by JavaScript developer community • More options, less “crocklamations”Sunday, April 17, 2011

JSHintSunday, April 17, 2011

Usage • Web: jshint.com • Code: JSHINT(code, options, globals); • CLI: • npm install jshint • jshint ./jquery.js • Your favorite text editorSunday, April 17, 2011

Example outputSunday, April 17, 2011

Options • JSHint checks for most commonly made mistakes • Has di erent options to suit your programming style • Defaults are pretty safe • Options can be either set globally or per functionSunday, April 17, 2011

Example: eqnull /*global jQuery:false */ if (jQuery == null) { console.log(“No jQuery”); } (function () { /*jshint eqnull:true */ if (jQuery == null) { jQuery = {}; } }());Sunday, April 17, 2011

Example: eqnull /*global jQuery:false */ if (jQuery == null) { // Use ‘===’ to compare with ‘null’. console.log(“No jQuery”); } (function () { /*jshint eqnull:true */ if (jQuery == null) { jQuery = {}; // Read only. } }());Sunday, April 17, 2011

Globals • JSHint reports about all implied globals it can ﬁnd • You can specify your set of pre-deﬁned globals • Useful to detect leaking variablesSunday, April 17, 2011

Example: a bug in JSHint/JSLint var varstatement = stmt(var, function (prefix) { // [...] this.first = []; // [...] return this; }); // Somewhere else in the code varstatement.fud(true);Sunday, April 17, 2011

Example: a bug in JSHint/JSLint var varstatement = stmt(var, function (prefix) { // [...] this.first = []; // [...] return this; }); // Somewhere else in the code varstatement.fud.call(varstatement, true);Sunday, April 17, 2011

Two ways to ﬁx it • Use strict mode that will cause an error in runtime • Check implied global variables against your pre-deﬁned setSunday, April 17, 2011

What JSHint can’t do • JSHint can’t detect if your program: • is correct • is fast • has memory leaks • JSHint also can’t tell if your HTML5 is nativeSunday, April 17, 2011

IntegrationSunday, April 17, 2011

Git Hooks • Pre-commit hook to check all modiﬁed JavaScript ﬁles • Abort the commit if there are errors • Post-commit hook to check and email about new implied globalsSunday, April 17, 2011

Example: pre-commit hook import os def main(): “Checks your git commit with PyFlakes and JSHint” # [...] results = {} for file in get_files_changed(“*.js”): status, output = jshint(file) if status: results[file] = output if results: print_errors(results) sys.exit(1) # Abort the commit sys.exit(0) # All goodSunday, April 17, 2011

Tests • Authors can skip the hooks by using the git-commit -n option • So check all JavaScript ﬁles again, after the commit • Break the build if there are check errorsSunday, April 17, 2011

ExampleSunday, April 17, 2011

Plugins for your editor • Use them to check your code as you save • Emacs • VIM • TextMate • Sublime 2 • Visual Studio • and more!Sunday, April 17, 2011

Example: TextMate pluginSunday, April 17, 2011

XOXOSunday, April 17, 2011

Resources: • JSHint: jshint.com • MDC: developer.mozilla.org/en/JavaScript • JavaScript, JavaScript (by Angus Croll): javascriptweblog.wordpress.com • Perfection Kills (by kangax): perfectionkills.com • A Minute With Brendan (by Brendan Eich): aminutewithbrendan.com • JavaScript libraries and demos (by the person next to you)Sunday, April 17, 2011

http://lanyrd.com	125
http://limelight.loc.argosit.net	6
https://lanyrd.com	1
http://184.72.218.145	1

Integrating Code Quality tools into your jQuery Development Workflow

by antonkovalyov on Apr 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 133

Statistics

Integrating Code Quality tools into your jQuery Development Workflow — Presentation Transcript