Post on 05-Jul-2015
description
JSHint Learning JavaScript the Hard Way
Adrian-Tudor Pănescutudor.panescu@cynny.com
About me
● ~5 years of Computer Science● Germany, Switzerland, Romania● NEC, CERN, Cynny Social Cloud● Web Applications Development
2jobs@cynny.com
JavaScript
● Used first time around 2010● Recently moved from Python● Open Source: Invenio, Intro.js, silog
3jobs@cynny.com
First Real JavaScript Project
● Inherited project with some (many) issues
● Web Analytics/ Advertisements Web App
● Shared client/ server code base
4jobs@cynny.com
Taming the Beast
● First step: understand the code● pylint/ PEP8 → JSHint● Cleanup → Discovery ↔ Learning
5jobs@cynny.com
JSHint
● Static code analysis● Highly-configurable● Open-source, used by:
○ Mozilla○ Twitter○ Facebook○ Apache
6jobs@cynny.com
What would JSHint complain about?
gcd = function(first_number, second_number) {
var result;
while (first_number != second_number)
if (first_number > second_number) {
var first_number = first_number - second_number;
} else if (first_number <= second_number) {
second_number -= first_number;
} else {}
console.log('result is:', first_number | second_number);
}(12, 24)
7jobs@cynny.com
First run
● maxerr = 50, hit that● Things started looking suspicious● Did the guys before me have any idea
what they were doing?● Do I have any idea about what I am
doing?
8jobs@cynny.com
eqeqeq
● Expected '===' and instead saw '=='.● Anyone coming from any other
language to JS will find this amazing● [ ] == 0 // true● [ ] === 0 // false
9jobs@cynny.com
eqeqeq (Cont.)
10jobs@cynny.com
eqeqeq (Cont.)
jobs@cynny.com 10
eqeqeq (Cont.)
● The Strict Equals Operator (===): shorter, more straight-forward algorithm
● Better for someone accustomed to this behaviour
● Inexperienced devs might miss the point of == and experience some sleepless nights
jobs@cynny.com 11
foo is already defined (-W004)
jobs@cynny.com 12
Deeper the Rabbit Hole - latedef
jobs@cynny.com 13
Is this real life?
● Function scope - funcscope, shadow● Hoisting● Closures● Missing var… but not in strict mode,
whatever that is
jobs@cynny.com 14
Semicolons: FUD or truth?
jobs@cynny.com 15
Semicolons: FUD or truth?
jobs@cynny.com 15
asi/ lastsemic (Cont.)
● Zen of Python: “Explicit is better than implicit.”
● Controversial, but smart life decision for (junior?) developers
jobs@cynny.com 16
Curly
jobs@cynny.com 17
forin
jobs@cynny.com 18
forin (Cont.)
● The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
● So, it doesn’t work like Python…? (obv.)● typeof [] === ‘object’ - I am really confused
now.
jobs@cynny.com 19
Code quality
● quotmark● immed● boss● newcap● expr● notypeof● freeze
● maxlen● unused● loopfunc● camelcase● es3/ esnext● noempty● nonew
jobs@cynny.com 20
Function over style?
● maxparams - maybe use an args object?
● maxstatements - don’t make me scroll● maxdepth - nests, nests everywhere● maxcomplexity - if for if wtf if while if
else
21jobs@cynny.com
Conclusions
● Static code analysis: controversial but will help novices (and not only) write maintainable code
● Expose juniors to some new concepts○ latedef and -W004 will send you
through a long spiritual journey
jobs@cynny.com 22
Conclusions (Cont.)
● Can help maintain some standards, especially among heterogeneous teams
● My project had a good outcome, some JS learned
● Still using JSHint
jobs@cynny.com 23
Your questions,answered.
jobs@cynny.com 24
Other tools
● JSLint - more explanatory, explicit○ jslinterrors.com
● ESLint - very configurable, check it out!● Google Closure Linter - strict typing● Flow - static type checker● JSure, JavaScript Lint
25jobs@cynny.com
How do I use it?
● Editor plugin● Grunt task: grunt-contrib-jshint● Git hook: pre-push, merge request● Continuous integration step
26jobs@cynny.com