Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

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

  1. 1. MythicalTrees andwhereto find them GabrielePetronella SoftwareEngineer@buildo
  2. 2. me, hi! @gabro27 - Codemotion 11/11/2017
  3. 3. stuffI do (byday) @gabro27 - Codemotion 11/11/2017
  4. 4. stuffI do (bynight) @gabro27 - Codemotion 11/11/2017
  5. 5. Whythistalk @gabro27 - Codemotion 11/11/2017
  6. 6. Agenda 1.AST 2.AST workflows 3.A real-world example @gabro27 - Codemotion 11/11/2017
  7. 7. Let's startfromtheanswer const answer = 42; @gabro27 - Codemotion 11/11/2017
  8. 8. Tokens const answer = 42 ; // | | | | | | | | | | // _'const'_/ _name_/ _'='_/ _num_/ _';'_/ @gabro27 - Codemotion 11/11/2017
  9. 9. Grammar const answer = 42 ; // | | | | || // | _Identifier__/ _NumericLiteral_/| // | | | // | _________VariableDeclarator________/ // | | // ____________VariableDeclaration____________/ @gabro27 - Codemotion 11/11/2017
  10. 10. So...AST? @gabro27 - Codemotion 11/11/2017
  11. 11. Abstract Syntax Tree@gabro27 - Codemotion 11/11/2017
  12. 12. WhyAbstract? const answer = 42; const answer = 42 const answer = 42 const answer = 42 @gabro27 - Codemotion 11/11/2017
  13. 13. ASTinJavaScript @gabro27 - Codemotion 11/11/2017
  14. 14. 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
  15. 15. astexplorer.net @gabro27 - Codemotion 11/11/2017
  16. 16. ASTWorkflows @gabro27 - Codemotion 11/11/2017
  17. 17. basic @gabro27 - Codemotion 11/11/2017
  18. 18. babel @gabro27 - Codemotion 11/11/2017
  19. 19. demo: literal transformation @gabro27 - Codemotion 11/11/2017
  20. 20. codemod @gabro27 - Codemotion 11/11/2017
  21. 21. hey, doesn'tbabeldo the samething? @gabro27 - Codemotion 11/11/2017
  22. 22. codemodtools » recast » jscodeshift @gabro27 - Codemotion 11/11/2017
  23. 23. eslint @gabro27 - Codemotion 11/11/2017
  24. 24. ESLintuses espree, so... Whatabout ES next? @gabro27 - Codemotion 11/11/2017
  25. 25. babel-eslint @gabro27 - Codemotion 11/11/2017
  26. 26. demo: no-console- log @gabro27 - Codemotion 11/11/2017
  27. 27. Whatabout eslint --fix @gabro27 - Codemotion 11/11/2017
  28. 28. prettier @gabro27 - Codemotion 11/11/2017
  29. 29. Prettier... forTS? @gabro27 - Codemotion 11/11/2017
  30. 30. Meanwhile inthe realworld @gabro27 - Codemotion 11/11/2017
  31. 31. // 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
  32. 32. // state.js export default { isFlag: t.Boolean, name: t.String, label: t.maybe(t.String) } @gabro27 - Codemotion 11/11/2017
  33. 33. // 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
  34. 34. DEMO@gabro27 - Codemotion 11/11/2017
  35. 35. We've seen @gabro27 - Codemotion 11/11/2017
  36. 36. AST:whatandwhy @gabro27 - Codemotion 11/11/2017
  37. 37. CompetingAST standards inJS @gabro27 - Codemotion 11/11/2017
  38. 38. TypicalAST-basedworkflows @gabro27 - Codemotion 11/11/2017
  39. 39. Some resources » astexplorer.net » Babel Handbook @gabro27 - Codemotion 11/11/2017
  40. 40. Thankyou @gabro27 - Codemotion 11/11/2017
  41. 41. Questions?ping me on Twitter: @gabro27 or @gabro on Slack (http://milanojs.herokuapp.com/) PS: wanna work on this stuff? We're hiring! @gabro27 - Codemotion 11/11/2017

    Be the first to comment

    Login to see the comments

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.

Views

Total views

258

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

6

Shares

0

Comments

0

Likes

0

×