HTML5 Developer Conference 2013: Javascript Insights

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of HTML5 Developer Conference 2013: Javascript Insights

JavaScript InsightsTools for Improving JS Code QualityAriya Hidayat@ariyahidayatHTML5 Developer ConferenceSan Francisco, October 22, 2013Ann Robson@arobson

car salesman


Why JavaScript code quality tools?

Its how we work together.

style guide

And its how we level up.



JavaScript Tools

some to be developed.

ALL are open source?$0$0$0$0?

Power(ful) tools

LinterCode CoverageCyclomatic Complexity


JSHinthttp://jshint.comEnforces style guideTeam standards: .jshintrc

Code CoverageIstanbul

If you think JSLint hurts your feelings,wait until you use Istanbul

@davglass from Yahoo!

Code Complexityif (true) "foo"; else "bar";

Control Flow Graph

6 edges6 nodes1 exit

Cyclomatic Complexity = 2JSComplexity

Complexity Visualization Delivery for JavaScript ApplicationsJarrod OversonRoom E-131 Wed 11.40am

Pre-commit Hooks

May include all tools previously mentioned: - linting - code coverage - code complexityAlso, - validation: esvalidate - custom

Will prevent you from committing code that doesnt meet your standards -- whatever you decide your standards are.


Hard Thresholds on Code Coverage check-coverage --statement -5 --branch -3 --function 100

Pre-commit Hooks Escape!git commit -n

whenever you use this, dont feel bad. at least you HAVE a pre-commit hook!

Composable Tools

Stray loggingStrict mode violationsUnused variablesNested ternary conditionalsPolluting variablesBoolean traps

{ type: "Program", body: [ { type: "VariableDeclaration", declarations: [ { type: "VariableDeclarator", id: { type: "Identifier", name: "answer" }, init: { type: "Literal", value: 42, raw: "42" } } ], kind: "var" } ]}Code Syntax Treevar answer = 42;


console.log? debugger?function detect_console(code) { function check(node) { if (node.type === 'CallExpression') { if (node.callee.type === 'MemberExpression') { if ( === 'console') { alert('console call at line', node.loc.start.line); } } } } var tree = esprima.parse(code, { loc: true }); estraverse.traverse(tree, { enter:check });}

Strict Mode Validator'use strict';block = { color: 'blue', height: 20, width: 10, color: 'red'};

Duplicate data property in objectliteral not allowed in strict mode

Polluting Variablesvar height;// some fancy processingheigth = 200;

Leaks to globaltest.js:3heigth = 200;^LeakError: global leak detected: heigth

Unused Variables height - on line 1 height;// some fancy processingheigth = 200;

Declared but not used

Nested Ternary Conditionalsvar str = (age < 1) ? "baby" : (age < 5) ? "toddler" : (age < 18) ? "child": "adult";

Boolean Trap FinderCan you make up your mind?treeItem.setState(true, false);Obfuscated choicevar volumeSlider = new Slider(false);Double-negativecomponent.setHidden(false);filter.setCaseInsensitive(false); more the merrierevent.initKeyEvent("keypress", true, true,null, null, false, false, false, false, 9, 0);

Future lintingESLintHow we might collect the tools we make

use both. trans to multilayered

Multi-layered Defense

Multi-Layer DefenseEditor: syntax validation, linting

The earlier the better.Pre-commit hooks: validation, linting, unit tests, code complexity thresholds, code coverage minimum

CI Server: validation, linting, unit tests, code complexity thresholds, code coverage minimum

Code Flowers

Application StructureMyApp.create('MyApp.Person', { name: 'Joe Sixpack', age: 42,

constructor: function(name) {}, walk: function(steps) {} run: function(steps) {}


{ objectName: 'MyApp.Person', functions: ['walk', 'run'], properties: ['name', 'age']}


Final Words

Tools separate us

GoodAwesomeEven more awesome

Thank you!!!@ariyahidayat