Embracing Black Magic: The Power of Code Transpilation

Given at the You Gotta Love Front-end conference in Tel Aviv, 2016

Transcript

1. Embracing Black Magic
2. Embracing Black Magic The Power of Code Transpilation Jiří Tobíšek, Wix.com
3. Front End Development and magical thinking
4. • polyfills • monkey patching • virtual DOM
5. Transpilers
6. <JSX />
8. ECMAScript 6
9. spatchEvent:function(e,t){if(v._enabled){var n=o.getPooled(e,t);try{d.batchedUpdates(i nally{o.release(n)}}}};t.exports=v},{122:122,139:139,140:140,151:151,165:165,25:25,40: rict";var r={logTopLevelRenders:!1};t.exports=r},{}],67:[function(e,t,n){"use strict"; e(10),o=e(17),i=e(19),a=e(33),u=e(30),s=e(62),l=e(27),c=e(75),p=e(90),d={Component:a.i r.injection,EmptyComponent:s.injection,EventPluginHub:o.injection,EventPluginUtils:i.i eComponent:c.injection,Updates:p.injection};t.exports=d},{10:10,17:17,19:19,27:27,30:3 unction(e,t,n){"use strict";function r(e){return i(document.documentElement,e)}var e(51),i=e(143),a=e(148),u=e(149),s={hasSelectionCapabilities:function(e){var e&&e.nodeName&&e.nodeName.toLowerCase();return_t&&(“input"===t&&"text"===e.type||"text ,getSelectionInformation:function(){var e=u();return{focusedElem:e,selectionRange:s.ha getSelection(e):null}},restoreSelection:function(e){var t=u(),n=e.focuse
10. You are already using transpilers
11. Transpilers have gone mainstream
12. So what is a “transpiler”?
13. “Transpiler” is a program which rewrites other programs
14. Source-to-source compiler
15. class Person constructor: (options) -> {@name, @age, @height = 'average'} = options tim = new Person name: 'Tim', age: 4 var Person, tim; Person = (function() { function Person(options) { var ref; this.name = options.name, this.age = ...
16. class Person constructor: (options) -> {@name, @age, @height = 'average'} = options tim = new Person name: 'Tim', age: 4 var Person, tim; Person = (function() { function Person(options) { var ref; this.name = options.name, this.age = ...
17. Continuous code transformation
 during the build process
20. Source Maps
21. Why we use transpilers
22. Rebellion against reality
23. The end of the
 “lowest common factor”
 mentality
24. Experiment with new language features
25. Transpilers part of the TC39 process
28. Code in languages
 not available in browsers
29. “JS is the x86 of the web” Brendan Eich
30. https://github.com/clojure/clojurescript https://github.com/scala-js/scala-js
31. Design your
 Domain-specific language
 (DSL)
32. const myMenu = React.createElement(“div”, { className: “menu” }, React.createElement(Button, { label: “OK” } ) );
33. const myMenu = <div className=“menu”> <Button label=“OK”/> </div>
34. const myMenu = <div className=“menu”> <Button label=“OK”/> </div> const myMenu = React.createElement(“div”, { className: “menu” }, React.createElement(Button, { label: “OK” } ) );
35. Sky’s the limit…
36. DEMO https://github.com/tobich/watch-your-language
37. Transpilaton as a strategy and technique
38. How transpilers work?
39. Abstract Syntax Tree
 (AST)
40. function doSomeAwesomeMagic(spell) { spell.apply(this); } FunctionDeclaration Identifier params[] Identifier BlockStatement CallExpression
41. function doSomeAwesomeMagic(spell) { spell.apply(this); } FunctionDeclaration Identifier params[] Identifier BlockStatement CallExpression
42. function doSomeAwesomeMagic(spell) { spell.apply(this); } FunctionDeclaration Identifier params[] Identifier BlockStatement CallExpression
43. function doSomeAwesomeMagic(spell) { spell.apply(this); } FunctionDeclaration Identifier params[] Identifier BlockStatement CallExpression
44. function doSomeAwesomeMagic(spell) { spell.apply(this); } FunctionDeclaration Identifier params[] Identifier BlockStatement CallExpression
45. function doSomeAwesomeMagic(spell) { spell.apply(this); } FunctionDeclaration Identifier params[] Identifier BlockStatement CallExpression
46. function doSomeAwesomeMagic(spell) { spell.apply(this); } FunctionDeclaration Identifier params[] Identifier BlockStatement CallExpression
47. AST is produced by parser
48. JavaScript Parsers https://github.com/jquery/esprima https://github.com/ternjs/acorn https://github.com/babel/babylon
49. JavaScript Parsers https://github.com/zaach/jison
50. Monolithic transpilers
51. 1. Parse: source -> AST 2. Emit: AST -> target
52. • closed systems • all parts tightly coupled • efficient, fast
53. Composite transpilers
54. 1. Parse: source -> AST 2. Transform: AST -> AST* 3. Generate: AST* -> target
55. • open architecture • small reusable parts • performance penalty
56. https://github.com/benjamn/recast https://github.com/babel/babel
57. node type visit (node) Visitor Pattern
58. Visitor Pattern Identifier visit (node) FunctionCall visit (node) Assignment visit (node)
59. FunctionDecl (node) VariableDecl (node) FunctionCall (node) Visitor Pattern
60. import * as types from “babel-types”; const visitor = { Expression: function (path) { path.replaceWith( types.CallExpression( types.Identifier('__validate__'), [path.node] ) ); } };
61. import * as types from “babel-types”; const visitor = { Expression: function (path) { path.replaceWith( types.CallExpression( types.Identifier('__validate__'), [path.node] ) ); } };
62. import * as types from “babel-types”; const visitor = { Expression: function (path) { path.replaceWith( types.CallExpression( types.Identifier('__validate__'), [path.node] ) ); } };
63. import * as types from “babel-types”; const visitor = { Expression: function (path) { path.replaceWith( types.CallExpression( types.Identifier('__validate__'), [path.node] ) ); } };
64. import * as types from “babel-types”; const visitor = { Expression: function (path) { path.replaceWith( types.CallExpression( types.Identifier('__validate__'), [path.node] ) ); } };
65. DEMO https://github.com/tobich/source-tracker
66. • sophisticated logging • fun with sync/async • flow control • faux “threads”
67. Embracing
 Black Magic
68. Transpilers are here
69. Ordinary part
 of the build process
70. Creative technique and strategy
71. What’s next? https://github.com/tobich/watch-your-language https://github.com/tobich/source-tracker
72. What’s next? https://babeljs.io
73. https://github.com/wix/tspoon What’s next?
74. Thank you! @tobich @yiri_0 speakerdeck.com/tobisek