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. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 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.
  6. 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;
  7. 8.

  8. 9.
  9. 10.
  10. 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
  11. 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'); } }
  12. 18.
  13. 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 } }
  14. 22.
  15. 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; }
  16. 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; }
  17. 26.
  18. 27.
  19. 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
  20. 33.
  21. 36.