Babel - Facebook April 2015

Transcript

2. What is it? • An ES6 and beyond JavaScript compiler • A JSX optimising compiler • A transformation platform for JavaScript
3. Terminology • AST - A tree representation of source code. • Scope - A “boundary” that things can be bound to. • Traversal - The act of recursively visiting a root node and its children. • Traversal path - Representation of a child-parent relationship. • Transformer - Isolated transformation module with a specific goal. • Visitor - Controls a traversal.
4. Architecture
5. Architecture Parser Turns code into an AST Transformer Manipulates AST Generator Turns AST back into code
6. Parser
7. Parser • Recursive descent parser • Separate functions defined for all syntactic elements that are recursively called • Based on Acorn (https://github.com/marijnh/acorn)
8. Plugins • Modular • Each major syntax extension is separated into extensions • Supports: • ES6+ • Flow • JSX
9. AST var foo = function foo() { return bar; };
10. AST { type: "Program", body: [{ type: "VariableDeclaration" kind: "var", declarations: [{ type: "VariableDeclarator", id: { type: "Identifier", name: "foo" }, init: { type: “FunctionExpression", id: { type: “Identifier”, name: “foo” }, params: [], body: [{ type: "BlockStatement", body: [{ type: "ReturnStatement", argument: { type: "Identifier", name: "bar" } }] }] } }] }] }
11. AST Variable Declaration Program Variable Declarator Identifier Function Expression Block Statement Return Statement Identifier
12. ESTree • Collaborative AST spec from all the major consumers • Contextless definitions
13. Transformation
14. Visitors • Describes what nodes to visit. • Abstracts traversal logic from visiting logic. • Controls the traversal state - whether to stop or skip specific node trees. • Allows efficient reuse of common visitor logic.
15. Traversal • Handles visiting each node and branch in the tree. • Handles replacing nodes: • Expressions to statements etc. • Manages scope: • Tracks bindings and references.
16. Traversal paths • Node relationships are abstracted into paths. • Paths are retained between traversals. • Very powerful as path is constant, can store metadata. • A path always resolves to the same node. • Even after replacement and relocation.
17. Transformers • Each feature is split into a separate transformer. • Modular, easily toggle-able. • Good abstraction for grouping common logic. • Independent traversal for each transformer. • Easier to maintain state.
18. Demo
19. Future optimisations
20. Transformer traversal optimisation • Entire traversal for each transformer is inefficient. • Prepass the AST and check what branches each transformer actually needs. • Flexibility of having a stateful visitor without having to visit all nodes.
21. Transformer traversal optimisation function check(node) { return t.isProperty(node) && node.computed; }
22. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
23. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
24. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
25. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
26. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
27. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
28. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
29. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
30. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
31. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
32. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
33. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
34. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
35. Transformer traversal optimisation function createNode(type, props) { return { type: type, ["is" + type]: true, ...props }; }
36. AST diffing • Incremental builds • Store previous original and transformed AST as well as some metadata (scope tracking etc) • Diff previous original AST and current untransformed AST • Transpose differences into previous transformed AST and transform only the specific bits
37. Generation
38. Retaining original newlines • When printing a node • Get node starting token • Get previous token • Compare newlines between tokens • Add newlines
39. Generating generated node newlines • Is this a function declaration? If so, require a newline before and after. • Is it a directive? Require a newline after. • Is this an if statement with a block statement consequent? If so, insert a newline before and after.
40. JSX optimisations
41. Constant Value Types function render() { return <div className="foo" />; } var foo = <div className="foo" />; function render() { return foo; }
42. Constant Value Types 1. Check if JSX element is immutable. 2. Collect all references (Make sure references are “constant”. ie. never reassigned). 3. Walk up the scope tree, checking for the highest scope that contains all the references. 4. Create a declaration to save the JSX element and then insert it before the “scope block”.
43. Inline React Elements <div className="foo">{bar}<Baz key="baz" /></div> ({ type: “div", props: { className: “foo", children: [ bar, { type: Baz, props: {}, key: "baz", ref: null } ] }, key: null, ref: null })
44. Tooling
45. 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
46. Conclusion • Write a plugin: https://babeljs.io/docs/usage/ plugins • Contribute! https://github.com/babel/babel/blob/ master/CONTRIBUTING.md • Questions?