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

Mythical trees and where to find them

C2bb0454c4af1a61e7f173d54ce17b0b?s=47 Gabriele Petronella
November 11, 2017
Programming
0
190

Mythical trees and where to find them

An introduction to ASTs in JavaScript

C2bb0454c4af1a61e7f173d54ce17b0b?s=128

Gabriele Petronella

November 11, 2017
Tweet

More Decks by Gabriele Petronella

See All by Gabriele Petronella
Casting Metals
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
0
300
Functional Programming in front-end applications
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
1
190
Functional Programming in Front-end Applications
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
3
130
How to get away with Functional Programming in front-end applications
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
3
990
Bridging the tooling gap with Scala.js
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
0
230
Monad Transformers Down to Earth
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
2
1.7k
Move fast and fix things
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
0
280
Move fast and fix things
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
1
3.2k
Move fast and fix things
C2bb0454c4af1a61e7f173d54ce17b0b?s=48 gabro
0
1.4k

Other Decks in Programming

See All in Programming
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
87980686562669ac5ec4617ca53047f9?s=48 tacke_jp
2
300
Is Rust a great language for building Kubernetes ecosystem
7f408bc67dc9ae3b288ee92d16d3c4c2?s=48 deepu105
0
140
Blazor WebAssembly – Dynamische Formulare und Inhalte in Aktion
7a33106dde82ecc65a220eaf9d131222?s=48 patrickjahr
0
160
Loom is Blooming
F784a8de872a5d98f67ac5ccbd6683d0?s=48 josepaumard
3
540
読みやすいコードを書こう
A7048be18b1c2e712e5b564b1adb1f7e?s=48 yutorin
0
390
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
330c5e37fb238d6b319ae6e18770f44b?s=48 posquit0
1
310
Jakarta EE 10 is Coming Your Way
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
2.3k
C言語でメモリ管理を考えた話
F17bbe02fb6dda24d29196c2479121b1?s=48 hkawai
0
190
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
0
590
コードの解析と言語習得の心得
72dae9d4524988d16990da682116fc8a?s=48 jinjin33333
0
130
microCMS × imgixを活用して品質とレスポンスを両立したポートフォリオサイトを作成した話
777d99f6f7f0807fd423b7acb12b53fe?s=48 takehitogoto
0
400
Managing gRPC with Wire
05162bc961c3654218bf1839974a4f35?s=48 oldergod
2
150

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.3k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
268
11k
Why Our Code Smells
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
172
8.3k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
63k
Designing for Performance
245cee81a9c424266e5e401d844ea881?s=48 lara
596
63k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.1k

Transcript

  1. Mythical Trees and where to find them Gabriele Petronella Software

    Engineer @ buildo

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

  3. stuff I do (by day) @gabro27 - Codemotion 11/11/2017

  4. stuff I do (by night) @gabro27 - Codemotion 11/11/2017

  5. Why this talk @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 start from the answer 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. Why Abstract? const answer = 42; const answer = 42

    const answer = 42 const answer = 42 @gabro27 - Codemotion 11/11/2017

  13. AST in JavaScript @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. AST Workflows @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't babel do the same thing? @gabro27 - Codemotion

    11/11/2017

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

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

  24. ESLint uses espree, so... What about 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. What about eslint --fix @gabro27 - Codemotion 11/11/2017

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

  29. Prettier... for TS? @gabro27 - Codemotion 11/11/2017

  30. Meanwhile in the real world @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: what and why @gabro27 - Codemotion 11/11/2017

  37. Competing AST standards in JS @gabro27 - Codemotion 11/11/2017

  38. Typical AST-based workflows @gabro27 - Codemotion 11/11/2017

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

    11/11/2017

  40. Thank you @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