![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3506179/Fantastic-Beasts-and-Where-to-Find-Them-Logo.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
I'm Craig (he/him)
I do JavaScript.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/7711530/Me.jpg)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Desktop + Web Player
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9565612/Screen_Shot_2022-05-17_at_11.15.47.png)
Slides!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
DISCLAIMER!
TRANS RIGHTS ARE HUMAN RIGHTS
Today, I'm going to tell you a story!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
But first...
✨MAGIC✨
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518529/youre-a-wizard-hagrid.gif)
SpEC attendee!
Good Guy
You're a wizard!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
You went to Hogwarts!!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518650/hogwarts-great-hall.gif)
(School of Witchcraft and Wizardry)
Place where stuff happens
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
You can do magic!!
![](https://media.giphy.com/media/IMEXZlhdTy7e0/giphy.gif)
This is a patronus
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518631/dumbledore.gif)
You know Dumbledore!!!
Good Guy
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
And Harry Potter is your Best Friend!!!!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518668/harry-hippogriff.gif)
Main Good Guy
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
But there's a problem...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518683/snape-oh-no.gif)
Maybe
Good?
Maybe Bad?
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Voldemort is back (again!)
Literally the
Worst Guy
![](https://media.giphy.com/media/IWfm4Mcfjw4Yo/giphy.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
And he has put a curse on Harry!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518606/voldemort-curse.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
If we don't save him in the next 25 minutes, Voldemort is going to kill him!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518953/ron-panic.gif)
Not good.
Our friend is gone.
Time is running out.
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
But there is one bit of good news...
![](https://pbs.twimg.com/profile_images/879303198233825280/CXvOBAm-_400x400.jpg)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546480/artworks-nUHsk4rJ0uJygc7q-czWeIA-t500x500.jpg)
Harry speaks Parseltongue!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518746/harry-parseltongue.gif)
He can talk to snakes!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Which, as every magical being knows, is a
Turing-complete programming language!
(this is 100% canon, don't look it up)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Weakly Typed
Functional
Interpreted
Garbage collected
Significant whitespace
Parseltongue 🐍🐍🐍
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Parseltongue 🐍🐍🐍
Variable Declarations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663581/carbon__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663583/carbon__2_.png)
Parseltongue:
JavaScript:
Only one type of variable
Always start with
Assignment Operator is
<~
sss
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Function Expressions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663602/carbon__2_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663603/carbon__3_.png)
Parameters are defined with an array
Return uses the assignment operator
Significant whitespace
Parseltongue 🐍🐍🐍
Parseltongue:
JavaScript:
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Call Expression
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663596/carbon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663597/carbon__1_.png)
Passing arguments to a function also uses the Assignment operator
Arguments are declared with an array
Parseltongue 🐍🐍🐍
Parseltongue:
JavaScript:
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Control Flow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663646/carbon__6_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663647/carbon__5_.png)
Use an empty array when you have no arguments
Parseltongue 🐍🐍🐍
Parseltongue:
JavaScript:
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Loops
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663696/carbon__2_.png)
Range operator is
~>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4671586/carbon__16_.png)
Parseltongue 🐍🐍🐍
Parseltongue:
JavaScript:
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Spells
Parseltongue 🐍🐍🐍
Parseltongue:
JavaScript:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4723150/carbon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4723154/carbon__1_.png)
is magic and becomes
sssCast
alert
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Harry's spell ⭐️⭐️⭐️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4723150/carbon.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Internet browsers don't understand Parseltongue.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663784/Screen_Shot_2018-03-04_at_3.02.15_AM.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
We need to translate Harry's Parseltongue into JavaScript!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3527343/leviosa-hermione.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3527344/leviosar-hermione.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532472/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532473/2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532475/3.jpg)
Parseltongue
JavaScript
???
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532472/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532473/2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532475/3.jpg)
Parseltongue
JavaScript
REGEX!?
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Let's go a line at a time:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4664903/carbon__7_.png)
RegEx:
(the most evil magic)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
That gives us:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4664789/carbon__1_.png)
RegEx:
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Converting variables
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4664842/carbon__4_.png)
RegEx:
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Converting loops
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4664851/carbon__5_.png)
Hmmm...
RegEx:
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Converting functions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4664875/carbon__6_.png)
Ruh roh!
RegEx:
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3527307/hell-ron.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
What are we really trying to do?
Transform one language into another
![](https://media.giphy.com/media/2f41Z7bhKGvbG/giphy.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Transpiling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/2915258/Screen_Shot_2016-08-14_at_3.25.30_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/2915251/babel.png)
(aka transfiguration)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546498/purescript-logo-FFC2726A4B-seeklogo.com.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
"Transpiling is a specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction"
Transpiling
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Where do we start?
String literal
Function call
Identifier
Expression
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665064/carbon.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
ESTree
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665064/carbon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665107/carbon__1_.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Esprima
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665125/carbon__2_.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Abstract
disassociated from any specific instance
the way in which linguistic elements are put together
Syntax
TREE
data structure made up of vertices and edges without any cycles
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518349/Whomping-Willow.jpg)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518380/wat-ron.gif)
Wat.
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4663562/Screen_Shot_2018-03-03_at_11.32.08_PM.png)
Wat.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665143/Screen_Shot_2018-03-05_at_12.34.39_AM.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
a data structure that represents the structure of code, without any actual syntax.
An AST is:
Code:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665149/carbon__3_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665150/carbon__4_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4675779/carbon__17_.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
a data structure that represents the structure of code, without any actual syntax.
An AST is:
AST:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665160/carbon__6_.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Which means...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3527396/answer-hermione.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
If we can get from Parseltongue to an AST...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564003/bird-snake-thing.jpg)
Then we can go from that AST to JavaScript!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532472/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532473/2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532475/3.jpg)
Parseltongue
JavaScript
REGEX!?
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532472/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532473/2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532475/3.jpg)
Parseltongue
JavaScript
AST
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532472/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532473/2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532475/3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532477/4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564046/5.jpg)
Parseltongue
JavaScript
AST
???
???
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Target AST
var spell = 'Expecto Patronum';
function magic (spell, intensity) {
var intense = '';
for (var i = 0; i < intensity, i = i + 1) {
intense = intense + '!';
}
return spell + intense;
}
for (var i = 0; i < 10, i = i + 1) {
magic(spell, i);
}
Remember Esprima?
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
import { parse } from 'esprima';
const AST = parse(`
var spell = 'Expecto Patronum';
function magic (spell, intensity) {
var intense = '';
for (var i = 0; i < intensity, i = i + 1) {
intense = intense + '!';
}
return spell + intense;
}
for (var i = 0; i < 10, i = i + 1) {
magic(spell, i);
}
`);
Remember Esprima?
Esprima takes code written in a specific language (JavaScript) and turns it into an AST!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
We need to make our own Esprima for Parseltongue!
![](https://media.giphy.com/media/OPBZnaTaC92yA/giphy.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518497/shrug-harry.gif)
How do we do that?
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532472/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532473/2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532475/3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532477/4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564046/5.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564140/6.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564148/7.jpg)
Parseltongue
JavaScript
AST
???
???
Tokens
Lexing
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Lexing/Tokenising
"Lexing is the process of breaking down source code into words that are relevant to the language, which are called tokens"
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Lexing/Tokenising
Tokens in JavaScript
Identifier
Keyword
Literal - bool, null, number, string
Punctuator
EOF
RegularExpression
Template
![](https://vignette.wikia.nocookie.net/harrypotter/images/1/1e/Hedwig_Snowy_Owl_PM.png/revision/latest?cb=20161123234010)
(we're getting a bit intense now - here's an owl)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Lexing/Tokenising
Tokens in Parseltongue
Identifier
Keyword
Literal - bool, null, number, string
Punctuator
EOF
Indent
LineTerminator
Space
![](https://vignette.wikia.nocookie.net/harrypotter/images/1/1e/Hedwig_Snowy_Owl_PM.png/revision/latest?cb=20161123234010)
(we're getting a bit intense now - here's an owl)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Identifier characters
Space
Punctuator characters
Space
Quote character
Lexing/Tokenising
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4675779/carbon__17_.png)
Punctuator
Punctuator
String characters
Quote character
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4667964/carbon__7_.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532472/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532473/2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532475/3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532477/4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564046/5.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564140/6.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564148/7.jpg)
Parseltongue
JavaScript
AST
Parsing
???
Tokens
Lexing
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Parsing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3533666/looking-dumbledore.gif)
"Parsing is the process of taking the lexical tokens and applying the grammar of the language to them"
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Parsing
Variable Declaration
Identifier
Space
Punctuator -
Space
String literal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665151/carbon__5_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4669453/carbon__9_.png)
<~
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Identifier
Space
Punctuator -
Identifier
Punctuator -
Space
Identifier
Punctuator -
Parsing
Function Expression
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4669486/carbon__10_.png)
Line Terminator
Indent
[
,
]
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Parsing
Function Expression
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4669592/carbon.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Grammar
Function Expression
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Variable Declaration
For Statement
Binary Expression
Update Expression
![](https://media.giphy.com/media/qPCln5TSOsdRS/giphy.gif)
Actual LOL
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4669734/Mar-06-2018_09-02-04.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Now we just need to go from the AST to JavaScript...
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532472/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532473/2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532475/3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532477/4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564046/5.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564140/6.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564148/7.jpg)
Parseltongue
JavaScript
AST
Parsing
Code Generating
Tokens
Lexing
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Code Generating
![](https://media.giphy.com/media/7hnNiwfkYsPFC/giphy.gif)
This is really hard to do by ourselves.
We can again stand on the shoulders of half-giants!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
ESCodeGen
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4669759/carbon.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532509/mcgonagall-clap.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4671446/carbon__12_.png)
JavaScript!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532472/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532473/2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532475/3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532477/4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564046/5.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564140/6.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3564148/7.jpg)
Parseltongue
JavaScript
AST
Parsing
Code Generating
Tokens
Lexing
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
We're almost ready to save Harry!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
But OH NO!
Voldemort can also speak Parseltongue!
![](https://media.giphy.com/media/2v1QQA77tKnCM/giphy.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Voldemort will try to stop Harry from escaping!
He might even use the...
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Unforgivable Functions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4670737/carbon__2_.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
We need to come up with a way to stop Voldemort from using those functions!
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571423/movie1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571435/movie2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571439/movie3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571441/movie4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571446/movie5.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571448/movie6.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571453/movie7.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571455/movie8.jpg)
JavaScript
AST
Parsing
Code Generating
Tokens
Lexing
Parseltongue
???
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571423/movie1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571435/movie2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571439/movie3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571441/movie4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571446/movie5.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571448/movie6.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571453/movie7.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571455/movie8.jpg)
JavaScript
AST
Parsing
Code Generating
Tokens
Lexing
Parseltongue
Inspecting
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Inspecting
Transformation
Mutation
Validation
![](https://seeklogo.com/images/W/webpack-logo-9E66EE203A-seeklogo.com.png)
![](http://stryker-mutator.io/images/stryker_205x205.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/2915258/Screen_Shot_2016-08-14_at_3.25.30_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/2915251/babel.png)
![](https://seeklogo.com/images/P/prettier-logo-D5C5197E37-seeklogo.com.png)
![](https://seeklogo.com/images/R/rollup-js-logo-F3925E2546-seeklogo.com.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
ESQuery
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4670805/carbon__8_.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Linting
Detect bad stuff
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4670894/carbon__9_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4670904/carbon__10_.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Linting
Fixing bad stuff
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4670916/carbon__11_.png)
Tickling curse
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](http://digitalspyuk.cdnds.net/17/22/980x490/landscape-1496159558-voldemort.jpg)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571423/movie1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571435/movie2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571439/movie3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571441/movie4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571446/movie5.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571448/movie6.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571453/movie7.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3571455/movie8.jpg)
JavaScript
AST
Parsing
Code Generating
Tokens
Lexing
Parseltongue
Inspection
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
We did it!
Harry is safe!
![](https://media.giphy.com/media/qLHzYjlA2FW8g/giphy.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://media.giphy.com/media/Mpcj6RPkr6DK/giphy.gif)
All is well
(again)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
So...
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://media.giphy.com/media/H46337dIpEO6Q/giphy.gif)
When do you actually use an AST?
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Ever had to change every file in your codebase?
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Ever had to generate boilerplate?
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Ever had to extract API documentation?
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
You can use an AST for that!
(and probably should)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
ASTs help us with...
Performance
Maintenance
Consistency
Analysis
Robustness
Automation
![](https://media.giphy.com/media/uUoKsbqleQAo0/giphy.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
They're everywhere
![](https://media.giphy.com/media/10b6nhxmDBVDMs/giphy.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
They're powerful
![](https://media.giphy.com/media/l0HU7GTuJS51HCsko/giphy.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
They're useful
![](https://media.giphy.com/media/9NyM4FWtm1rws/giphy.gif)
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
Once you know where to find them
2022 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/9546472/Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532577/clap-hermione.gif)
⚡️ Thanks! ⚡️
Fantastic ASTs and Where To Find Them (SpEC)
By Craig Spence
Fantastic ASTs and Where To Find Them (SpEC)
SpEC 2022
- 2,212