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
RailsGirls IZUMO スポンサーLT
16bitidol
0
170
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
650
Is Xcode slowly dying out in 2025?
uetyo
1
260
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
技術同人誌をMCP Serverにしてみた
74th
1
630
Team operations that are not burdened by SRE
kazatohiei
1
310
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
100
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
120
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Thoughts on Productivity
jonyablonski
69
4.7k
Done Done
chrislema
184
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
KATA
mclloyd
30
14k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
4 Signs Your Business is Dying
shpigford
184
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Building an army of robots
kneath
306
45k
Balancing Empowerment & Direction
lara
1
410
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