BabelJS - James Kyle at Modern Web UI

1. @thejameskyle

2. git.io/babel-handbook

3. git.io/i18n

5. Babel Sucks

6. B S

7. What is Babel?

8. A general purpose JavaScript compiler.

9. code() 0101010 1010100 High Level Low Level

10. Static Analysis

11. Abstract Syntax Tree (AST)

12. function square(n) { return n * n; }

13. - FunctionDeclaration: - id: - Identifier: - name: square - params [1] - Identifier - name: n

14. { type: "FunctionDeclaration", id: { type: "Identifier", name: "square" }, params: [{ type: "Identifier", name: "n" }], body: { type: "BlockStatement", body: [{ type: "ReturnStatement", argument: { type: "BinaryExpression", operator: "*", left: {

15. { type: "FunctionDeclaration", id: {...}, params: [...], body: {...} } { type: "Identifier", name: ... } { type: "BinaryExpression", operator: ..., left: {...}, right: {...} }

16. interface Node { type: string; }

17. { type: "FunctionDeclaration", id: {...}, params: [...], body: {...} }

18. Parsing Transforming Generating

19. Parsing: 1. Lexical Analysis 2. Syntactic Analysis

20. Lexical Analysis

21. n * n;

22. [ { type: { ... }, value: "n" }, { type: { ... }, value: "*" }, { type: { ... }, value: "n" } ]

23. { type: { label: 'name', keyword: undefined, beforeExpr: false, startsExpr: true, rightAssociative: false, isLoop: false, isAssign: false, prefix: false, postfix: false, binop: null, updateContext: null }, ... }

24. Syntactic Analysis

25. Parsing Transforming Generating

26. Parsing Transformating Generating

27. Traversal

28. { type: "FunctionDeclaration", id: {...}, params: [...], body: {...} }

29. { type: "FunctionDeclaration", id: { type: "Identifier", name: "square" }, params: [...], body: {...} }

30. { type: "FunctionDeclaration", id: {...}, params: [{ type: "Identifier", name: "n" }], body: {...} }

31. { type: "FunctionDeclaration", id: {...}, params: [], body: { type: "BlockStatement", body: [...] } }

32. { type: "BlockStatement", body: [{ type: "ReturnStatement", argument: {...} }] }

33. { type: "ReturnStatement", argument: { type: "BinaryExpression", operator: "*", left: {...}, right: {...} } }

34. { type: "BinaryExpression", operator: "*", left: {...}, right: {...} }

35. { type: "BinaryExpression", operator: "*", left: { type: "Identifier", name: "n" }, right: {...} }

36. { type: "BinaryExpression", operator: "*", left: {...}, right: { type: "Identifier", name: "n" } }

37. Visitors

38. const MyVisitor = { Identifier() { console.log("Called!"); } };

41. - FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)

54. const MyVisitor = { Identifier: { enter() { console.log("Entered!"); }, exit() { console.log("Exited!"); } } };

55. Paths

56. { type: "FunctionDeclaration", id: { type: "Identifier", name: "square" }, ... }

57. { parent: { type: "FunctionDeclaration", id: {...}, .... }, node: { type: "Identifier", name: "square" } }

58. { parent: { type: "FunctionDeclaration", id: {...}, .... }, node: { type: "Identifier", name: "square" } }

59. Paths in visitors

60. const MyVisitor = { Identifier(path) { console.log("Visiting: " + path.node.name); } };

61. Scopes

62. // global scope function scopeOne() { // scope 1 function scopeTwo() { // scope 2 } }

63. var global = "I am in the global scope"; function scopeOne() { var one = "I am in scope one"; function scopeTwo() { var two = "I am in scope two"; } }

64. function scopeOne() { var one = "I am in scope one"; function scopeTwo() { one = "I updating a ref in scope one"; } }

65. function scopeOne() { var one = "I am in scope one"; function scopeTwo() { var one = "I am creating a new `one`"; } }

66. Scopes

67. { path: path, block: path.node, parentBlock: path.parent, parent: parentScope, bindings: [...] }

68. Bindings

69. function scopeOnce() { var ref = "This is a binding"; ref; // This is a reference to a binding function scopeTwo() { ref; // This is a reference to a binding } }

70. { identifier: node, scope: scope, path: path, kind: 'var', referenced: true, references: 3, referencePaths: [path, path, path], constant: false, constantViolations: [path] }

71. The many modules of Babel

72. Babel Types

73. defineType("BinaryExpression", { builder: ["operator", "left", "right"], fields: { operator: { validate: assertValueType("string") }, left: { validate: assertNodeType("Expression") }, right: { validate: assertNodeType("Expression") } }, visitor: ["left", "right"], aliases: ["Binary", "Expression"] });

74. defineType("BinaryExpression", { builder: ["operator", "left", "right"], fields: { operator: { validate: assertValueType("string") }, left: { validate: assertNodeType("Expression") }, right: { validate: assertNodeType("Expression") } }, visitor: ["left", "right"], aliases: ["Binary", "Expression"] });

75. t.binaryExpression( "*", t.identifier("a"), t.identifier("b") );

76. { type: "BinaryExpression", operator: "*", left: { type: "Identifier", name: "a" }, right: { type: "Identifier", name: "b" } }

77. a * b

78. Babel Types

79. That's Babel.

80. Babel Sucks

81. Babel doesn't do anything in the least efficient way possible.

82. function babel(code) { return code; }

83. function babel(code) { return code }

84. const babel = code => code

85. Plugins!

86. Babel is only as good as the ecosystem built around it

87. You.

88. Writing your first Babel Plugin.

89. export default function(babel) { // plugin contents }

90. export default function(babel) { var t = babel.types; // plugin contents };

91. export default function(babel) { var t = babel.types; return { visitor: { // visitor contents } }; };

92. foo === bar;

93. { type: "BinaryExpression", operator: "===", left: { type: "Identifier", name: "foo" }, right: { type: "Identifier", name: "bar" } }

94. export default function(babel) { var t = babel.types; return { visitor: { // visitor contents } }; };

95. export default function(babel) { var t = babel.types; return { visitor: { BinaryExpression(path) { // ... } } }; };

96. export default function(babel) { var t = babel.types; return { visitor: { BinaryExpression(path) { if (path.node.operator !== "===") { return; } // ... } } }; };

97. export default function(babel) { var t = babel.types; return { visitor: { BinaryExpression(path) { if (path.node.operator !== "===") { return; } path.node.left = t.identifier("sebmck"); } } }; };

98. sebmck === bar;

99. export default function(babel) { var t = babel.types; return { visitor: { BinaryExpression(path) { if (path.node.operator !== "===") { return; } path.node.left = t.identifier("sebmck"); path.node.right = t.identifier("dork"); } } }; };

100. sebmck === dork;

101. export default function(babel) { var t = babel.types; return { visitor: { BinaryExpression(path) { if (path.node.operator !== "===") { return; } path.node.left = t.identifier("sebmck"); path.node.right = t.identifier("dork"); } } }; };

102. Fin

BabelJS - James Kyle at Modern Web UI

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to BabelJS - James Kyle at Modern Web UI (20)

Recently uploaded (20)

BabelJS - James Kyle at Modern Web UI