Gabriele Petronella - Mythical trees and where to find them - Codemotion Milan 2017

Mythical Treesand where to find themGabriele PetronellaSoftware Engineer @ buildo

me, hi!

@gabro27 - Codemotion 11/11/2017

stuff I do (by day)


stuff I do (by night)


Why this talk


Agenda1.AST

2.AST workflows

3.A real-world example


Let's start from the answerconst answer = 42;


Tokens const answer = 42 ;// | | | | | | | | | |// \_'const'_/ \_name_/ \_'='_/ \_num_/ \_';'_/


Grammar const answer = 42 ;// | | | | ||// | \_Identifier__/ \_NumericLiteral_/|// | | |// | \_________VariableDeclarator________/// | |// \____________VariableDeclaration____________/


So... AST?@gabro27 - Codemotion 11/11/2017

AbstractSyntaxTree


Why Abstract?const answer = 42;

const answer = 42

const answer = 42

const answer = 42


AST in JavaScript


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 ✅ ✅


astexplorer.net


https://astexplorer.net

AST Workflows


basic


babel


demo: literal transformation


https://astexplorer.net/#/gist/0b4b6a844f4e7edd844fb900eff7d48f/3a1c3d296ac5256165ce2023bb910dae28d8ef10


codemod


hey, doesn't babel do the same thing?


codemod tools» recast

» jscodeshift


https://github.com/benjamn/recast

https://github.com/facebook/jscodeshift

eslint


ESLint uses espree, so...What about ES next?


babel-eslint


https://github.com/babel/babel-eslint

demo: no-console-log




What abouteslint --fix


prettier


Prettier... for TS?


Meanwhilein the real world


// 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)}


// MyContainer.js

import t from 'tcomb';import container from 'buildo-react-container';import MyComponent from './MyComponent';

export default container(MyComponent, { connect: ['isFlag', 'name', 'label']});


DEMO@gabro27 - Codemotion 11/11/2017


We've seen@gabro27 - Codemotion 11/11/2017

AST: what and why


Competing ASTstandards in JS


Typical AST-based workflows


Some resources» astexplorer.net

» Babel Handbook


https://astexplorer.net/

https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/plugin-handbook.md

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!


Technology

Gabriele Petronella - Mythical trees and where to find them - Codemotion Milan 2017