[Music]
so hey guys I hope you are having a
great time in Singapore I love Singapore
personally are there any people from
Israel by the way can you raise their
hand okay I guess not so first of all
let me introduce myself my name is a tan
I come from Israel at the moment I live
in Taipei
I'm a full-stack JavaScript engineer I
do that full-time and I also do that for
fun this is why I give a talk right now
and when it comes to programming I
really like to dive deeply into stuff
which are trivial so trivial that it's
part of our daily routine and we just
overlook it and because it's something
so trivial then I'm gonna dive deeply
into it and naturally it's gonna be a
lot of a level talk so it's not gonna
turn you necessarily into better react
or angular developers but at the end of
the day you'll be able to solve problems
that a lot of programmers don't know how
to solve and just a new world of
possibilities will open up to you and
the subject of the day is äôt compilers
ahead of time so I assume that you're
pretty much familiar with the concept
okay
example compilers compilers for C or C++
where you basically take a code string
and you get it from one format into
native machine code or in the case of
JavaScript where you take yes next and
you compile it two years five now why is
it such a trivial topic to prove my
point I have few questions if it's true
for you please raise your hand who here
uses Babel to compile JavaScript
applications please raise your hand okay
a lot of people who here uses typescript
raise your hand okay again a lot of
people now listen carefully this is
likely
different who here uses es5 to write
Java see applications please raise your
hand
get out you know No
okay so we see that there's a common
pattern here right we all use Babel and
typescript and all these sort of
compilers but no one ever stopped and
wonder how does it actually work and
there's a lot of advantages to that
because once you know how it actually
works then you would know how to run
some processing before you actually go
to the interpreter rather than race
wasting some runtime processing power so
I'm gonna go through very trivial stuff
and later on I'm gonna dive deeply into
that so just bear with me yeah so why
exactly do we use ahead of time
compilers what are the advantages first
of all you can use it to optimize code
so let's say that we have parts of code
that we don't actually use such as tree
shaking where we import modules and we
end up not using these modules therefore
we can reduce that part of goat and
reduce bundle size or for example if we
have variable assignments of variables
that we don't actually use then we can
just delete that when we compile the
code and therefore save some memory
locations and one night what night why
not take it a step further using linters
so basically what the linter does it
says hey man listen there's something
wrong here okay you import that module
and you don't use it or maybe there's a
standard of code that we wanted to just
live up to our own expectations so let's
say we want to use conditions in a
specific way maybe closures in specific
places maybe we want to use to force use
constant variables so before we actually
run the optimization itself we can
basically make the code look a lot
better before we push it into our get
host also it enables backward
compatibility
now we all
use the latest features of JavaScript
and if I'll just open chrome dev tools
right now and I'll try to use syntax
such as arrow functions async/await
and so on it will work but we all know
that unfortunately there are internet
explorer 11 out there okay users that
use this old browser and we need to
enable backward compatibility because we
don't know what type of browser what
version of the browser the user is gonna
run therefore we need to ensure that we
use the least amount of features
possible when it comes to Eggman script
also when someone suggests a new feature
for the set of specifications for Eggman
script it takes time before it actually
gets accepted into the language because
the Committee needs to look at it
afterwards the community needs to also
see how it fits within the echo system
it needs to go through stages 0 1 2 3
and then all the browser's need they
need to implement that natively within
C++ and they all need to be aligned with
one another this process takes time
using an external compiler this is
relatively easy to just plug in another
feature and then basically there's a
layer on top which is common for all
browsers so it's very easy especially in
the case of Babel where the compiler is
written in a high-level languages such
as JavaScript and we also have the
opportunity to test the new feature and
see if it actually fits one final reason
is that we can use costume syntax also
known as language extensions such as
typescript where we basically have type
safety okay and we can see if the code
actually behaves the way we want or we
can use JSX
which is used vastly to write react
applications in a better way so
obviously there are advantages to the
compilers wait okay so there aren't
gonna be many slides the
there's gonna be this slide and another
one and that's it it's mostly gonna be
demonstration I hope I can get it right
because I'm not used to this setup like
they said this is like I mean I'm used
to Linux and this is like another world
for me anyways what are the stages of
the compilation everything that I'm
gonna mention it's um it is true for all
IOT compilers I believe although I want
to be more specific to Babel because
it's very popular within the ecosystem
it's also very easy to write plugins
into Babel but yeah everything is true
for all a ot compilers out there so
first stage first of all we take as an
input a code string and then we parse it
parsing what it means is that we put it
into a JSON ok this JSON is basically a
tree and the tree is made out of nodes
each and every node with that in that
tree represent a different feature
within the syntax this tree is called
ast abstract syntax tree because it
represents the syntax now comes the
second stage once we have the AST we
take it as an input and we generate code
out of it in a different format ok it's
very easy to do so we basically take a
specific node and then we generate the
magic code string to that specific node
in the case of Babel it's it's slightly
different but because Babel is it's not
exactly a compiler but it works exactly
the same way it's more like a
transformer so even though you take an
ast the generated code should be exactly
the same now I put a lot of information
out there and stuff like that the best
way to explain something is by
demonstrating so this is exactly what
I'm gonna do now so Lance
ok so let's focus on the ASD first how
does it the ASD looks like exactly so
there's a website out there it's called
a is the Explorer this one
and let's okay
and we have two windows in here okay in
the left window what we have is the text
editor where we can type code in the
right we have an object the Java sweet
object as I said the ast that represents
the code so what happens if I type just
a very generic code nothing special
about it so we see on the right that the
view got updated okay and on the right
this actually this is the ASD that
represents the code now what's nice
about this tool is not is that not only
it shows us the ast but it's very easy
to highlight the code and match it with
a correlated node so let's highlight
something on the left ok wait it doesn't
use the right parser okay I also explain
what it is so once I highlight something
on the left it will also be highlighted
on the right and vice versa if I hover
over a specific node type it will be
highlighted on the left so it's very
easy to see what represents the code and
if we'll take a specific node as an
example let's highlight number one over
there and we'll look at the node we'll
see that the type name actually matches
the description okay this is called a
numeric literal because literally this
is a number with the value 1 so this is
basically an ast and you see their nodes
which are nested with with one another
and it all starts from the root so this
principle is true for all syntax and
languages and a tree doesn't need to
look a certain way they can there can be
many parsers so baby launch seven is
what Babel used to use under the hood
now they read
they made it part of maples mono repo
and it they call it just Babel parser
but there are other parsers such as a
corn esprima
which played a very important role in in
when it comes to parsers in JavaScript
flow and typescript in utterly
JavaScript there can be many languages
there can be CSS graph QL HTML
handlebars services these principles
apply to all syntax and languages okay
now how exactly does it look within a
node.js application how exactly do I
take code and parse it into an AST so
because I'm here right now I can just
say anything and you would believe me
but I don't want that okay everything
that I say I want to back it up with
proofs so for that we will go to Babel
documentation website okay okay and in
the search bar there's a library called
Babel parser I hope you can see that
yeah and the API is fairly simple we
just import the parse function and we
provide it with a code string and the
output should be an ast now it accepts
all different kind of options but there
there is I don't want to go through it
because I want to keep things simple but
however there is a specific option that
would like to focus on this is the
plugins option by default it will parse
only a limited set of features of nodes
but there are different nodes which are
not officially part of ACMA script nodes
which are in stage 0 1 2 or 3 so they
won't be parsed by default and for that
we need to say to the 3d parser
explicitly that it needs to parse them
so features that you're probably
familiar with such as a single radar big
in that we just stopped
class property is quite private class
properties and things that are quite
frankly not even familiar with and we
can also tell the parser to support no
types of language extensions okay so
like I mentioned earlier there are some
features which are not part of any
specification such as flow JSX
so under the hood this is how it happens
Babel officially supports it and also
typescript that's interesting this is
not what typescript uses typescript has
a dedicated parser and compiler
although babel also supports parsing
types with limited features of of it
it's still nice to have so now let's see
a demonstration in a node.js application
yeah so this is a very simple program
what I have here I import the parse
function and then I provide it with a
code string and then I parse it and the
output is an AST and what I do I print
to the console a string if I'd version
of the ast and the expected output
should simply be an ast now I'll run the
program right again this is an
environment I'm not really used to okay
so the output is is an ast this is just
a JSON JSON that is described describes
the code I'm not going to go through it
because this is very boring but I think
we got the principle once we saw because
of what we saw in is DX for now the
second stage once we have an ast we put
it back into code this stage is called
generating so I'll go to babbles
documentation website again and we will
look at the library called generator so
again very simple API we simply accept
an ast as the first argument the output
should be code and again I would like to
demonstrate that
quickly
okay good so in addition to what I did
earlier now I have the generate function
and once I import it I provided with the
generated ast and I print it to the
console and the output should be exactly
the same and let's run the program again
you see this is it's not exactly the
same it's slightly different because
there are semicolons white are
semicolons because the ast doesn't
contain information about these
semicolons it simply puts the code back
in the way it can and now I want to go
back to the slides by the way you see
that the output is exactly similar to
the input now when we look at the
traditional compiler the input and the
output should be different okay when it
when you look at C++ for example because
the output is in native machine code but
Babel is not exactly a compiler it's
like a transformer or a transpiler and
it works in a slightly different way but
soon I'll talk about it and we'll see
how from yes next it goes to es5 so back
to the slides i would like to add
another optional stage it comes between
stage 1 and stage 2
okay so stage 2 becomes stage 3 and why
this is like I do it like that this is
an optional stage because most compilers
sorry a compiler doesn't necessarily
need to have that stage in order to work
properly but this is a very powerful
stage because using that stage we can
actually apply pre-processing to the
code and run optimizations before we
actually address the interpreter and
this is by far the most complex stage
because this is API specific there's a
lot a lot of things to know about the
API and we'll soon see why so going back
to the code
now let's say that I would like to
transform the code with traditional
methods using only regular expression
this would be very complicated because a
code can have scopes and maybe there's a
a piece of code which is wrapped with
brackets or something like that which
makes the the transformation irrelevant
this is why we have the ASD the ASD
makes it easy on us to transform the
code so let's say that I would like
through transformation to change Const C
into Const B so how do I do that
what do I need to do is to address the
right node with the right property and
then change its value and once we put it
back into a code stream because the code
string the new code string is derived
from the ast then we should have a
transformed code so we copy that and we
go to ast export this is how I actually
work when I write Babel plugins oh I
want to transform code and I paste it ok
and then we see that it got updated on
the right now what I do I highlight the
code that I would like to transform and
then the corresponding node is being
highlighted on the right now what I do I
need to look for the path that
represents the node so I start from the
root and I try I write down the path so
it goes to program body position 0
declarations position 0 ID name let's
say that I wrote everything down in the
text editor and I have it right here
yes yeah so I changed the ASD I changed
the value C to B and therefore once I
put it back into code the expected
output should be the following you see
so I changed the code now there's a
problem with that approach because what
I did right now is to specific I want to
have like some sort of a generic pattern
that I can apply and it will be true for
any code string that I get as an input
something like regular expression okay
because a code can wear many shapes and
forms
this is way too specific so there's a
problem with that approach many
compilers they implement a mechanism and
they provided provide us with an API
which lets us transform the code in a
more generic way okay so using that API
what we do we basically walk through the
ast through each and every node in the
ast you can call it walk or run or
traverse essentially these verbs they
all represent the same thing and then we
apply transformation callbacks for each
and every node individually so if we
look at the ASD and we'll try to
demonstrate it what it does it goes - it
starts with the root it goes through the
the the root node it goes deeper to
program variable declaration and then
once it sees a transformation callback
then it goes to the callback applies the
logic and then it keeps walking through
the tree if we look at babel labels
documentation website there's a library
called babel Traverse
and Traverse does exactly what I said
it's the first argument it accepts an
ASD as the second argument it accepts an
object which is called a visitor because
this object visits the ASD as we walk
through it and this object contains
callbacks the names of the callbacks
represents the nodes that is it is going
to transform and as the first argument
it accepts an object that contains the
node and then we can actually do all our
changes on the node that we would like
to transform and we can also apply
conditions and logic to it it also
accepts more arguments I don't want to
get into that because I want to keep
things very simple once you understand
the core it's very easy to get deeper
and and investigate more about the
subject so let me show you another
demonstration of that
so in addition to what I had earlier now
I use the Traverse function to traverse
to the ast and I apply transformation
callbacks so if I have that input what I
would like to have whoop the expected
output should be something like that so
let's say that I change all the variable
assignments from whatever this is to be
everything should be B and the values
should all change to two an FN should
change to F and two so this is the
expected output so how do I do that I
use the right callback names with the
right visitor and then I change the
corresponding nodes again how do I know
how does the API looks like and what
notes to address
I go to ASD Explorer and then I
highlight the code the the parts of the
code that I would actually like to
transform and then I look at the node I
see what is the name of the node and I
see how the signature of the nodes of
the node looks like and this is how I
know how the API looks like now if I
will run the code the output should be
what I just wrote over there
you see and just to prove it to you that
this is a general pattern and it's not
just specific to that code I can add
another variable assignment over here
and this should change to be equals to
as well right this is nice now this is
how we transform code so the visitor
over here this is what a Babel plugin is
all about a plug-in is just a visitor
okay Babel wanted to make it easy on us
and they wanted to give us a way to
implement custom features using plugins
and so in order to do that what we need
to do is simply to write a visitor and
what we do we specify it in the Babel
r/c then it looks for the the right name
in the non modules and then it applies
the visitor once it walks to the ast
before it actually compiles it now let's
see an example plug-in so what I have
here is a program which the input is
exactly the same as we had earlier and
the plug-in is exactly what we had
earlier again a plug-in is a visitor it
accepts more options that will make it
easy on us to transform the code but
again I want to keep things very simple
because the visitor is the same and the
input is the same therefore the output
should be exactly the same as well so
I'm going to run the program again and
the output is exactly the same now how
exactly from that do we reach yes five
okay because so far it just it looks
like it remains to be is next so
yes five is simply a set of plugins that
transforms the code in a way that it
will from east next it will turn into es
five a set of plugins is also called a
preset this is what a preset is a preset
is simply a set of plugins so in order
to transform to es 5 what we do we load
a set of plugins using the Babel E&V
preset the env env preset what it does
it applies plugins based on the
environment that we would like to
transform to okay how does it know that
based on what's written on package.json
now I'm gonna apply this plug-in and
you'll see that we'll be transformed to
years five and let's make the input a
little bit more yes next
and we'll run the demo again and the
output is the s5 as you can see does so
this is how Babel works okay this is how
it works now what's the point of it okay
why is it such a powerful tool because
using that knowledge you can write
plugins yourself and enhance the user
experience as a programmer so I'll give
you example plugins that I wrote myself
you don't necessarily have to agree with
what they do maybe you don't like their
functionality but again just understand
the power behind that sort of
information
okay so first plug-in is a plug-in for
if you're familiar with the new react
hooks API in what I do I transform data
okay and the problem is that once I
enter the rendering phase each and every
time I would need to apply that logic or
here if I have anonymous call back each
time and enter the rendering phase I
would need to initialize that callback
so what I need to do is to cache the
result using your use call back or use
me-mow so with that plug-in you can
automatically apply use mimo with the
right arguments you just type it
normally as you would and then it
optimizes the code for you ahead of time
or it also does things like creating
anonymous components where it caches the
callback results and you don't need to
put used callback and therefore save
some errors second and final plug-in
that I wrote something for style
components rather than creating a
dedicated component per each component
that you would like to encapsulate its
style you can use the single stylesheet
component and use underscore to
encapsulate private class names
and what the plugin will do it will
prefix it automatically therefore
encapsulate the styles so that was
basically it
I hope you liked it there isn't much
information about it online
documentation is very very poor but I
did write few articles about it and I'm
also gonna upload a video about it and
also be sure to use se explore and babel
dogs if you have any further questions
feel free to address me later on in the
break and thank you