Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mythical trees and where to find them
Search
Gabriele Petronella
November 11, 2017
Programming
0
220
Mythical trees and where to find them
An introduction to ASTs in JavaScript
Gabriele Petronella
November 11, 2017
Tweet
Share
More Decks by Gabriele Petronella
See All by Gabriele Petronella
Design System Adventures in React - ReactJS Day 2024
gabro
0
90
Design System Adventures in React
gabro
1
91
Casting Metals
gabro
0
360
Functional Programming in front-end applications
gabro
1
230
Functional Programming in Front-end Applications
gabro
3
170
How to get away with Functional Programming in front-end applications
gabro
3
1.4k
Bridging the tooling gap with Scala.js
gabro
0
270
Monad Transformers Down to Earth
gabro
2
2.6k
Move fast and fix things
gabro
0
330
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
130
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
710
LINEヤフー データグループ紹介
lycorp_recruit_jp
1
2.4k
5つのアンチパターンから学ぶLT設計
narihara
1
160
ふつうの技術スタックでアート作品を作ってみる
akira888
1
490
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
660
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
650
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
For a Future-Friendly Web
brad_frost
179
9.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Raft: Consensus for Rubyists
vanstee
140
7k
BBQ
matthewcrist
89
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Side Projects
sachag
455
42k
How GitHub (no longer) Works
holman
314
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Transcript
Mythical Trees and where to find them Gabriele Petronella Software
Engineer @ buildo
me, hi! @gabro27 - Codemotion 11/11/2017
stuff I do (by day) @gabro27 - Codemotion 11/11/2017
stuff I do (by night) @gabro27 - Codemotion 11/11/2017
Why this talk @gabro27 - Codemotion 11/11/2017
Agenda 1.AST 2.AST workflows 3.A real-world example @gabro27 - Codemotion
11/11/2017
Let's start from the answer const answer = 42; @gabro27
- Codemotion 11/11/2017
Tokens const answer = 42 ; // | | |
| | | | | | | // \_'const'_/ \_name_/ \_'='_/ \_num_/ \_';'_/ @gabro27 - Codemotion 11/11/2017
Grammar const answer = 42 ; // | | |
| || // | \_Identifier__/ \_NumericLiteral_/| // | | | // | \_________VariableDeclarator________/ // | | // \____________VariableDeclaration____________/ @gabro27 - Codemotion 11/11/2017
So... AST? @gabro27 - Codemotion 11/11/2017
Abstract Syntax Tree @gabro27 - Codemotion 11/11/2017
Why Abstract? const answer = 42; const answer = 42
const answer = 42 const answer = 42 @gabro27 - Codemotion 11/11/2017
AST in JavaScript @gabro27 - Codemotion 11/11/2017
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
astexplorer.net @gabro27 - Codemotion 11/11/2017
AST Workflows @gabro27 - Codemotion 11/11/2017
basic @gabro27 - Codemotion 11/11/2017
babel @gabro27 - Codemotion 11/11/2017
demo: literal transformation @gabro27 - Codemotion 11/11/2017
codemod @gabro27 - Codemotion 11/11/2017
hey, doesn't babel do the same thing? @gabro27 - Codemotion
11/11/2017
codemod tools » recast » jscodeshift @gabro27 - Codemotion 11/11/2017
eslint @gabro27 - Codemotion 11/11/2017
ESLint uses espree, so... What about ES next? @gabro27 -
Codemotion 11/11/2017
babel-eslint @gabro27 - Codemotion 11/11/2017
demo: no-console- log @gabro27 - Codemotion 11/11/2017
What about eslint --fix @gabro27 - Codemotion 11/11/2017
prettier @gabro27 - Codemotion 11/11/2017
Prettier... for TS? @gabro27 - Codemotion 11/11/2017
Meanwhile in the real world @gabro27 - Codemotion 11/11/2017
// 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
// state.js export default { isFlag: t.Boolean, name: t.String, label:
t.maybe(t.String) } @gabro27 - Codemotion 11/11/2017
// 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
DEMO @gabro27 - Codemotion 11/11/2017
We've seen @gabro27 - Codemotion 11/11/2017
AST: what and why @gabro27 - Codemotion 11/11/2017
Competing AST standards in JS @gabro27 - Codemotion 11/11/2017
Typical AST-based workflows @gabro27 - Codemotion 11/11/2017
Some resources » astexplorer.net » Babel Handbook @gabro27 - Codemotion
11/11/2017
Thank you @gabro27 - Codemotion 11/11/2017
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