Babel: Beyond the Basics - MelbJS March 2015

Transcript

1. View Slide

2. What is it?
   • A compiler for your JavaScript.
   • Supports:
   • ES6+
   • JSX
   • Flow
   

   View Slide

3. Learn ES6
   https://babeljs.io/docs/learn-es6/
   

   View Slide

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

   View Slide

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
   

   View Slide

6. es6.spread
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

    View Slide

11. es6.parameters.rest
    

    View Slide

12. function foo() {
    for (var _len = arguments.length,
    items = Array(_len), _key = 0; _key
    < _len; _key++) {
    items[_key] = arguments[_key];
    }
    }
    function foo(...items) {}
    Basic
    

    View Slide

13. function foo(bar) {
    arguments[1];
    }
    function foo(bar, ...items) {
    items[0];
    }
    Only references
    

    View Slide

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
    

    View Slide

15. utility.inlineExpressions
    

    View Slide

16. var wtf = true;
    var wtf = !false || !true && 5
    > 6 || 5 < "foo" && "lol";
    Complex expressions
    

    View Slide

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
    

    View Slide

18. optimisation.react
    Coming Soon!
    

    View Slide

19. var e = {
    type: "div",
    props: {
    className: "foo",
    children: [bar, { type: Baz,
    props: { }, key: "baz", ref: null } ]
    },
    key: null,
    ref: null
    }
    var e =
    {bar}
    
    
    Inline ReactElements
    https://github.com/facebook/react/issues/3228
    

    View Slide

20. var foo = ;
    function render() {
    return foo;
    }
    function render() {
    return ;
    }
    Reuse Constant Value Types
    https://github.com/facebook/react/issues/3226
    

    View Slide

21. es6.tailCall
    

    View Slide

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
    

    View Slide

23. View Slide

24. es6.blockScoping
    

    View Slide

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);
    }
    

    View Slide

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;
    

    View Slide

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;
    });
    }
    

    View Slide

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";
    }
    

    View Slide

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

    View Slide

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

    View Slide

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!";
    }
    

    View Slide

32. Spec Compliancy
    https://kangax.github.io/compat-table/es6/
    

    View Slide

33. How do you use it?
    

    View Slide

34. CLI
    $ npm install -g babel
    $ babel script.js >out-script.js
    $ babel src --out-dir lib
    $ babel-node script.js
    

    View Slide

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
    

    View Slide

36. Docs
    https://babeljs.io
    

    View Slide

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

    View Slide

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

    View Slide