Babel: Beyond the Basics - MelbJS March 2015

9b7cbca4917f83679696b0924d0ed09d?s=47 sebmck
March 11, 2015

Babel: Beyond the Basics - MelbJS March 2015

9b7cbca4917f83679696b0924d0ed09d?s=128

sebmck

March 11, 2015
Tweet

Transcript

  1. None
  2. What is it? • A compiler for your JavaScript. •

    Supports: • ES6+ • JSX • Flow
  3. Learn ES6 https://babeljs.io/docs/learn-es6/

  4. How it works Parser Turn code into an AST Transformer

    Manipulate AST Generator Turn AST back into code
  5. Transformers • asyncToGenerator • bluebirdCoroutines • es3.memberExpressionLiterals • es3.propertyLiterals •

    es5.properties.mutators • es6.arrowFunctions • es6.blockScoping • es6.blockScopingTDZ • es6.classes • es6.constants • es6.destructuring • es6.forOf • es6.modules • es6.objectSuper • es6.parameters.default • es6.parameters.rest • es6.properties.computed • es6.properties.shorthand • es6.regex.sticky • es6.regex.unicode • es6.spread • es6.symbols • es6.tailCall • es6.templateLiterals • es7.abstractReferences • es7.comprehensions • es7.exponentiationOperator • es7.objectRestSpread • flow • playground.malletOperator • playground.memoizationOperator • playground.methodBinding • playground.objectGetterMemoization • react • reactCompat • regenerator • runtime • spec.blockScopedFunctions • spec.functionName • spec.protoToAssign • spec.undefinedToVoid • strict • utility.deadCodeElimination • utility.inlineEnvironmentVariables • utility.inlineExpressions • utility.removeConsole • utility.removeDebugger • validation.react
  6. es6.spread

  7. var _toConsumableArray = ...; function add(a, b) { return a

    + b; } // var nums = [1, 2]; console.log( add.apply(undefined, _toConsumableArray(nums)) ); function add(a, b) { return a + b; } // var nums = [1, 2]; console.log( add(...nums) ); Call
  8. function add(a, b) { return a + b; } var

    nums = [1, 2]; console.log( add.apply(undefined, nums) ); function add(a, b) { return a + b; } var nums = [1, 2]; console.log( add(...nums) ); Type tracking
  9. var _toConsumableArray = ...; //var team1 = ["React", "Ember"]; //var

    team2 = ["Angular", "Polymer"]; var players = [].concat(_toConsumableArray(team1) , _toConsumableArray(team2)); //var team1 = ["React", "Ember"]; //var team2 = ["Angular", "Polymer"]; var players = [...team1, ...team2]; Array
  10. var team1 = ["React", "Ember"]; var team2 = ["Angular", "Polymer"];

    var players = [...team1, ...team2]; Internal type tracking var team1 = ["React", "Ember"]; var team2 = ["Angular", "Polymer"]; var players = [].concat(team1, team2);
  11. es6.parameters.rest

  12. function foo() { for (var _len = arguments.length, items =

    Array(_len), _key = 0; _key < _len; _key++) { items[_key] = arguments[_key]; } } function foo(...items) {} Basic
  13. function foo(bar) { arguments[1]; } function foo(bar, ...items) { items[0];

    } Only references
  14. function foo(bar) { for (var _len = arguments.length, args =

    Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { args[_key - 1] = arguments[_key]; } bar.apply(undefined, args); } function foo(bar, ...args) { bar(...args); } Internal type tracking
  15. utility.inlineExpressions

  16. var wtf = true; var wtf = !false || !true

    && 5 > 6 || 5 < "foo" && "lol"; Complex expressions
  17. var byte = 1; var kilo = 1000; var mega

    = 1000000; var giga = 1000000000; var byte = 1; var kilo = byte * 1000; var mega = kilo * 1000; var giga = mega * 1000; Immutable constants
  18. optimisation.react Coming Soon!

  19. var e = { type: "div", props: { className: "foo",

    children: [bar, { type: Baz, props: { }, key: "baz", ref: null } ] }, key: null, ref: null } var e = <div className="foo"> {bar} <Baz key="baz" /> </div> Inline ReactElements https://github.com/facebook/react/issues/3228
  20. var foo = <div className="foo" />; function render() { return

    foo; } function render() { return <div className="foo" />; } Reuse Constant Value Types https://github.com/facebook/react/issues/3226
  21. es6.tailCall

  22. function f(_x, _x2) { var _again = true; _function: while

    (_again) { _again = false; var n = _x, acc = _x2; if (n === 0) { return acc; } else { _x = n - 1; _x2 = acc * n; _again = true; continue _function; } } } f(n, 1); function f(n, acc) { return n === 0 ? acc : f(n - 1, acc * n); } f(n, 1); Tail call recursion
  23. None
  24. es6.blockScoping

  25. Simple conversion var multiplesOfFive = []; for (let i =

    0; i < 5; i++) { multiplesOfFive.push(i * i); } var multiplesOfFive = []; for (var i = 0; i < 5; i++) { multiplesOfFive.push(i * i); }
  26. var multiplesOfFive = []; for (var _i = 0; _i

    < 5; _i++) { multiplesOfFive.push(_i * _i); } i; Colliding references var multiplesOfFive = []; for (let i = 0; i < 5; i++) { multiplesOfFive.push(i * i); } i;
  27. var pages = []; for (var i = 0; i

    < 5; i++) { (function (i) { getPage(i, function (items) { pages[i] = items; }); })(i); } References inside a closure var pages = []; for (let i = 0; i < 5; i++) { getPage(i, function (items) { pages[i] = items; }); }
  28. var pages = []; for (var i = 0; i

    < 5; i++) { var _ret = (function (i) { getPage(i, function (items) { pages[i] = items; }); if (i >= 2) return { v: "TOO MANY" }; })(i); if (typeof _ret === "object") { return _ret.v; } } References inside a closure with a return var pages = []; for (let i = 0; i < 5; i++) { getPage(i, function (items) { pages[i] = items; }); if (i >= 2) return "TOO MANY"; }
  29. var pages = []; for (var i = 0; i

    < 5; i++) { var _ret = (function (i) { getPage(i, function (items) { pages[i] = items; }); if (i % 2) return "continue"; })(i); if (_ret === "continue") continue; } References inside a closure with a continue var pages = []; for (let i = 0; i < 5; i++) { getPage(i, function (items) { pages[i] = items; }); if (i % 2) continue; }
  30. var pages = []; for (var i = 0;; i++)

    { var _ret = (function (i) { getPage(i, function (items) { pages[i] = items; }); if (i % 2) return "continue"; if (i === 5) return "break"; })(i); switch (_ret) { case "continue": continue; case "break": break; } } References inside a closure with a continue and a break var pages = []; for (let i = 0;; i++) { getPage(i, function (items) { pages[i] = items; }); if (i % 2) continue; if (i === 5) break; }
  31. var pages = []; pageLoop: for (var i = 0;;

    i++) { var _ret = (function (i) { getPage(i, function (items) { pages[i] = items; }); if (i % 2) return "continue|pageLoop"; if (i === 5) return "break|pageLoop"; return { v: "pages!" }; })(i); switch (_ret) { case "continue|pageLoop": continue pageLoop; case "break|pageLoop": break pageLoop; default: if (typeof _ret === "object") return _ret.v; } } References inside a closure with a label, continue, break and return… var pages = []; pageLoop: for (let i = 0;; i++) { getPage(i, function (items) { pages[i] = items; }); if (i % 2) continue pageLoop; if (i === 5) break pageLoop; return "pages!"; }
  32. Spec Compliancy https://kangax.github.io/compat-table/es6/

  33. How do you use it?

  34. CLI $ npm install -g babel $ babel script.js >out-script.js

    $ babel src --out-dir lib $ babel-node script.js
  35. Integrations • Atom • Broccoli • Browserify • Browser compiler

    • Brunch • Cogs • Connect • CLI • Ember CLI • ESLint • Duo • Gobble • Grunt • Gulp • Istanbul • Jade • Jest • Karma • Kraken Devtools • Mimosa • Mocha • Nodemon • Meteor • Power assert • Rails/Sprockets • Require hook • Ruby • Sails • Sublime • Webpack
  36. Docs https://babeljs.io

  37. Support https://gitter.im/babel/babel

  38. Thanks! • @sebmck • @babeljs • https://babeljs.io • https://github.com/babel/babel