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
210
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
67
Design System Adventures in React
gabro
1
78
Casting Metals
gabro
0
350
Functional Programming in front-end applications
gabro
1
220
Functional Programming in Front-end Applications
gabro
3
160
How to get away with Functional Programming in front-end applications
gabro
3
1.4k
Bridging the tooling gap with Scala.js
gabro
0
260
Monad Transformers Down to Earth
gabro
2
2.5k
Move fast and fix things
gabro
0
320
Other Decks in Programming
See All in Programming
Open source software: how to live long and go far
gaelvaroquaux
0
660
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
Introduction to kotlinx.rpc
arawn
0
760
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.3k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
810
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1k
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
900
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
270
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
290
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Scaling GitHub
holman
459
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building an army of robots
kneath
303
45k
GitHub's CSS Performance
jonrohan
1030
460k
Building Your Own Lightsaber
phodgson
104
6.2k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Product Roadmaps are Hard
iamctodd
PRO
50
11k
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