[Music]
hello everyone thanks for having me here
so my name is villian I'm Brazilian and
Mozilla tech speaker and I work for eBay
I like to play video games
I'm big monster hunter for fun so if
wanna talk about Monster Hunter sing
racy games or football please reach me
out of this talk before I start my
presentation just a small disclaimer all
the proposal wouldn't show here are
under construction the main intention
here is to give you a sneak peek about
the future of JavaScript and try to help
you to understand the use case and the
pros accounts and of all of these
features and show there are mazing
amazing work that the ct-9 community is
doing to improve the language we love
some of some of these feature may or may
not be present on JavaScript if you like
on of this proposal if you have some
concern if you want to express your your
support with some of these proposals
please use this link below and open
issue put a star and getting getting
engaged so the agenda for today
we are talk about parent matching
pipeline operator binary AST and a gives
an opinion so whenever you see a red
border and the slide is just my opinion
if you disagree just ignore or talk to
me afterwards that said
[Music]
so to give up a quick background
motivation of the first feature I want
to talk about a bit more about a
condition on JavaScript nowadays we have
only three ways to do condition service
in JavaScript we need to will we have an
if-else statement switch statement and
for an ternary expression just to setup
common ground so everyone an expression
is something that evaluates down to an
value and in a statement is just
something that does something so an
if-else statement requires a condition
which evaluates to true fee or false e
value if the condition is true it
executes the adjacent block and if it's
not it tries to syke deathblow else
block if you have one but it can get
complicated let's check it out
for this section I'm using this a simple
function that just tries to return emoji
that tries to reflect the chimp the
current temperature as you can see here
this function it's just an if statement
that if it's true just return the demo G
but else statement it's again another if
statement so this is a way to
concatenate and chain one if statement
after the order it can get it can get
really tricky because I'm not even talk
about chain s the first statement right
for this kind of special special checks
when I have a lot of small lot of
options in the small code to react to
I think switch statements handy too so
let's check how switch statement works
so if statement is a it's good whenever
you have you need to react to a couple
of choice or you have a lot of a lot of
chunk of code to execute but when you
have a multiple choices and I just a
small a small set of comments I think
sweet statement could be a good choice
the switch statement works as the
following are given an expression inside
the parentheses and switch it tries to
match with each one of this case
statement and when it matches with the
first one it yep that's the starting
point or point of this block statement
and then that's why we have the break
statement just to finalize the the block
so come back to our initial example this
is how we would write something using
switch statement there are two things I
want to highlight here first I'm not
used using a break statement because
just by using a return I have my
function stopping at that at that line
so that's why I don't need to use break
and the second thing is people may not
get it but the case Staton accepts
expression as well so I can put instead
of just a constant that this is not most
used used use case there you just put a
constant and you put this expression in
switch so then I swap like I use the X
and the constant in switch and I use the
expression there
so the ternary operator become popular
recently because more for the functional
developer fan and who tried to write the
the code with as much expression as
possible it basically works as the
following given a condition if this if
this condition is true
it runs the first first block after the
question mark if it's not it's false it
runs what we have after column and since
ternary expression eternal is a
expression we can write that function
using error function and that tries to
make everything more concise
but then you have a code like this and I
don't know if you like I don't like but
there are a lot of people that like this
kind of code I'm not here to judge I'm
just showing you and as you can see we
have three ways to do conditions
nowadays in JavaScript but what's the
matter
the fourth one could we imagine what
could happen if you mix if statement
with switch statement and the power of
destruction destroy the structure in
pattern variant matching to understand
how parent match works I need to use a
try example to be able to explore the
parent matching statement so let's
suppose I have a list of shapes and I
need to log in detect all these circles
Red Square Square and big blob try goes
how could they do this nowadays with if
statement just to give a small context
this is the sample entry and this is one
of potential a solution for the problem
it's tricky because it can grow as the
requirements grows right you can keep
put if in there as more the more you
have further requirements and as this is
how we can do this using pattern
matching because of the time here I will
just explain the car
concepts and if you are interested in it
you can either check the documentation
on the github repository talk to me
afterwards this is the case statement
which defines the start of the pattern
matching block it receives only one
value as input and this value is called
case expression then we have the Wayne
cause which is divine some parts I will
just show two up then today again you
can have more in the spec in a
repository okay
in this first wing close we are we have
split into like the first part before
the error is the match pattern and the
second part is the Wayne cross body so
the match parent pattern will execute
the body whenever the shape of the
pattern match the shape effects
expression in this case every single
object that has the type of sorry circle
and then to achieve the second use a use
case I can just create another pattern
which is type square color red and and
this step you see a if statement in the
middle this is called match word it
means that even though the the match
match with the the object if the if
statement which is called match world
returns false it will not execute the
the block and the last case is whenever
we have a standalone variable it matched
everything so it's kind of the full
statement for for switch case but a bit
different checking our checking our
Nisha example this is how we should work
with parent matching
it's nice and if somehow we saw this
talk before this would be the part that
will start to complain why parent
matching this is a statement but then
the deceit or noncom he just changed
this so very much in all languages is an
expression and being a statement in
JavaScript will be tricky because we
wouldn't know we will it will be
difficult to decide whether to use
pattern matching or just a bunch of
if-else statement
but then if now that parent match is
just an expression it's become as a
powerful tool as a substitute for
Fortran and expression and now they are
trying to assess if we need to use if
you need to have the when at the
beginning of the wine clause or we just
need to use the let Const or var so to
give an example this is the way they're
discussing that the syntax may look like
do you like it you don't like it do you
have a better idea again go to the
repository and calm down okay before
introduce the next proposal a last check
whole function composition what is
function composition how it works in
JavaScript nowadays so function
compositions are Mary mark my
mathematical concept that allows you to
combine multiple functions to create a
new function so to help you to get the
picture let's cook a bento I came up
with this example because it's easy to
easier to reason about food and I like
to use emoji so this is just a function
that creates a bento following sake with
a sequential series of steps and where
the next steps needs to receive the
result from the previous steps so in
this case to achieve this I need to have
this intermediate intermediary variables
just to hold the data to pass to the
next function but I don't I don't want
to use this intermediate variable just
for this right but I can go I can go and
write this kind of
code which is not so easy to reason
about because the more we compose the
bigger is the invitation we have and the
way we read the code is different the
way the data flow because the data flow
for the from the innermost function to
the outermost function and we read this
data usually top down that left and
right right but I can use lodash flow
for achieving a similar effect and make
this more readable or use ram the pipe
for this or even create my custom
vanilla JavaScript function so wouldn't
be nice to have all of this capability
somehow incorporate to JavaScript
without having to rely on this external
library or create a custom homemade
functions so let's bring the second
javascript purpose of this talk pipeline
operator so pipeline operate is as
syntax sugar for creating streamlines
chain of function in a readable in a
functional manner
it's backward compatible and provides
alternative for extend building
prototypes so our initial example was
written and I like this snippet but
using pipeline operator this will look
more like this
and then this will be the sugar to this
it's nice right but what if one of my
chaining functions needs one extra
parameter let's suppose that the add
fish function needs to receive a second
parameter which is the type of fish I
want to add them to my two great men
agree how should we add this to the
pipeline chain so to achieve this we can
wrap this function with an arrow
function so then we received only the
result for the previous step and then
add this to the next step and note that
in the minimum propose the arrow
function has to be wrapped with
parentheses otherwise we will have a
syntax error but the bento is not only
about Nigri we need to put some stuff
we need right I know how to do a agree
it's kind of just like smash some rice
and put a fish on top of it but it's
simple but I just realized that I don't
know how to toss my bento and I need to
somehow delegate is to another function
just figure out that I don't know how to
semi the bento so I will delegate to
this to a nursing function that will
creating the assembly been tough for me
but how can I do this using pipeline
operator it's tricky right I could use a
weight to await this function but there
is a problem in it and note that the
line for is ambiguous in explaining why
now if the implementation add add mental
it's just as straightforward async
function I want to have this line this
sugar to the line six like this one but
if I have uncommon implementation which
behaves like a factory that returns me a
function that I need to call passing
that the then agree to create the bento
I would like to have this line BD sugar
to this line six the problem is in the
minimum proposal there is no guarantee
that I can that that a weight step could
be the sugar neither to the line fiber C
or three or five as you can see the
minimum proposal has some caveats that
me we need to address in order to have
this proposal progress in the tc39
proposal pipeline currently we have two
comparing proposal that tries to solve
this in different ways so a one I want
to explain first the smart pipeline
proposal so as you can see here this is
how I could solve this use this mattress
is my pipeline and you can see that we
have two styles there whenever you have
like a just a straightforward function
call you use the berry berry style and
we never need to do like X passing extra
parameters or user weights or
use this in a different way you can use
top Castillo there are some rules
whenever you need to use parentheses and
square brackets you have to use top
Castillo otherwise you will have a
single seatbacks error and the sharp is
you saw in the previous step this sharp
tokens is just a placeholder for the
result of the previous step and it's not
finally sharp it's subject to change
there discuss if the short talk is the
best way okay if I have a career donk
ssin you have to use popke style
otherwise again you have a syntax error
because you're using parenthesis this
proposal has extensive documentation for
further enhancements over this card
proposal again check that out and and
and see what you think about it and as a
counterpart we have the F sharp proposal
that tries to address the this ambiguity
of as a sinc function using one thing
called a wait step it's sink it's in
simpler but still we need to rap
whenever you need to use extra
parameters we need to wrap this function
with an arrow function and this too we
have the overhead of have these
parentheses there but this could be a
softening and enough food or proposal so
just to summarize it's a nice addition
to JavaScript to create an a
streamlining way of composite functions
the minimum proposed has two caveats the
smart pipe line traces of that using a
token and I have shark tries to solve
that using a wedge step which brings to
my rent my point is I really really like
prattle on operator and I'm gonna have
this shipped so JavaScript as soon as
possible so then I have a proposal here
I think F sharp proposes great and this
only extends the minimum proposed with
their weight step I think we should try
to ship this as much as possible then
afterwards we could have another
proposal try to others
they users you have the sharp token or
not nevertheless Bobo has a plugin for
using a smart pad planning proposal you
can check that out and use on your to
play a bit and then you have a formula
or opinion okay before are we going to
know or less proposal this presentation
I would like to mention some performance
tips have you ever heard about any of
this JavaScript performance chips here
do ever wonder why they are so important
for the perceived performance of your
application so 2010 this practice and
and understand why they are important
and why our next proposal is to relate
to that we need first to check how
javascript engine is generally words to
roughly explain how the JavaScript works
I would show this is I would use this
illustrates terrible phone an excellent
article from lenders money
regarding the extractor extractor
performance of JavaScript so whenever
the browser's of writing script tag they
try to download the text content of it
then it tries to parse this text content
and the result of this text content
would be abstract syntax tree or ast
which is 3 a tree representation of your
code and then after this ast is done the
browser starts to compile and create the
bytecode so this last part is regarding
a runtime opposite of optimizations that
the browser does to make the JavaScript
is the Kishin faster but this is not the
the the their targets of this
presentation okay to put in short
javascript lifestyle lifestyle could be
described generally as download parse
compilation run optimization the
optimization and the garbage collector
but here I want to focus on on the
parsing phase why
thinking about the the code startup in
JavaScript we can see that this is
crucial for the perceived performance of
an application so to make an application
start faster we end up doing those
things I mentioned the first slide of
this section but one thing doesn't
change the parsing time parsing the
initial compilation of JavaScript can
take up to 30 percent of the main thread
time and 1 megabytes of uncompressed
JavaScript can easily take a whole
section second to be parsing an average
mobile cell phone normally the browser
needs to parse the whole fire before I
start start compiling it and these are
the motivation for the last propose of
this talk binary AST the bunny HT
proposal proposes a new over the wire
format for the JavaScript based on the
binary representation of the custom ast
this could petition decrease this the
code startup of a large JavaScript
application and the browser that doesn't
support it just load the normal
javascript file so this is how it may
work first you need to write your
beautiful and delightful piece of
JavaScript then you compile or bundle it
user best flavor of bonder to spiral
like that provides such a feature and
this process will give not only the
media's file but it will give you as
well the binary representation of your
javascript file so the browsers that
support this formant could have the
parsing their mask Lee domestically
decreased since the majority of this
tile task is done in build time so the
chance of this proposal crater PLC on
spider monkey using the JavaScript chess
engine II and
and they try to compile some JavaScript
into binary st and measure the
performance and this is the follow of
the the following outcomes the result
was the following they try they they use
the static news feed from Facebook and
the size of the binary st was slightly
smaller than the original javascript the
timing for create DST from plain
JavaScript was between 500 800
milliseconds but the time for create the
binary st was twice as fast as before so
the POC showed some evidence that
shipping playing binary AST was a good
performance wing and the extra
annotation that the binary st is will
have can enable enable Derrick that
coordination without relying on plugins
such tree shaking and this anotation
Quinn could improve to the point that's
possible to enable string compilation
and if the performance of this
hypothetical string compilation was
close to the current it wasn't
webassembly string compilation we can
reach to the point that the compilation
time for your JavaScript using this
binary St could be faster than the data
load time so you can start your
application right after downloaded
amazing right so these are footer read
for you if we want to check that out
like there's plenty more information
these links these are my links if you
want to reach me out if you wanna follow
me on Twitter I don't do it so much but
we need we tight with some JavaScript
tips and that's it for me thank you