Babel: Beyond the Basics - MelbJS March 2015

Transcript

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