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
230
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
100
Design System Adventures in React
gabro
1
100
Casting Metals
gabro
0
360
Functional Programming in front-end applications
gabro
1
230
Functional Programming in Front-end Applications
gabro
3
180
How to get away with Functional Programming in front-end applications
gabro
3
1.5k
Bridging the tooling gap with Scala.js
gabro
0
280
Monad Transformers Down to Earth
gabro
2
2.7k
Move fast and fix things
gabro
0
340
Other Decks in Programming
See All in Programming
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
230
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
330
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
iOSでSVG画像を扱う
kishikawakatsumi
0
150
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
CSC305 Lecture 09
javiergs
PRO
0
300
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
350
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
XP, Testing and ninja testing ZOZ5
m_seki
3
790
Leading Effective Engineering Teams in the AI Era
addyosmani
7
570
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Unsuck your backbone
ammeep
671
58k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Automating Front-end Workflow
addyosmani
1371
200k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Why Our Code Smells
bkeepers
PRO
340
57k
What's in a price? How to price your products and services
michaelherold
246
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Statistics for Hackers
jakevdp
799
220k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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