JSConf attendee!

You're a wizard!

You went to Hogwarts!!

(School of Witchcraft and Wizardry)

You can do magic!!

You know Dumbledore!!!

And Harry Potter is your Best Friend!!!!

But there's a problem...

Voldemort is back (again!)

And he has put a curse on Harry!

And now Harry is trapped in the internet!

If we don't save him in the next 25 minutes, Voldemort is going to kill him!

But there is one bit of good news...

Harry speaks Parseltongue!

Which, as every magical being knows, is a

Turing-complete programming language!

Parseltongue 🐍🐍🐍

Passing arguments to a function also uses the Assignment operator

Use an empty array when you have no arguments

Loops

Range operator is

~>

Spells

is magic and becomes

sssCast

alert

We better check in on Harry...

Harry's spell ⭐️⭐️⭐️

We need to translate Harry's Parseltongue into JavaScript!

Parseltongue

JavaScript

???

Let's go a line at a time:

RegEx:

That gives us:

Converting variables

Converting loops

Converting functions

You're gonna have a bad time

What are we really trying to do?

Transform one language into another

Transpiling

"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"

Where do we start?

String literal

Function call

Identifier

Expression

ESTree

Esprima

https://github.com/jquery/esprima

Wat.

a data structure that represents the structure of code, without any actual syntax.

An AST is:

Code:

AST:

Which means...

If we can get from Parseltongue to an AST...

Then we can go from that AST to JavaScript!

Remember Esprima?

Esprima takes code written in a specific language (JavaScript) and turns it into an AST!

We need to make our own Esprima for Parseltongue!

How do we do that?

Lexing/Tokenising

"Lexing is the process of breaking down source code into words that are relevant to the language, which are called tokens"

Tokens in JavaScript

Identifier

Keyword

Literal - bool, null, number, string

Punctuator

EOF

Indent

LineTerminator

Space

Identifier characters

Space

Punctuator characters

Space

Quote character

Punctuator

Punctuator

String characters

Quote character

Parsing

"Parsing is the process of taking the lexical tokens and applying the grammar of the language to them"

Variable Declaration

Identifier

Space

Punctuator - 

Space

String literal

<~

Identifier

Space

Punctuator -

Identifier

Punctuator - 

Space

Identifier

Punctuator - 

Function Declaration

Line Terminator

Indent

[

,

]

Now we just need to go from the AST to JavaScript...

Code Generating

This is really hard to do by ourselves.

We can again stand on the shoulders of half-giants!

ESCodeGen

https://github.com/estools/escodegen

Magic™

JavaScript!

We're almost ready to save Harry!

But OH NO!

Voldemort can also speak Parseltongue!

Voldemort will try to stop Harry from escaping!

He might even use the...

Unforgivable Functions

We need to come up with a way to stop Voldemort from using those functions!

Inspecting

ESQuery

https://github.com/estools/esquery

Linting

Let's check that we're safe

JavaScript

AST

Parsing

Code Generating

Tokens

Lexing

Parseltongue

Inspection

Now we're ready!

We did it!

Harry is safe!

All is well

(again)

So...

When do you actually use an AST?

Ever had to change every file in your codebase?

Ever had to generate boilerplate?

Ever had to extract API documentation?

You can use an AST for that!

(and probably should)

ASTs help us with...

They're everywhere

They're powerful

They're useful

Once you know where to find them

Thanks!

Me: Craig

Twitter: @phenomnominal

Code: github.com/phenomnomnominal/parseltongue

Slides: slides.com/craigspence/fantastic-asts-and-where-to-find-them-jsconf