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.

1. MythicalTrees
andwhereto find
them
GabrielePetronella
SoftwareEngineer@buildo

2. me, hi!
@gabro27 - Codemotion 11/11/2017

3. stuffI do (byday)
@gabro27 - Codemotion 11/11/2017

4. stuffI do (bynight)
@gabro27 - Codemotion 11/11/2017

5. Whythistalk
@gabro27 - Codemotion 11/11/2017

6. Agenda
1.AST
2.AST workflows
3.A real-world example
@gabro27 - Codemotion 11/11/2017

7. Let's startfromtheanswer
const answer = 42;
@gabro27 - Codemotion 11/11/2017

8. Tokens
const answer = 42 ;
// | | | | | | | | | |
// _'const'_/ _name_/ _'='_/ _num_/ _';'_/
@gabro27 - Codemotion 11/11/2017

9. Grammar
const answer = 42 ;
// | | | | ||
// | _Identifier__/ _NumericLiteral_/|
// | | |
// | _________VariableDeclarator________/
// | |
// ____________VariableDeclaration____________/
@gabro27 - Codemotion 11/11/2017

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

11. Abstract
Syntax
Tree@gabro27 - Codemotion 11/11/2017

12. WhyAbstract?
const answer = 42;
const answer = 42
const answer =
42
const
answer
=
42
@gabro27 - Codemotion 11/11/2017

13. ASTinJavaScript
@gabro27 - Codemotion 11/11/2017

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. astexplorer.net
@gabro27 - Codemotion 11/11/2017

16. ASTWorkflows
@gabro27 - Codemotion 11/11/2017

17. basic
@gabro27 - Codemotion 11/11/2017

18. babel
@gabro27 - Codemotion 11/11/2017

19. demo: literal
transformation
@gabro27 - Codemotion 11/11/2017

20. codemod
@gabro27 - Codemotion 11/11/2017

21. hey, doesn'tbabeldo
the samething?
@gabro27 - Codemotion 11/11/2017

22. codemodtools
» recast
» jscodeshift
@gabro27 - Codemotion 11/11/2017

23. eslint
@gabro27 - Codemotion 11/11/2017

24. ESLintuses espree, so...
Whatabout ES next?
@gabro27 - Codemotion 11/11/2017

25. babel-eslint
@gabro27 - Codemotion 11/11/2017

26. demo: no-console-
log
@gabro27 - Codemotion 11/11/2017

27. Whatabout
eslint --fix
@gabro27 - Codemotion 11/11/2017

28. prettier
@gabro27 - Codemotion 11/11/2017

29. Prettier... forTS?
@gabro27 - Codemotion 11/11/2017

30. Meanwhile
inthe realworld
@gabro27 - Codemotion 11/11/2017

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. // state.js
export default {
isFlag: t.Boolean,
name: t.String,
label: t.maybe(t.String)
}
@gabro27 - Codemotion 11/11/2017

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. DEMO@gabro27 - Codemotion 11/11/2017

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

36. AST:whatandwhy
@gabro27 - Codemotion 11/11/2017

37. CompetingAST
standards inJS
@gabro27 - Codemotion 11/11/2017

38. TypicalAST-basedworkflows
@gabro27 - Codemotion 11/11/2017

39. Some resources
» astexplorer.net
» Babel Handbook
@gabro27 - Codemotion 11/11/2017

40. Thankyou
@gabro27 - Codemotion 11/11/2017

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