►
From YouTube: What the AST? - Dominik Kundel, Twilio
Description
No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).
A
Hi
there
and
thank
you
for
joining
my
talk.
What
the
ast
I
like
starting
my
talks
off
with
a
question
and
I
know:
raising
raising
your
hand
in
this
virtual
talk
is
really
difficult,
but
I
still
want
you
to
either
participate
in
the
chat,
or
at
least
you
know,
think
about
this
question.
Have
you
ever
used
one
of
these
tools?
Angular
webpack
is
land
prettier
parcel
view
typescript
Babel,
because
in
the
next
30
minutes,
I
want
to
talk
to
you
about
what
these
tools
have
in
common.
A
What
they're,
using
under
the
hood
why
these
concepts
are
useful
for
you
to
know,
even
if
you're
not
trying
to
build
the
next
yes
Lynde
web
pack
or
similar
tool,
and
also
why
it's
just
generally
useful
to
have
this
in
your
tool
belt
before
we
started
I
want
to
briefly
introduce
myself.
My
name
is
Dominic
I
work
as
a
developer,
evangelist
at
a
company
called
Twilio.
A
If
you
haven't
heard
of
Twilio
we're
cloud
communications
platform,
meaning
we
have
api's
and
SDKs
to
allow
you
to
integrate
different
means
of
communication
such
as
voice
video,
SMS,
email,
two-factor,
authentication
or
similar
into
your
applications.
My
pronouns
are
he
and
him,
and
you
can
find
me
anywhere
on
the
internet
under
D
kondal,
so
feel
free
to
send
me
an
email
or
DM
on
Twitter,
so
I
want
you
to
think
about
how
do
we
modify
and
find
code
on
a
regular
basis?
A
Typically,
the
way
at
least
it
works
for
me,
if
I'm
trying
to
find
something
in
my
project
and
I'm
trying
to
batch
fix,
it
is
the
first
thing
I'm
gonna
try
is
command
or
control
F
that
works
pretty
well.
If
you're
trying
to
find
like
want
a
variable
once
the
moment
you're
trying
to
use
it
more
often
and
you're
trying
to
replace
it
in
a
bunch
of
files,
it
gets.
A
The
first
thing
here
is:
we
have
some
input
in
this
case,
for
example,
new
symbol,
1
and
the
compiler
will
perform
what
is
called
a
lexical
analysis
on
that.
That
means
it
will
turn
that
text
into
a
set
of
tokens.
So
a
list
of
tokens
representing
the
different
parts
of
the
code
that
we
have.
You
can
imagine
this
being
the
equivalent
of
taking
a
text
written
in
English
and
then
turning
it
into
a
list
of
words
and
punctuation,
and
then
the
next
step
is
to
perform
syntax
analysis
on
this.
A
So
that
means
we're
taking
the
tokens
that
we
already
have
and
creating
some
structure
around
them
in
the
shape
of
an
ast,
so
an
abstract
syntax
tree.
That
represents
how
the
program
is
actually
structured.
So
imagine
this
as
if
you're
turning
words
and
punctuation
two
sentences
representing
as
part
of
paragraphs
and
those
sentences
contain
information
of
what
what
part
is
the
subject?
What
part
is
a
verb?
A
You
know
in
giving
all
of
that
detailed
information,
rather
than
just
having
a
list
of
words
and
punctuation,
and
then
you
can
perform
actions
on
those
ast
s,
but
then
the
last
step
is
cogeneration,
so
that
means
we're
taking
the
ast
and
we're
turning
that
into
some
output.
So
this
can
be
machine
code.
This
can
be
another
programming
language,
but
generally
we're
turning
it
into
some
sort
of
output.
A
A
Don't
want
to
use
the
classic
hello
world
here
since
then,
I'm
gonna
use
a
function
called
yes
panda,
because
I
love
pandas,
and
it
receives
one
argument,
in
this
case
a
string
with
a
panda
emoji
in
it,
and
we
want
to
turn
this
into
tokens.
So
you
could
build
your
own
tokenizer,
but
there's
plenty
of
tokenizer
is
especially
for
javascript
that
you
can
use
in
my
case,
I'm,
going
to
use
this
Prima
and
I'm
gonna
call
tokenize
on
that,
and
that
will
give
us
a
list
of
tokens.
A
So
that
will
look
roughly
like
this
I
dropped
a
couple
of
pieces
of
information
here
to
fit
it
on
the
slide
like
what
are
the
line
numbers
and-
and
things
like
that.
But
roughly
this
is
what
you
would
get
for
tokens.
One
is
an
identifier,
is
panda
to
punctuate,
errs
and
opening
and
closing
parentheses,
and
in
between
it
is
a
string
that
has
the
string
value
of
a
panda.
A
Now
this
information,
if
you've
ever
written
a
code,
editor
theme
or
generally
like
a
syntax,
highlighting
theme.
You
might
be
familiar
with
these
words
of
identifiers,
punctuate
or
string,
because
that's
typically,
what
is
being
used
in
real
real
practical
examples
such
as
syntax
highlighting
so
most
code.
Editors
use
tokenization
at
some
point
to
do
some
syntax,
highlighting
some
do
additional
work
on
top
of
that
for
more
advanced
highlighting,
but
under
the
hood
at
least
the
basic
syntax,
highlighting
often
done
by
tokenization.
A
The
token
formats
might
differ,
though,
so,
for
example,
vias
code
did
some
extra
work
to
do
very
to
do
employment
and
performance
improvements
on
these
syntax,
highlighting
and
tokenization
part
of
things,
and
if
you
want
to
read
about
that,
you
can
check
out
this
blog
post,
but
once
we
have
those
tokens,
the
next
step
would
be
to
turn
these
tokens
into
an
abstract
syntax
tree.
So
that
is
the
syntax
parsing
side
of
things.
A
So
we
take
this
list
of
tokens
or
list
of
objects
and
we
turn
them
into
a
nested
object
that
represents
or
of
a
tree
of
how
our
program
is
structured.
So
at
the
top
we
have
a
program,
and
then
that
has
a
body
which
in
this
case
only
as
one
expression
statement
which
has
a
call
expression
in
it.
That
consists
out
of
a
collie,
which
is
what
is
being
called
and
a
set
of
arguments.
A
In
this
case,
only
one
argument,
which
is
a
literal
of
append
emoji
the
format
that
you've
seen
there
is
called
es
tree.
It's
a
spec
that
was
derived
of
the
ast
format
that
Mozilla
uses
internally
in
their
SpiderMonkey
engine,
but
it
has
been
altered
and
extended
from
there.
So,
if
you're,
using
tools
like
esprima
or
babel,
they
use
derivatives
offset
spec,
but
with
some
additions
that
help
them
with
their
functionality
and
goals
and
also
Facebook
and
others
have
extended.
This
to
add
functionality
like
JSX
and
others
into
the
language.
A
To
give
you
some
practical
examples
of
why
you
would
want
to
have
an
ast
in
the
first
place
is
to
visit
the
different
nodes
to
do
things
such
as
linting.
So
if
you,
if
you
build
a
linter
or
use
a
linter
such
as
es
lin,
tears,
land
or
jazz
hint,
you
would
want
to
do
analysis,
often
not
just
purely
on
the
format
of
your
code.
A
But
you
want
more
detailed
rules
that
could,
for
example,
be
around
how
you
name
your
classes
and
rather
than
having
to
look
through
an
entire
array
to
try
to
find
the
class
keyword
somewhere
and
then
see
what's
following.
Instead,
you
could
navigate
a
tree
and
look
or
class
decorators
class
declarations
and
then
see
how
they
fit
into
the
grander
scheme.
So
you
can
do
much
more
advanced
linting.
A
Another
example
that
sort
of
fits
into
that
sound
same
realm
is
code
analysis.
So,
for
example,
angular
uses
this
to
build
a
language
service
that
you
can
use
in
your
code,
editor
to
get
better
autocomplete
the
way
they're
doing
that
is
by
returning
their
HTML
templates
into
a
STS
and
then
being
able
to
tell
you
based
on
where
your
cursor
is
and
how
your
template
is
connected
to
your
to
your
component.
What
things
are
available
and
improve
your
autocomplete
there?
A
So
let's
look
at
our
ast
again
and
in
this
case
we
can
actually
do
an
optimization
here.
That
would
be
a
good
use
for
modifying
an
ast.
So
if
we
look
at
the
expression
statement,
we
have
one
expression
in
it.
It's
a
call
expression
and
really
we
can
see
that
if
you
call
is
Panda
and
you
give
it,
the
value
of
a
pen,
gyah
will
always
be
true.
A
So
we
can
actually
do
an
improvement
here
and
take
out
that
expression
and
replace
it
with
just
a
literal
that
has
the
value
true
in
it
and
therefore
significantly
shrinking
our
code.
And
if
you
would
do
that
same
execution
across
your
entire
code
base,
you
know
you
would
eliminate
a
bunch
of
code,
so
there's
a
bunch
of
practical
examples,
but
the
one
that
might
be
most
most
familiar
to
you.
A
But
you
can
also
do
things
like
extending
a
language
so,
as
I
said,
jazz
X.
Does
this
we're
really
we're
just
having
a
ast
that
has
these
JS
x
tags
in
it?
And
then
we
modify
it
to
turn
those
jazz
x
tags
into
function?
Calls
because
that's
really
how
jazz
X
is
implemented
is
all
of
these
tags
are
being
turned
into
function,
calls
to
things
like
react,
upgrade
element
or
pre
x-h
function
and
then
the
third
example
is
language
transpiling.
A
So
that
means
we're
taking
a
language
such
as
typescript
and
we're
removing
all
of
the
typescript
specific
syntax.
So
we
can
turn
it
into
some
JavaScript
code
that
we
can
then
execute
now.
Obviously,
typescript
does
a
bunch
of
other
things
as
well,
but
that's,
for
example,
how
the
babel
transform
for
typescript
works,
the
one
that
I
thought
was
really
cool
is
code
coverage.
A
If
you've
used
code
coverage
in
the
past,
such
as
Istanbul,
for
example,
you
might
have
wondered
how
it
actually
works
under
the
hood,
how
it
plugs
into
things
and
the
wait
does
it
we
can
actually
look
under
the
hood
and
that
we
can
do
that
using
the
NYC
CLI
from
histone
bull
by
calling
NYC
instrument
giving
it
of
giving
it
a
file
and
then
giving
it
an
output
directory
and
looking
at
the
output.
So
let's
say
we
have
a
some
jazz
file
that
we
want
a
unit
test.
A
We
want
to
see
how
good
our
test
coverage
is.
We
have
this
function
in.
It
called
some
that
takes
two
parameters
and
adds
it
up,
and
then
we
export
that
function.
Now
if
we
run
and
watch
the
instrument
on
this,
this
is
the
code
that
we
get
out
of
it.
We
have
a
variable
declaration
at
the
top
that
we'll
look
at
in
a
second
and
then
we
have
three
edit
counter
incrementer
x'
added
to
it.
A
So
we
have
two
that
end
with
s
0
and
s
1
and
1,
with
F
0
and
those
are
function
and
statement
counters,
and
basically
that
means,
if
we're
running
our
unit
tests
against
this
file.
Instead
we're
able
to
actually
tell
how
often
functions
have
been
called
how
often
statements
have
been
called,
because
we
can
then
look
into
that
object,
that
is
at
the
top
and
there's
a
coverage.
A
Data
object
as
part
of
this
that
contains
all
of
these
counters
for
each
of
those
segments
for
each
of
these
statements,
functions
and
branches,
and
also
it
contains
a
statement
map
a
function
map
in
the
branch
map.
So
that
later
we
can
look
at
what
are
the
statements,
functions
and
branches
that
have
zero
counters
and
then
inform
the
user,
exactly
which
ones
haven't
been
called
and
where
they
are.
A
A
Another
example
is
running
other
languages
and
browsers
so
I'm,
not
talking
about
web
assembly
here,
but
instead
I'm
talking
about
a
pretty
concrete
example
of
code
combat.
So
I
worked
on
code
combat
a
couple
of
years
ago,
as
Google
Summer
of
Code,
and
one
thing
they
do
is
they
aim
at
teaching
kids
how
to
code
using
different
programming
languages
such
as
Python
or
JavaScript,
or
coffee
script
or
Lua,
and
they
don't.
They
execute
all
of
the
code
inside
the
browser,
but
they're
doing
that
without
shipping,
a
an
entire
Python
runtime
or
an
entire
CoffeeScript
runtime.
A
Instead,
they
use
a
tool
called
Esper
that
they
built
that
takes
some
Python
code,
for
example,
on
the
left
and
converts
that
into
an
ast
that
looks
similar
to
the
JavaScript
one
and
then
modify
that
that
ast
to
fix
function,
calls
that
might
be
different
in
JavaScript.
So,
for
example,
we
have
a
print
function,
call
here
which
the
equivalent
will
be
constant
locks
on
the
right
side
in
the
ast.
A
You
can
actually
see
there's
a
call
expression
to
console.log,
and
it
also
gives
you
some
additional
information
so
that
they
can
do
frame
execution
and
kind
of
like
step
through
things
without
having
to
teach
kids
how
a
debugger
works,
but
all
of
that
is
powered
by
AST.
Isn't
that
super
powerful?
It's
not
performant
necessarily
you're.
Not
you
wouldn't
want
to
do
this
to
execute
production
code
in
the
browser,
but
I
still
think
it's
a
very
cool
application
once
you've
modified
your
ast.
A
The
last
step
is
rendering
your
ast,
so
that
means
we're
turning
it
into
output,
so
we
have,
for
example,
our
optimized
ast
here
now,
and
we
want
to
turn
that
into
some
code.
So
we'll
use
a
library
such
as
yes,
coach,
and
that
knows
how
to
turn
an
ast
into
some
code,
and
then
we
just
get
the
statement.
True,
because
that's
how
we
optimized
it
there's
some
really
practical
examples
that
I
personally
love
using
one
of
them
is
called
prettier.
A
If
you
haven't
use
prettier,
it's
a
code,
formatting
tool,
if
you've
used
prettier,
you
might
have
been
as
excited
about
as
I
am
and
the
reason
why
it
works
so
well
is
because
it
takes
your
code,
converts
it
into
an
ast
and
then
reprints
it
based
on
its
own
instructions,
which
means
that
it
doesn't
really
care
in
which
way.
You
wrote
your
initial
code
or
it
doesn't
screw
up
your
code
by
writing
it
in
the
wrong.
Whay
doesn't
just
randomly
insert
new
lines.
A
Instead,
it
fully
understands
your
code
and
just
prints
it
based
on
the
rules
you
gave
it,
and
so
that's
really.
Cool
and
minification
works
in
a
very
similar
way,
like
it's
just
taking
an
ast,
and
they
might
do
some
modifications
on
the
aste
to
change,
variable
names
or
similar
things.
But
then
it
just
prints
it
out
into
a
minified
way
rather
than
just
removing
white
spaces,
because
that
could
cause
trouble
in
some
situations.
A
But
let's
say
you're
not
planning
to
build
a
next
web
pack
or
bat
babel
or
similar.
Why
would
you
care
about
this?
One
of
the
good
examples
that
I
think
we
can
know
we
might
all
be
able
to
leverage
our
babel
transform
plug-ins,
you
don't
necessarily
have
to
build
one
for
a
new,
cutting-edge
feature.
Those
can
be
useful
for
just
improving
your
own
day
to
day
to
day
developer
experience
without
having
to
use,
grab
or
said
and
without
having
to
use
regular
expressions,
while
at
least
less
regular
expressions.
A
These
tools
can
be
hugely
useful
for
you
and
so
I
figured
rather
than
talking
more
about
this.
We
would
actually
build
a
plug-in
together.
So
this
is
a
website
called
ast
Explorer
that
I
personally
love
using
to
understand
highest
ease,
work
and
play
around
with
them.
So,
let's
clean
up
some
things
here,
the
top
left
corner
is
a
where
we
put
our
input
code.
The
bottom
right
corner
is
where
our
output
code
is.
The
top
right
is
where
we
see
the
ast
and
then
on
the
bottom
left.
A
We
can
change
a
bill
to
our
transform
plugin.
We
chose
here
already
the
baby
lawn
7
parser,
that's
the
one
that
babel
uses
and
we
have
babel
v7
here
as
the
transform
you
can
go,
for
example,
choose
JS
code
shift
here,
and
so,
if
you're,
a
JavaScript
developer
like
me,
chances
are
high.
You
use
console.log,
you
know
debug
your
things,
but
I
was
thinking
the
other
day
of
like
console.log
is
sort
of
like
the
general
debugging
way,
then
I
would
say.
Breakpoints
is
probably
alerting.
So
let's
use
this
alert
statement
here.
A
Sorry
for
that,
and
what
we
want
to
do
is
we
want
to
make
sure
we're
not
actually
shipping
any
alert
statements
to
our
customers,
because
why
they
might
be
useful
for
us
during
development.
We
definitely
don't
want
them
to
break
the
experience
for
customers,
so
we're
gonna
build
a
babel
plugin
that
will
remove
or
change
all
alert
statements
to
console
errors,
so
we
don't
have
to
worry
about
them
and
they
just
pop
up
in
the
logs.
A
The
way
we
do
this
is
by
defining
a
visitor
here,
so
visitors
are
different
functions
based
on
different
types
of
notes
that
babel
might
encounter
so
that
we
can
tell
it
what
to
do
during
those.
So
if
we
actually
click
on
the
alert
here,
we
can
see
it's
an
identifier,
but
it's
wrapped
in
a
call
expression,
and
this
call
expression
is
really
what
we're
interested
in
and
so
we're
gonna
create.
A
visitor
here
called
call
expression
and
it's
a
function
that
receives
a
path
every
time
it
was
encountered.
A
That's
what
we
get,
and
so
the
first
thing
we
want
to
do
here
is:
let's
just
rename
name
this
so
path
that
node
and
then,
if
we
go
here,
the
collie
is
what
we
want
to
change.
So
we're
gonna
create
a
new
identifier
here.
I'm
just
gonna
call
this
console
to
err,
and
now
we
can
see
on
the
right
here
that
we
have
consul
air
apply
to
both
of
these
not
just
cut
not
just
to
alert,
and
that
means
we
need
to
first
filter
what
we're
actually
doing
so.
A
I'm
gonna,
actually
filter
for
I'm
gonna
do
serve
like
what
is
called
an
early
exit,
so
I'm
gonna
check.
If
we
have
an
identifier
as
part
of
the
collie
and
has
a
name
of
alert
and
because
I
said
we're
gonna
do
an
early
accent
actually
want
to
return.
If
this
is
not
the
case,
so
if
we
don't
have
an
identifier
with
the
alert
statement,
I
forgot
a
closing
parenthesis
here.
Then
we
want
to
change
it
to
console
errors.
A
So
now
you
can
see
console
log
state,
but
console
error
didn't
learn,
didn't
so
change
it
to
your
console
error
and
this
works,
even
if
we
have
this
inside
of
function,
for
example.
So
if
we
do
alert
here,
we
can
see
it's
still
adjusting
that
so
that's
great,
but
and
similarly
you
know
if
we
would
break
this
up
over
multiple
lines.
This
is
still
working.
We
didn't
have
to
work
around.
You
know
any
formatting
things
like
you
would
have
to
when
you
write
a
regular
expression,
for
example.
A
Now
the
problem,
though,
comes
when
we
do
things
such
as,
for
example,
redefining
a
local
function
here.
That
just
throws
an
error,
for
example,
or
let's
do
return
alert
so
this
this
is
just
a
local
function
that
we
defined,
meaning
that
this
alert
here
is
actually
externally
actually
right.
We
want
to
keep
this
and
not
replace
this
with
console
error,
so
the
cool
thing
with
tools
like
babel
and
others
of
our
AST
part
is.
We
have
much
wonder
standing
of
the
code.
A
This
will
be
really
hard
to
do
with
just
regular
expressions
and
token
tokenization,
for
example,
but
in
the
case
of
babel
we
have
access
to
the
scope,
and
that
means
we
can
check
for
bindings,
which
means
is
there
a
binding
for
the
word
here
and
if
there
is,
we
just
want
to
return.
So
that
means
the
alert
inside
this
run
function
is
never
actually
changed.
While
the
global
one
is
still
being
changed,
we
can
take
this
one
step
further.
A
I,
don't
like
the
fact
that
you
know
we
still
have
an
alert
here
and
that
could
cause
some
confusion
in
the
output.
So
what
we're
going
to
do?
Is
we
actually
gonna
rename
inside
the
scope,
we're
going
to
rename
alert
and
what
this
is
going
to
do?
Is
it's
going
to
change
alert
to
a
unique
name
in
this
case
that
still
is
as
close
to
alert
as
possible.
A
So
it
starts
by
putting
an
underscore
there,
but
if
we
would,
for
example,
define
a
variable
here
now
called
alert
underscore
alert,
it
would
change
it
to
alert
two
and
then.
Similarly,
if
we
would
have
another
one
here,
alert
two,
it
would
change
it
to
alert
three
and
similar.
It
will
always
try
to
avoid
a
clash
in
the
in
the
respective
scope
in
which
we
rename
this.
So
that's
super
useful
because
we
don't
have
to
worry
about
creating
clashing
variable
names
as
we're
changing
our
code
here.
A
A
If
you
want
to
learn
all
of
the
different
things
you
can
do
with
it,
I
would
recommend
you
to
check
out
the
babel
plugin
handbook,
because
as
much
as
it
hasn't
been
edited
for
a
while
there's
a
lot
of
really
useful
information
in
there
in
terms
of
what
you
can
do,
how
you
can
replace
you
know
one
node
with
multiple
nodes,
how
you
can
replace
it
with
a
source
string.
If
you
don't
want
to
build
an
entire
entire
tree
just
by
using
additional
notes
and
generating
those.
A
So
there's
a
lot
of
things
you
can
do
and
I
recommend
you
to
check
out
that
handbook.
If
you're
interested
in
exploring
more
things,
you
can
do
with
it
all
right,
let's
get
back
into
the
slides
to
wrap
things
up.
So
in
summary,
there's
a
few
things.
I
want
you
to
take
away
one
you
already
use
tokens
and
a
sts
daily
they're
in
all
of
the
tools.
Basically,
then
make
your
life
easier.
A
A
That
also
makes
se
is
easier
to
manipulate,
because
you
do
not
have
to
worry
about
what
parts
are
code
syntax
and
what
parts
are
actual
statements
and
it
makes
it
safer
for
Colt
alterations
because
you
can
just
take
out
a
node
and
put
a
new
node
in
rather
than
having
to
see
if
you're,
removing
the
right
amount
of
elements
from
an
array
or
removing
the
right
part
of
a
string.
Yes
tree
is
there
for
interoperability.
A
A
You
know
put
some
code
in
try
to
figure
out
what
you're
trying
to
change
click
on
things,
because
it
will
highlight
the
different
parts
of
the
ast
on
play
around
with
different
parsers
and
see
what
kind
of
information
they
give.
You
there's
a
lot
of
fun
things
to
do
and
then
read
the
Babel
plug-in
handbook,
even
if
you're
not
planning
to
build
your
own
Babel
plugin.
A
If
you
want
to
learn
more
about
a
STS,
it's
a
it's
a
great
thing
to
to
read
the
nice
thing
is
also
all
of
the
things
I
showed
you
our
open
source,
which
means
that
now
that
you
know
what
ast
is,
are
you
can
look
for
them
in
the
different
tools
that
you're,
using
or
different
code
bases
to
see
what's
actually
happening
on?
The
other
I
also
wrote
a
blog
post
about
this
topic.
A
If
you
want
to
rather
read
up
on
this
in
in
the
shape
of
a
blog
post,
it
covers
a
lot
of
the
same
things
that
I
covered
in
this
talk,
but
if
you
prefer
reading
it,
that's
a
good
format
and
with
that,
if
you
want
to
check
out
the
slides,
I
uploaded
them
on
the
on
this
URL
at
the
left
and
I'll
also
tweet
about
them
later.
If
you
have
any
questions,
feel
free
to
reach
out
to
me,
as
I
said
you
can.