Mythical Treesand where to find themGabriele PetronellaSoftware Engineer @ buildo
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.AST
2.AST workflows
3.A real-world example
@gabro27 - Codemotion 11/11/2017
Let's start from the answerconst answer = 42;
@gabro27 - Codemotion 11/11/2017
Tokens const answer = 42 ;// | | | | | | | | | |// \_'const'_/ \_name_/ \_'='_/ \_num_/ \_';'_/
@gabro27 - Codemotion 11/11/2017
Grammar const 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 = 42
const answer = 42
const answer = 42
@gabro27 - Codemotion 11/11/2017
AST in JavaScript
@gabro27 - Codemotion 11/11/2017
AST? ASTs!
parser AST ES2017 ES next
acorn ESTree ✅ only stage-4
babylon Babylon AST ✅ ✅
espree ESTree ✅ same as acorn
esprima 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: literal transformation
@gabro27 - Codemotion 11/11/2017
codemod
@gabro27 - Codemotion 11/11/2017
hey, doesn't babel do the 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.js
import 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.js
export default { isFlag: t.Boolean, name: t.String, label: t.maybe(t.String)}
@gabro27 - Codemotion 11/11/2017
// MyContainer.js
import 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