An introduction to ASTs in JavaScript
Mythical Treesand where to findthemGabriele PetronellaSoftware Engineer @ buildo
View Slide
me, hi!@gabro27 - Codemotion 11/11/2017
stuff I do (by day)@gabro27 - Codemotion 11/11/2017
stuff I do (by night)@gabro27 - Codemotion 11/11/2017
Why this talk@gabro27 - Codemotion 11/11/2017
Agenda1.AST2.AST workflows3.A real-world example@gabro27 - Codemotion 11/11/2017
Let's start from the answerconst answer = 42;@gabro27 - Codemotion 11/11/2017
Tokensconst answer = 42 ;// | | | | | | | | | |// \_'const'_/ \_name_/ \_'='_/ \_num_/ \_';'_/@gabro27 - Codemotion 11/11/2017
Grammarconst answer = 42 ;// | | | | ||// | \_Identifier__/ \_NumericLiteral_/|// | | |// | \_________VariableDeclarator________/// | |// \____________VariableDeclaration____________/@gabro27 - Codemotion 11/11/2017
So... AST?@gabro27 - Codemotion 11/11/2017
AbstractSyntaxTree@gabro27 - Codemotion 11/11/2017
Why Abstract?const answer = 42;const answer = 42const answer =42constanswer=42@gabro27 - Codemotion 11/11/2017
AST in JavaScript@gabro27 - Codemotion 11/11/2017
AST? ASTs!parser AST ES2017 ES nextacorn ESTree ✅ only stage-4babylon Babylon AST ✅ ✅espree ESTree ✅ same as acornesprima ESTree ✅ ❌flow ESTree + custom ✅ ✅TypeScript TypeScript AST ✅ ✅@gabro27 - Codemotion 11/11/2017
astexplorer.net@gabro27 - Codemotion 11/11/2017
AST Workflows@gabro27 - Codemotion 11/11/2017
basic@gabro27 - Codemotion 11/11/2017
babel@gabro27 - Codemotion 11/11/2017
demo: literaltransformation@gabro27 - Codemotion 11/11/2017
codemod@gabro27 - Codemotion 11/11/2017
hey, doesn't babel dothe same thing?@gabro27 - Codemotion 11/11/2017
codemod tools» recast» jscodeshift@gabro27 - Codemotion 11/11/2017
eslint@gabro27 - Codemotion 11/11/2017
ESLint uses espree, so...What about ES next?@gabro27 - Codemotion 11/11/2017
babel-eslint@gabro27 - Codemotion 11/11/2017
demo: no-console-log@gabro27 - Codemotion 11/11/2017
What abouteslint --fix@gabro27 - Codemotion 11/11/2017
prettier@gabro27 - Codemotion 11/11/2017
Prettier... for TS?@gabro27 - Codemotion 11/11/2017
Meanwhilein the real world@gabro27 - Codemotion 11/11/2017
// MyContainer.jsimport t from 'tcomb';import container from 'buildo-react-container';import MyComponent from './MyComponent';export default container(MyComponent, {connect: {isFlag: t.Boolean,name: t.String,label: t.maybe(t.String)}});@gabro27 - Codemotion 11/11/2017
// state.jsexport default {isFlag: t.Boolean,name: t.String,label: t.maybe(t.String)}@gabro27 - Codemotion 11/11/2017
// MyContainer.jsimport t from 'tcomb';import container from 'buildo-react-container';import MyComponent from './MyComponent';export default container(MyComponent, {connect: ['isFlag', 'name', 'label']});@gabro27 - Codemotion 11/11/2017
DEMO@gabro27 - Codemotion 11/11/2017
We've seen@gabro27 - Codemotion 11/11/2017
AST: what and why@gabro27 - Codemotion 11/11/2017
Competing ASTstandards in JS@gabro27 - Codemotion 11/11/2017
Typical AST-based workflows@gabro27 - Codemotion 11/11/2017
Some resources» astexplorer.net» Babel Handbook@gabro27 - Codemotion 11/11/2017
Thank you@gabro27 - Codemotion 11/11/2017
Questions?ping me on Twitter: @gabro27or @gabro on Slack (http://milanojs.herokuapp.com/)PS: wanna work on this stuff? We're hiring!@gabro27 - Codemotion 11/11/2017