![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3506179/Fantastic-Beasts-and-Where-to-Find-Them-Logo.png)
2018 @phenomnominal
I'm Craig.
I do JavaScript at
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3509454/trademe-logo-tagline.png)
in New Zealand
2018 @phenomnominal
Let's start with a story...
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518529/youre-a-wizard-hagrid.gif)
JSConf attendee!
Good Guy
You're a wizard!
2018 @phenomnominal
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
2018 @phenomnominal
You can do magic!!
![](https://media.giphy.com/media/IMEXZlhdTy7e0/giphy.gif)
This is a patronus
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518631/dumbledore.gif)
You know Dumbledore!!!
Good Guy
2018 @phenomnominal
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
2018 @phenomnominal
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?
2018 @phenomnominal
Voldemort is back (again!)
Literally the
Worst Guy
![](https://media.giphy.com/media/IWfm4Mcfjw4Yo/giphy.gif)
2018 @phenomnominal
And he has put a curse on Harry!
Siriously
Evil.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518606/voldemort-curse.gif)
2018 @phenomnominal
2018 @phenomnominal
If we don't save him in the next 25 minutes, Voldemort is going to kill him!
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518953/ron-panic.gif)
This is bad.
Our friend is gone.
Time is running out.
2018 @phenomnominal
But there is one bit of good news...
![](https://vignette.wikia.nocookie.net/en.futurama/images/a/ad/GoodNewsEveryone.jpg/revision/latest?cb=20090731021518)
![](https://pbs.twimg.com/profile_images/879303198233825280/CXvOBAm-_400x400.jpg)
2018 @phenomnominal
Harry speaks Parseltongue!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518746/harry-parseltongue.gif)
He can talk to snakes!
2018 @phenomnominal
Which, as every magical being knows, is a
Turing-complete programming language!
(this is 100% canon, don't look it up)
2018 @phenomnominal
Weakly Typed
Functional
Interpreted
Garbage collected
Significant whitespace
Parseltongue 🐍🐍🐍
2018 @phenomnominal
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
2018 @phenomnominal
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 🐍🐍🐍
2018 @phenomnominal
Parseltongue:
JavaScript:
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 🐍🐍🐍
2018 @phenomnominal
Parseltongue:
JavaScript:
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 🐍🐍🐍
2018 @phenomnominal
Parseltongue:
JavaScript:
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 🐍🐍🐍
2018 @phenomnominal
Parseltongue:
JavaScript:
Spells
Parseltongue 🐍🐍🐍
2018 @phenomnominal
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
2018 @phenomnominal
Harry's spell ⭐️⭐️⭐️
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4723150/carbon.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)
2018 @phenomnominal
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)
2018 @phenomnominal
![](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
???
2018 @phenomnominal
![](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!?
2018 @phenomnominal
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 darkest of the dark arts)
2018 @phenomnominal
That gives us:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4664789/carbon__1_.png)
RegEx:
2018 @phenomnominal
Converting variables
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4664842/carbon__4_.png)
2018 @phenomnominal
RegEx:
Converting loops
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4664851/carbon__5_.png)
Hmmm...
2018 @phenomnominal
RegEx:
Converting functions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4664875/carbon__6_.png)
Ruh roh!
2018 @phenomnominal
RegEx:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3527307/hell-ron.gif)
2018 @phenomnominal
What are we really trying to do?
Transform one language into another
![](https://media.giphy.com/media/2f41Z7bhKGvbG/giphy.gif)
2018 @phenomnominal
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)
![](http://www.bartekb.pl/img/coffeescript-logo.png)
2018 @phenomnominal
"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
2018 @phenomnominal
Where do we start?
String literal
Function call
Identifier
Expression
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665064/carbon.png)
2018 @phenomnominal
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)
2018 @phenomnominal
Esprima
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4665125/carbon__2_.png)
2018 @phenomnominal
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)
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518380/wat-ron.gif)
Wat.
2018 @phenomnominal
![](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)
2018 @phenomnominal
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)
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4675779/carbon__17_.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)
2018 @phenomnominal
Which means...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3527396/answer-hermione.gif)
2018 @phenomnominal
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!
2018 @phenomnominal
![](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!?
2018 @phenomnominal
![](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
2018 @phenomnominal
![](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
???
???
2018 @phenomnominal
2018 @phenomnominal
Remember Esprima?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4698156/carbon__2_.png)
2018 @phenomnominal
Remember Esprima?
Esprima takes code written in a specific language (JavaScript) and turns it into an AST!
2018 @phenomnominal
We need to make our own Esprima for Parseltongue!
![](https://media.giphy.com/media/OPBZnaTaC92yA/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3518497/shrug-harry.gif)
How do we do that?
2018 @phenomnominal
![](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
2018 @phenomnominal
Lexing/Tokenising
"Lexing is the process of breaking down source code into words that are relevant to the language, which are called tokens"
2018 @phenomnominal
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)
2018 @phenomnominal
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)
2018 @phenomnominal
Identifier characters
Space
Punctuator characters
Space
Quote character
Lexing/Tokenising
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4675779/carbon__17_.png)
Punctuator
Punctuator
String characters
Quote character
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4667964/carbon__7_.png)
2018 @phenomnominal
![](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
2018 @phenomnominal
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"
2018 @phenomnominal
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)
<~
2018 @phenomnominal
Identifier
Space
Punctuator -
Identifier
Punctuator -
Space
Identifier
Punctuator -
Parsing
Function Declaration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4669486/carbon__10_.png)
Line Terminator
Indent
[
,
]
2018 @phenomnominal
Parsing
Function Declaration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4669592/carbon.png)
2018 @phenomnominal
![](https://media.giphy.com/media/qPCln5TSOsdRS/giphy.gif)
Actual LOL
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4669734/Mar-06-2018_09-02-04.gif)
2018 @phenomnominal
Now we just need to go from the AST to JavaScript...
2018 @phenomnominal
![](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
2018 @phenomnominal
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!
2018 @phenomnominal
ESCodeGen
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4669759/carbon.png)
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532509/mcgonagall-clap.gif)
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4671446/carbon__12_.png)
2018 @phenomnominal
JavaScript!
![](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
2018 @phenomnominal
We're almost ready to save Harry!
2018 @phenomnominal
But OH NO!
Voldemort can also speak Parseltongue!
![](https://media.giphy.com/media/2v1QQA77tKnCM/giphy.gif)
2018 @phenomnominal
Voldemort will try to stop Harry from escaping!
He might even use the...
2018 @phenomnominal
Unforgivable Functions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4670737/carbon__2_.png)
2018 @phenomnominal
We need to come up with a way to stop Voldemort from using those functions!
2018 @phenomnominal
![](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
???
2018 @phenomnominal
![](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
2018 @phenomnominal
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://parceljs.org/assets/parcel-front@2x.png)
![](https://parceljs.org/assets/parcel-back@2x.png)
![](https://seeklogo.com/images/P/prettier-logo-D5C5197E37-seeklogo.com.png)
![](https://seeklogo.com/images/R/rollup-js-logo-F3925E2546-seeklogo.com.png)
2018 @phenomnominal
ESQuery
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4670805/carbon__8_.png)
2018 @phenomnominal
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)
2018 @phenomnominal
Linting
Fixing bad stuff
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/4670916/carbon__11_.png)
Tickling curse
2018 @phenomnominal
2018 @phenomnominal
![](http://digitalspyuk.cdnds.net/17/22/980x490/landscape-1496159558-voldemort.jpg)
![](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
2018 @phenomnominal
2018 @phenomnominal
We did it!
Harry is safe!
![](https://media.giphy.com/media/qLHzYjlA2FW8g/giphy.gif)
2018 @phenomnominal
![](https://media.giphy.com/media/Mpcj6RPkr6DK/giphy.gif)
All is well
(again)
2018 @phenomnominal
So...
2018 @phenomnominal
![](https://media.giphy.com/media/H46337dIpEO6Q/giphy.gif)
When do you actually use an AST?
2018 @phenomnominal
Ever had to change every file in your codebase?
2018 @phenomnominal
Ever had to generate boilerplate?
2018 @phenomnominal
Ever had to extract API documentation?
2018 @phenomnominal
You can use an AST for that!
(and probably should)
2018 @phenomnominal
ASTs help us with...
Performance
Maintenance
Consistency
Analysis
Robustness
Automation
![](https://media.giphy.com/media/uUoKsbqleQAo0/giphy.gif)
2018 @phenomnominal
They're everywhere
![](https://media.giphy.com/media/10b6nhxmDBVDMs/giphy.gif)
2018 @phenomnominal
They're powerful
![](https://media.giphy.com/media/l0HU7GTuJS51HCsko/giphy.gif)
2018 @phenomnominal
They're useful
![](https://media.giphy.com/media/9NyM4FWtm1rws/giphy.gif)
2018 @phenomnominal
Once you know where to find them
2018 @phenomnominal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/3532577/clap-hermione.gif)
Thanks!
Me: Craig
Twitter: @phenomnominal
Code: github.com/phenomnomnominal/parseltongue
Slides: slides.com/craigspence/fantastic-asts-and-where-to-find-them-jsconf
Resources:
https://github.com/dannysu/ecmascript1
https://github.com/estree/estree
https://github.com/jquery/esprima
https://github.com/estools/escodegen
http://estools.github.io/esquery
https://medium.com/@kosamari/how-to-be-a-compiler-make-a-compiler-with-javascript-4a8a13d473b4
https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API
https://github.com/mozilla/source-map#generating-a-source-map
https://hacks.mozilla.org/2013/05/compiling-to-javascript-and-debugging-with-source-maps/
https://www.buzzfeed.com/zgalehouse/300-harry-potter-gifsthe-magic-never-ends-7sat
2018 @phenomnominal
Fantastic ASTs and Where To Find Them
By Craig Spence
Fantastic ASTs and Where To Find Them
JSConfAu
- 4,166