Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Trees Everywhere - MilanoJS

Trees Everywhere - MilanoJS

Abstract Syntax Trees (or ASTs) are the core of most tools we use in JavaScript, from Babel to ESLint, from prettier to codemods.

In this talk we see what they are, how they power such tools and how to use them directly to develop custom solutions to everyday problems.

Gabriele Petronella

June 14, 2017
Tweet

More Decks by Gabriele Petronella

Other Decks in Programming

Transcript

  1. Tokens const answer = 42 ; // | | |

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

    | || // | \_Identifier__/ \_NumericLiteral_/| // | | | // | \_________VariableDeclarator________/ // | | // \____________VariableDeclaration____________/ @gabro27 - MilanoJS 14/06/2017
  3. Why Abstract? const answer = 42; const answer = 42

    const answer = 42 const answer = 42 @gabro27 - MilanoJS 14/06/2017
  4. 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
  5. // 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
  6. // state.js export default { isFlag: t.Boolean, name: t.String, label:

    t.maybe(t.String) } @gabro27 - MilanoJS 14/06/2017
  7. // 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
  8. Questions? ping me on Twitter: @gabro27 or @gabro on Slack

    (http://milanojs.herokuapp.com/) @gabro27 - MilanoJS 14/06/2017