Next-Generation JavaScript Language Tooling

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.

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

November 07, 2013
Tweet

Transcript

  1. @ariyahidayat

  2. None
  3. None
  4. None
  5. None
  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.
  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;
  8. None
  9. None
  10. 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
  11. 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'); } }
  12. http://ariya.ofilabs.com/2012/10/detecting-nested-ternary-conditionals.html var str = (age < 1) ? "baby" :

    (age < 5) ? "toddler" : (age < 18) ? "child": "adult";
  13. http://ariya.ofilabs.com/2012/12/complexity-analysis-of-javascript-code.html if (true) "foo"; else "bar";

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

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

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

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

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

  20. 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 } }
  21. None
  22. Alice Bob Chuck Dan ... Bob Alice Dan Chuck ...

  23. 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; }
  24. 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; }
  25. None
  26. None
  27. 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
  28. http://ariya.ofilabs.com/2012/09/the-hidden-trap-of-code-coverage.html

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

  30. “If you think JSLint hurts your feelings, wait until you

    use Istanbul.”
  31. ...I gave you my heart But the very next day

    you gave it away...
  32. None
  33. http://ariya.ofilabs.com/2012/12/quality-code-via-multiple-layers-of-defense.html

  34. Mr. Reviewer

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