Next-Generation JavaScript Language Tooling

YUI Conf 2013 - http://yuilibrary.com/yuiconf/2013/

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. @ariyahidayat
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. 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

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

   View Slide

8. →
   

   View Slide

9. View Slide

10. View Slide

11. 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

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

    View Slide

13. 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

14. http://ariya.ofilabs.com/2012/12/complexity-analysis-of-javascript-code.html
    if (true) "foo"; else "bar";
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. View Slide

19. Non-Destructive Regenerative
    http://ariya.ofilabs.com/2013/06/javascript-source-transformation-non-destructive-vs-regenerative.html
    

    View Slide

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

    View Slide

21. 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

22. View Slide

23. Alice
    Bob
    Chuck
    Dan
    ...
    Bob
    Alice
    Dan
    Chuck
    ...
    

    View Slide

24. 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;
    }
    

    View Slide

25. 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;
    }
    

    View Slide

26. View Slide

27. View Slide

28. function inc(p, q) {
    if (q == undefined) q = 1;
    return p + q/q;
    }
    assert("inc(4) must give 5", inc(4) == 5);
    http://ariya.ofilabs.com/2012/12/javascript-code-coverage-with-istanbul.html
    

    View Slide

29. http://ariya.ofilabs.com/2012/09/the-hidden-trap-of-code-coverage.html
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. View Slide

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

    View Slide

35. Mr. Reviewer
    

    View Slide

36. View Slide

37. @ariyahidayat
    ariya.ofilabs.com/highlights
    speakerdeck.com/ariya
    Some artworks are from http://openclipart.org.
    

    View Slide