HTML5 Developer Conference 2013: Javascript Insights

Click here to load reader

  • date post

    12-Feb-2017
  • Category

    Software

  • view

    154
  • download

    0

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

AriyaAnn

Why JavaScript code quality tools?

Its how we work together.

style guide

And its how we level up.

Standards

varied...

JavaScript Tools

some to be developed.

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

Power(ful) tools

LinterCode CoverageCyclomatic Complexity

Linter

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

Code CoverageIstanbulhttp://ariya.ofilabs.com/2012/12/javascript-code-coverage-with-istanbul.html

http://gotwarlost.github.io/istanbul/

http://ariya.ofilabs.com/2012/12/javascript-code-coverage-with-istanbul.html

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 = 2JSComplexityhttp://jscomplexity.org

Complexity Visualization

https://github.com/jsoverson/platoPlatoContinuous Delivery for JavaScript ApplicationsJarrod OversonRoom E-131 Wed 11.40am

https://ariya.ofilabs.com/2013/01/javascript-code-complexity-visualization.html

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.

Demos

Hard Thresholds on Code Coveragehttp://ariya.ofilabs.com/2013/05/hard-thresholds-on-javascript-code-coverage.htmlistanbul 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;

Esprimahttp://esprima.org

console.log? debugger?function detect_console(code) { function check(node) { if (node.type === 'CallExpression') { if (node.callee.type === 'MemberExpression') { if (node.callee.object.name === '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 modehttp://ariya.ofilabs.com/2012/10/validating-strict-mode.html

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

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

https://github.com/kesla/node-leakyhttp://ariya.ofilabs.com/2012/11/polluting-and-unused-javascript-variables.html

Unused Variableshttp://ariya.ofilabs.com/2012/11/polluting-and-unused-javascript-variables.htmltest.js height - on line 1

https://github.com/Kami/node-unusedvar height;// some fancy processingheigth = 200;

Declared but not used

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

http://ariya.ofilabs.com/2012/10/detecting-nested-ternary-conditionals.html

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);http://ariya.ofilabs.com/2012/06/detecting-boolean-traps-with-esprima.htmlThe more the merrierevent.initKeyEvent("keypress", true, true,null, null, false, false, false, false, 9, 0);

Future lintingESLintHow we might collect the tools we make

https://github.com/nzakas/eslint

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']}

Metadata

Final Words

Tools separate us

GoodAwesomeEven more awesome

Thank you!!!@ariyahidayat

@arobson

www.htmlhive.comariya.ofilabs.comspeakerdeck.com/ariya