Tweet
Tweet

Slide 1

Slide 1 text

Trees everywhere Gabriele Petronella Software Engineer @ buildo

Slide 2

Slide 2 text

me, hi! @gabro27 - MilanoJS 14/06/2017

Slide 3

Slide 3 text

stuff I do (by day) @gabro27 - MilanoJS 14/06/2017

Slide 4

Slide 4 text

stuff I do (by night) @gabro27 - MilanoJS 14/06/2017

Slide 5

Slide 5 text

Why this talk @gabro27 - MilanoJS 14/06/2017

Slide 6

Slide 6 text

@gabro27 - MilanoJS 14/06/2017

Slide 7

Slide 7 text

More seriously @gabro27 - MilanoJS 14/06/2017

Slide 8

Slide 8 text

Summary 1.AST? 2.AST workflows 3.A real-world example @gabro27 - MilanoJS 14/06/2017

Slide 9

Slide 9 text

Let's start from the answer const answer = 42; @gabro27 - MilanoJS 14/06/2017

Slide 10

Slide 10 text

Tokens const answer = 42 ; // | | | | | | | | | | // \_'const'_/ \_name_/ \_'='_/ \_num_/ \_';'_/ @gabro27 - MilanoJS 14/06/2017

Slide 11

Slide 11 text

Grammar const answer = 42 ; // | | | | || // | \_Identifier__/ \_NumericLiteral_/| // | | | // | \_________VariableDeclarator________/ // | | // \____________VariableDeclaration____________/ @gabro27 - MilanoJS 14/06/2017

Slide 12

Slide 12 text

So... AST? @gabro27 - MilanoJS 14/06/2017

Slide 13

Slide 13 text

Abstract Syntax Tree @gabro27 - MilanoJS 14/06/2017

Slide 14

Slide 14 text

Why Abstract? const answer = 42; const answer = 42 const answer = 42 const answer = 42 @gabro27 - MilanoJS 14/06/2017

Slide 15

Slide 15 text

AST? ASTs! parser AST ES2015 ES next acorn ESTree ✅ ❌ babylon Babylon AST ✅ ✅ espree ESTree ✅ ❌ esprima ESTree ✅ ❌ flow ESTree + custom ✅ ✅ TypeScript TypeScript AST ✅ ✅ @gabro27 - MilanoJS 14/06/2017

Slide 16

Slide 16 text

astexplorer.net @gabro27 - MilanoJS 14/06/2017

Slide 17

Slide 17 text

AST Workflows @gabro27 - MilanoJS 14/06/2017

Slide 18

Slide 18 text

basic @gabro27 - MilanoJS 14/06/2017

Slide 19

Slide 19 text

babel @gabro27 - MilanoJS 14/06/2017

Slide 20

Slide 20 text

demo: literal transformation @gabro27 - MilanoJS 14/06/2017

Slide 21

Slide 21 text

codemod @gabro27 - MilanoJS 14/06/2017

Slide 22

Slide 22 text

hey, doesn't babel do the same thing? @gabro27 - MilanoJS 14/06/2017

Slide 23

Slide 23 text

codemod tools » recast » jscodeshift @gabro27 - MilanoJS 14/06/2017

Slide 24

Slide 24 text

eslint @gabro27 - MilanoJS 14/06/2017

Slide 25

Slide 25 text

ESLint uses espree, so... What about ES next? @gabro27 - MilanoJS 14/06/2017

Slide 26

Slide 26 text

babel-eslint @gabro27 - MilanoJS 14/06/2017

Slide 27

Slide 27 text

demo: no-console- log @gabro27 - MilanoJS 14/06/2017

Slide 28

Slide 28 text

What about eslint --fix @gabro27 - MilanoJS 14/06/2017

Slide 29

Slide 29 text

prettier @gabro27 - MilanoJS 14/06/2017

Slide 30

Slide 30 text

Prettier... for TS? @gabro27 - MilanoJS 14/06/2017

Slide 31

Slide 31 text

Meanwhile in the real world @gabro27 - MilanoJS 14/06/2017

Slide 32

Slide 32 text

// 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 - MilanoJS 14/06/2017

Slide 33

Slide 33 text

// state.js export default { isFlag: t.Boolean, name: t.String, label: t.maybe(t.String) } @gabro27 - MilanoJS 14/06/2017

Slide 34

Slide 34 text

// 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 - MilanoJS 14/06/2017

Slide 35

Slide 35 text

DEMO @gabro27 - MilanoJS 14/06/2017

Slide 36

Slide 36 text

We've seen @gabro27 - MilanoJS 14/06/2017

Slide 37

Slide 37 text

AST: what and why @gabro27 - MilanoJS 14/06/2017

Slide 38

Slide 38 text

Competing AST standards in JS @gabro27 - MilanoJS 14/06/2017

Slide 39

Slide 39 text

Typical AST-based workflows @gabro27 - MilanoJS 14/06/2017

Slide 40

Slide 40 text

going custom @gabro27 - MilanoJS 14/06/2017

Slide 41

Slide 41 text

Some resources » astexplorer.net » Babel Handbook @gabro27 - MilanoJS 14/06/2017

Slide 42

Slide 42 text

Thank you @gabro27 - MilanoJS 14/06/2017

Slide 43

Slide 43 text

Questions? ping me on Twitter: @gabro27 or @gabro on Slack (http://milanojs.herokuapp.com/) @gabro27 - MilanoJS 14/06/2017