JavaScript Insights

HTML5 Developer Conference. San Francisco, October 22 2013.

There are many valuable JavaScript analysis tools for delivering insights into code quality. Although open source and trivial to implement, such tools are not widely adopted by development teams, despite the value and security they offer. This talk presents a handful of such projects as essential resources for the JavaScript developer -- for cyclomatic complexity monitoring, dynamic code coverage analysis, pre-commit hooks, and other code metrics.

Transcript

1. JavaScript Insights
   Tools for Improving JS Code Quality
   Ariya Hidayat
   @ariyahidayat HTML5 Developer Conference
   San Francisco, October 22, 2013
   Ann Robson
   @arobson
   

   View Slide

2. car salesman
   Ariya
   Ann
   

   View Slide

3. Why JavaScript code quality tools?
   

   View Slide

4. It’s how we work together.
   

   View Slide

5. And it’s how we level up.
   

   View Slide

6. varied...
   JavaScript Tools
   some to be developed…. ALL are open source
   ?
   $0
   $0
   $0
   $0
   ?
   

   View Slide

7. Power(ful) tools
   

   View Slide

8. Linter
   Code Coverage
   Cyclomatic Complexity
   

   View Slide

9. Linter
   JSHint http://jshint.com
   Enforces style guide
   Team standards: .jshintrc
   

   View Slide

10. Code Coverage
    Istanbul
    http://ariya.ofilabs.com/2012/12/javascript-code-coverage-with-istanbul.html
    http://gotwarlost.github.io/istanbul/
    

    View Slide

11. If you think JSLint hurts your feelings,
    wait until you use Istanbul
    @davglass from Yahoo!
    

    View Slide

12. Code Complexity
    if (true) "foo"; else "bar";
    Control Flow Graph
    6 edges
    6 nodes
    1 exit
    Cyclomatic Complexity = 2
    JSComplexity http://jscomplexity.org
    

    View Slide

13. Complexity Visualization
    https://github.com/jsoverson/plato
    Plato
    Continuous Delivery for JavaScript Applications
    Jarrod Overson
    Room E-131 Wed 11.40am
    

    View Slide

14. Pre-commit Hooks
    May include all tools previously mentioned:
    - linting
    - code coverage
    - code complexity
    Also,
    - validation: esvalidate
    - custom
    

    View Slide

15. Demos
    

    View Slide

16. Hard Thresholds on Code Coverage
    http://ariya.ofilabs.com/2013/05/hard-thresholds-on-javascript-code-coverage.html
    istanbul check-coverage --statement -5 --branch -3 --function 100
    

    View Slide

17. Pre-commit Hooks Escape!
    git commit -n
    

    View Slide

18. Composable Tools
    

    View Slide

19. Stray logging Strict mode violations
    Unused variables Nested ternary conditionals
    Polluting variables Boolean traps
    

    View Slide

20. {
    type: "Program",
    body: [
    {
    type: "VariableDeclaration",
    declarations: [
    {
    type: "VariableDeclarator",
    id: {
    type: "Identifier",
    name: "answer"
    },
    init: {
    type: "Literal",
    value: 42,
    raw: "42"
    }
    }
    ],
    kind: "var"
    }
    ]
    }
    Code → Syntax Tree
    var answer = 42;
    Esprima http://esprima.org
    

    View Slide

21. 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 });
    }
    

    View Slide

22. Strict Mode Validator
    'use strict';
    block = {
    color: 'blue',
    height: 20,
    width: 10,
    color: 'red'
    };
    Duplicate data property in object
    literal not allowed in strict mode
    http://ariya.ofilabs.com/2012/10/validating-strict-mode.html
    

    View Slide

23. Polluting Variables
    var height;
    // some fancy processing
    heigth = 200;
    Leaks to
    global
    test.js:3
    heigth = 200;
    ^
    LeakError: global leak
    detected: heigth
    https://github.com/kesla/node-leaky
    http://ariya.ofilabs.com/2012/11/polluting-and-unused-javascript-variables.html
    

    View Slide

24. Unused Variables
    http://ariya.ofilabs.com/2012/11/polluting-and-unused-javascript-variables.html
    test.js
    height - on line
    1
    https://github.com/Kami/node-unused
    var height;
    // some fancy processing
    heigth = 200;
    Declared but
    not used
    

    View Slide

25. Nested Ternary Conditionals
    var str = (age < 1) ? "baby" :
    (age < 5) ? "toddler" :
    (age < 18) ? "child": "adult";
    http://ariya.ofilabs.com/2012/10/detecting-nested-ternary-conditionals.html
    

    View Slide

26. “Boolean Trap” Finder
    Can you make up your mind? treeItem.setState(true, false);
    Obfuscated choice var volumeSlider = new Slider(false);
    Double-negative component.setHidden(false);
    filter.setCaseInsensitive(false);
    http://ariya.ofilabs.com/2012/06/detecting-boolean-traps-with-esprima.html
    The more the merrier event.initKeyEvent("keypress", true, true,
    null, null, false, false, false, false, 9, 0);
    

    View Slide

27. Future linting
    ESLint
    How we might collect the tools we make
    https://github.com/nzakas/eslint
    

    View Slide

28. Multi-layered Defense
    

    View Slide

29. View Slide

30. Multi-Layer Defense
    Editor: 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
    

    View Slide

31. Code Flowers
    

    View Slide

32. Application Structure
    MyApp.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
    

    View Slide

33. Final Words
    

    View Slide

34. Tools separate us
    

    View Slide

35. Good
    Awesome
    Even more
    awesome
    

    View Slide

36. Thank you!!!
    @ariyahidayat
    @arobson
    www.htmlhive.com ariya.ofilabs.com
    speakerdeck.com/ariya
    

    View Slide