EclipseCon: Next-generation JavaScript Language Tooling

Presented at EclipseCon NA 2014 (March 19, 2014):
https://www.eclipsecon.org/na2014/session/next-generation-javascript-language-tooling

Web applications written in JavaScript rapidly grow in size and complexity. Ensuring and tracking the quality of such large-scale complex applications are daunting, especially with the lack of proper language tooling. In this presentation, a new trend in emerging composeable JavaScript language tools will be discussed. Armed with those tools, a wide range of end-to-end quality workflow can be established, from simple static analysis, syntax augmentation/transformation, dynamic code analysis, as well as run-time complexity profiling.

Transcript

1. Next-Generation
   JavaScript
   Language Tooling
   @ariyahidayat
   March 19, 2014
   

   View Slide

2. http://todomvc.com/architecture-examples/backbone/
   

   View Slide

3. MyView = Backbone.View.extend({
   events: {
   'click .toggle': 'toggleCompletd',
   'click .destroy': 'clear',
   'blur .edit': 'close',
   },
   toggleCompleted: function () {
   this.model.toggle()
   },
   // and so on
   });
   Unexpected comma
   Missing semicolon
   

   View Slide

4. Tools separate us
   

   View Slide

5. Static analysis
   Dynamic analysis
   Transformation
   

   View Slide

6. Every tool is open-source
   Tweak/customize/run with it!
   There are links
   (everywhere) to detailed
   articles/blog posts
   speakerdeck.com/ariya
   

   View Slide

7. Composeable Tools
   Write programs that do one thing and do it well.
   Write programs to work together.
   Write programs to handle text streams,
   because that is a universal interface.
   

   View Slide

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

   View Slide

9. Building Blocks → Tools
   Parser
   Code
   Generator
   Obvious examples: minifier, obfuscator,
   ...
   

   View Slide

10. Execution Visualization
    http://int3.github.io/metajs/
    

    View Slide

11. Static Analysis
    

    View Slide

12. Stray Logging
    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 });
    }
    http://ariya.ofilabs.com/2013/04/automagic-removal-of-javascript-logging.html
    

    View Slide

13. Boolean Traps reload(x, y, false)
    function checkLastArgument(node) {
    var args = node['arguments'];
    if (args.length < 2) {
    return;
    }
    if (typeof args[args.length - 1].value === 'boolean') {
    report(node, 'Dangerous Boolean literal');
    }
    }
    http://ariya.ofilabs.com/2012/06/detecting-boolean-traps-with-esprima.html
    

    View Slide

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

    View Slide

15. Cyclomatic Complexity
    http://ariya.ofilabs.com/2012/12/complexity-analysis-of-javascript-code.html
    if (true) "foo"; else "bar";
    Control Flow Graph
    6 edges
    6 nodes
    1 exit
    Cyclomatic Complexity = 2
    

    View Slide

16. Monitoring of Complexity
    http://ariya.ofilabs.com/2013/05/continuous-monitoring-of-javascript-code-complexity.html
    

    View Slide

17. “YOU SHALL NOT PASS!”
    — Darth Vader
    

    View Slide

18. Complexity Visualization
    http://ariya.ofilabs.com/2013/01/javascript-code-complexity-visualization.html
    

    View Slide

19. Transformation
    

    View Slide

20. Source Transformation
    Parser
    Code
    Generator
    In-place
    Modification
    Non-Destructive Regenerative
    http://ariya.ofilabs.com/2013/06/javascript-source-transformation-non-destructive-vs-regenerative.html
    

    View Slide

21. String Literal Quotes
    http://ariya.ofilabs.com/2012/02/from-double-quotes-to-single-quotes.html
    console.log('Hello')
    console.log("Hello")
    

    View Slide

22. ES6 Lexical Block Scope
    http://ariya.ofilabs.com/2013/05/es6-and-block-scope.html
    function f() {
    let j = data.length;
    console.log(j, 'items');
    for (let i = 0; i < j; ++i) {
    let j = data[i] * data[i];
    console.log(j); // squares
    }
    }
    function f() {
    var j = data.length;
    console.log(j, 'items');
    for (var i = 0; i < j; ++i) {
    var j$0 = data[i] * data[i];
    console.log(j$0); // squares
    }
    }
    

    View Slide

23. ES6 “Class” at
    class Derived extends Base {
    constructor(value) {
    super(value + 1);
    }
    getValue() {
    return super.getValue() - 1;
    }
    static getName() {
    return "Derived";
    }
    }
    http://benjamn.github.io/fluent2014-talk/#/26
    function Derived(value) {
    Base.call(this, value + 1);
    }
    Derived.prototype = Object.create(Base.
    prototype);
    Derived.prototype.constructor = Derived;
    Derived.prototype.getValue = function()
    {
    return Base.prototype.getValue.call
    (this) - 1;
    };
    Derived.getName = function() {
    return "Derived";
    };
    

    View Slide

24. Dynamic Analysis
    

    View Slide

25. Fast = Enough?
    Alice
    Bob
    Chuck
    Dan
    ...
    Bob
    Alice
    Dan
    Chuck
    ...
    Sort
    How’s the speed?
    2 ms to sort 10
    contacts
    

    View Slide

26. Array.prototype.swap = function (i, j) {
    var k = this[i]; this[i] = this[j]; this[j] = k;
    }
    function sort(list) {
    var items = list.slice(0), swapped = false, p, q;
    for (p = 1; p < items.length; ++p) {
    for (q = 0; q < items.length - p; ++q) {
    if (items[q + 1] < items[q]) {
    items.swap(q, q + 1);
    swapped =true;
    }
    }
    if (!swapped) break;
    }
    return items;
    }
    Bubble Sort
    ???
    

    View Slide

27. Run-time Complexity
    http://ariya.ofilabs.com/2012/01/scalable-web-apps-the-complexity-issue.html
    Array.prototype.swap = function (i, j) {
    var k = this[i]; this[i] = this[j]; this[j] = k;
    }
    Array.prototype.swap = function (i, j) {
    Log({ name: 'Array.prototype.swap', lineNumber: 1, range: [23, 94] });
    var k = this[i]; this[i] = this[j]; this[j] = k;
    }
    http://esprima.org/demo/functiontrace.html
    

    View Slide

28. View Slide

29. T D D B D D
    P D D
    

    View Slide

30. Code Coverage with Istanbul
    function inc(p, q) {
    if (q == undefined) q = 1;
    return p + q/q;
    }
    assert("inc(4) must give 5", inc(4) == 5);
    E = Else is not taken
    http://ariya.ofilabs.com/2012/12/javascript-code-coverage-with-istanbul.html
    

    View Slide

31. http://ariya.ofilabs.com/2012/09/the-hidden-trap-of-code-coverage.html
    Does not catch the missing
    code sequence
    

    View Slide

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

    View Slide

33. “If you think JSLint hurts
    your feelings, wait until you
    use Istanbul.”
    

    View Slide

34. ...I gave you my heart
    But the very next day you gave it away...
    

    View Slide

35. Final Words
    

    View Slide

36. http://ariya.ofilabs.com/2012/12/quality-code-via-multiple-layers-of-defense.html
    Being Defensive
    

    View Slide

37. Being Objective
    Mr. Reviewer
    Your code sucks!
    Your code sucks!
    

    View Slide

38. Tools: The Final Frontier
    To boldly analyze what no man has
    analyzed before...
    

    View Slide

39. Thank You
    shapesecurity.com
    @ariyahidayat
    

    View Slide

40. Evaluate This Session
    Sign-in: www.eclipsecon.org
    Select session from schedule
    Evaluate:
    1
    2
    3
    

    View Slide