[Music]
hello when I star this hi everyone I'm
so excited to be here I hope you like my
talk is the last one we had everyone a
little bit tired but - today I'm going
to talk about the stencil which is this
open-source project we have been working
for the last few years and in general I
have a compiler can help you build
better applications and in general most
specifically based design systems so my
name is manu and i work as a server
engineer at ionic which is the the team
that builds ionic framework and a
stencil itself so we basically are a
company a tooling company at one - bill
to help web developers build
applications 100% based in western ology
so okay so before getting into much
detail I want to start with true history
is that 12 years ago JavaScript was not
what it is today it was a mess
different browsers have different
behavior Internet Explorer an escape and
JavaScript itself like the high level
API is that today we consider basic so
it was really hard to break complex
application on top of it then something
happened chicory appear and he came to
solve all the problems that JavaScript
had at that time it normalized the
behavior between browsers and provide a
higher set of API so that actually some
of them are part of the of the web today
like curry selector so but the biggest
innovation is that it allows Java Script
to grow as a language and allowed to to
be used for more complex application
that just like some simple formalization
and in fact my company bill Kodaka was
one was one of the first Design Systems
sorry drag and drop tools for UI
components and it was based in jQuery
Mobile so in order to instantiate and
create these components you will have to
use the imperative API of query so it
work but it was not great and some years
later
ungulate years appear and the geo versus
Java JavaScript
system was a little bit healthier so the
problem is that JavaScript had angularjs
had to solve was not the same ones it
doesn't only provide a higher layer of
higher-level ap is by the way of working
now we are organizing a set of good
defaults but today we know has a
framework so that help javascript to
grow even more and introduce the country
of directives that that was mine lying
to us and it was closer at our idea of
components so we were so excited about
it that we decided to port everything we
got into into this new system because it
was a big step forward and that's how
ionic was born then angular ideas the
angular team announced angular 2 and it
was going to be faster smaller mobile
first everything so angularjs worked so
great for us that we just decided to
make the investment and that's how ionic
2 ionic 3 bounce poor so even though the
name is the same it will require a
complete refactor and think about that
this is already the third time that we
have to go the same components and today
well the ecosystem is completely
different there are many frameworks and
alternatives and all of them are great
it just depends on your own preferences
your team your team your skills your
product or even was just easier for
hiring in a specific country so going
back to our mission as a company that we
want to help all the web developers not
the ones using a specific framework so
we start thinking about how we could
achieve that how we could if we have to
port this 100 components through every
popular framework of today and maybe
tomorrow and of course the answer is not
we know that we have to go through this
refactor many many times and we know
that that's not going to happen it's so
time consuming it's and we quickly
realize this is not going to be the
solution so we have to think about
something else and think like frameworks
are great for building final products
even if you say that reacts not a
framework it is they built a framework
on around it and that's not a bad thing
it's inclusive create react app a router
away of organized in a way of testing
a set of good defaults and that makes
sense because that allows you to focus
into building your product you don't
have to make these hundreds of micro
decisions every single time so so yeah
I'm not remain tabled in the wheel every
time so but at the same time they are
terrible for building reusable
components and you might say that this
is working for you today I mean it did
for us but at some point you might want
to use a different technology or the use
cases change or you just want to serve
your component with more people and not
only people will use the same framework
so the point of building reusable
components is to last in time right so
it's pretty much like investment you
make to allow you to build faster in the
future so you should build them on top
of future proof technology as the web
there's the web that doesn't change so
the solution of this problem of course
is where components but again this is
very important web component doesn't not
not solve any other problem yes
universal model of components and even
if you like it or not it will work so
I'm sorry for real kites sometimes but
this is will work you can go around it
so but I'd say it doesn't handle
anything else
so you still I believe that frameworks
policies forever they will not be
replaced in the same way that angular
and react and view does not replace the
API is the Web API of today we just live
together and of course we know in the
past that some API is web api they break
they remove sometimes but there is
something in common for APS that have a
full consensus across browsers as is
that they will be around forever so even
if yeah so think about the website you
build 20 years ago is still worse today
because the web can break I mean a
banker can break but the web can't so if
you will a web component with it it will
still work in the future framework so
around that idea of we want we don't
want to make the decision of the frame
where you have to use because you we
don't know your product we just build
the components
so I run that idea we create ironically
to the lightest ionic ionic for is based
on web components and this fourth
refactor is very different because this
time we didn't build on top of the
angularjs directives or the angular
components this time is built on top of
a standard way ap is they are just web
components that stay in the HTML so but
when before doing that we found that as
I said like web components a very little
label API that says it doesn't solve any
other thing so what happens when a sober
engineer has to deal with a you know
with a low-level API well they just
create an abstraction and that usually
comes with a new problem and the safe of
overhead but I'm not saying is a
performance overhead
it's a knowledge is a runtime locking
you are not reading you are not longer
building on top of this fix it
Web API you are building on top of
something else that can break and change
so we are start thinking about what will
be the sweet spot here
what if the obstruction is a compiler
time meaning that there is not any
specific framework any specific runtime
so you sip your component but the design
comes with a well-defined runtime
instead the compiler will take your
components and generate the best
possible source code I mean and it will
generate the best possible component
this has worked for decades like
compiled languages like C and rest and
they they don't have to care when
interval this is a new CPU or they have
to target a different CPU architecture
instead they just use a different
compiler or they upgrade the existing
one and that exactly will stem sleights
it's a build time abstraction it's a
compiler for the well as knology the web
will be this always moving target
sorry the the web will be the hardware
this always moving target and stencil
the compiler taking your components and
using the newest new newest api's
without developers having to make any
single change so the idea is that we are
not only able to
highly optimized components we will see
later but avoid making any kind of
breaking change and this is really
important for us its main use case
because we are we have already go
through all these three factors and our
main use case is to build reusable
components decided implement design
systems and being future proof so we
have the same design the API a compiler
of stencil to restrict ourselves to
stand our interfaces like classes
properties HTML attributes and Dom
events we are don't try to have a
stencil way of doing things so this way
we can keep changing how the compiler
works the mutations we apply and using
new new API s without requiring
developers to make any change so for
example let's say that next year Chrome
zips a new feature that this a built-in
baton or some kind of template system
this is going to be built into the
browser and it's going to be much faster
because well it's probably programming
in C++ or wherever it is and you don't
have to see any other script right so in
a stencil that could happen and you will
not have to make any change we will just
tell your component and change how that
thing works so even there is not a
specific render like even you know like
we are using some a specific rental
render we could change it so in addition
we can support our browsers in the same
the same idea like like a cig compiler
can different can generate different
targets for a different browser after a
sec Impaler can differ can generate code
for different architectures we can do
the same for different browsers without
developers having to think about it
so for example the molar bill the most
of your users actually using Chrome
Firefox Safari modern browsers will get
the smallest bundle without any kind of
polyfill without using modern JavaScript
features like native async/await or ES
modules and all browsers well if you had
to support them like inference floor
dibbles I get a little bit bigger es5
angles and this is an example of the
same component it's I am button
it's Batum as a button with material
design and iOS styles the stencil the
compiler generates up to eight different
versions but that doesn't mean that the
that the client will have to download
all these six files in fat is just going
to download one of them so we can see
that some files have the es5 prefix or
yeah so that means that it's cs5 is all
the code SC means that for browser that
doesn't support out on but in any case
this way we can cover the whole spectrum
of browsers in the most efficient way
and we can provide that and we can do it
with the vests developer experience the
one you are used to it because think
about it we build a stencil for us and
obviously we use frameworks before so we
wanted to be productive in the same way
we are not yet
tell me now we're engineers too bright
you know like assembly you know like
assembly free well that will be that
about components but having this this
services like serviceworker generation
pre-rendering fast incremental builds
like a deep integration with typescript
and their types and you know dogs
generation we take the static analysis
of this component and we can even
generate outer regenerate that read me
that you know yes deployed your ducks in
the in github having to make any change
or we have valuation output where we can
integrate with things like storybook or
your houston web generator so for
example for the ducts of ionic in the
web site we use a JSON target that puts
all the information and even like as a
bonus we even part the CSS and we
extract the CSS variables that you might
use because this was a big deal for us
and you know like we have peaceful DF
testing we use puppeteer under the hood
everything this is already done you
don't have to implement these things and
configure these things so we have built
this in the example Michael eat Randy
they
some issues with that I am an input and
here's the diff and we can review that
previously and but the idea is that we
can have web components and still have
framework level features today I'm
announcing a big milestone in
development or development of a stencil
stencil one and you might have II wonder
we are using we are not using numbers
just like 1.0 but because essential one
is a sanction mental it's not an
incremental release it's a consolidation
consolidation of the API since L was
initially built to solve the problems at
ionic but it an app solving a lot more
problems for a lot more people so during
the last six months we have been
collecting all this big pad for
thousands of developers and use need to
consolidate this API that we that we are
proud of in addition we have a new
random new compiler so one of the most
interesting things about the stencil is
that when you instance this about
components right so you're not using it
muscle time to create an app right so
how will you handle the list logging
because most of the time is about
routing it's a routing based list loaded
but here we can have that so instead we
took a different approach is a component
based lazy loading because we want to
use a stencil to build this components
but they will be used in different
places they will may be used in react we
have Bionic react
Yanik angular they have different ways
of lace noise so in order to do that in
stencil is able to perform the static
analysis of how the components depend on
each other and apply the best
optimizations and the real person things
have to deal with it so in sensor one we
have a new algorithm in spiral a
matching learning technique called war
embeddings and I'm going to explain
because kind of weird but the thing is
that our use case all the components are
entry points because we don't know how
they are going to be used so like
traditional tacking algorithms like the
one using webpack or or OLAP give
generate a different bundle for this
application for each component if you
want to lazy low them so if you have 20
different components at the same time
you will have to download 20 different
files so we come up with a new guram to
to make this feature so in this image we
have nine components and we use numbers
to name them but you could imagine Deng
has paid login base tutorial I button
wherever so thanks to the static
analysis I said before like of how
components depend of each other like how
they are using the templates we can
extract information of the dependencies
which are components and that's what
these lines represent alright so the
next step is to resolve the transitive
dependencies so for example if we know
that the component 1 depends on 3 and if
3 depends on 6 that means that by the
transitive property that 1 also depends
on 6 oh damn it
ok make sense everyone yes
ok so we keep we basically do the same
with all the components ok so let's
focus and then a component number 9 it
has a lot of arrows pointing to it that
means that it has a lot of dependence
but some component like 5 doesn't have
any okay let's focus again in the
component 9 as I said each arrow
represents dependent so in this case we
collect the dependence of nine so in
yeah it's three one six four and two
right where these lines are coming from
and we do the same with all of them
understood yeah yes
ok so let's focus again in the component
number nine there were just four
examples so we have let's get the
dependencies so we go we get already all
the data but we just have to encode it
in different data structure so what if
we could what if we can convert these
dependencies of each component into a
vector just like word embeddings will do
with words so we have
so for example the component number
let's let's encode one let's put a 1
when it's a dependent and nasarah when
it's not so 1 it's a component it's a
dependent or not it is right yeah ok so
one two three four years or well but
five five is not we don't have any arrow
pointing to 6 so we linked all with 0 6
it is and 7 8 9 is not okay well we do
the same with all the components and we
get an array of vectors so what we had
friends file and transfer our components
director of coordinates we could imagine
their hands points in a space in here is
a 3d space but you could imagine then as
you know with more dimensions the core
idea is to group together the components
that are close enough in this space but
in order to know if they are close
enough or not we just have to calculate
the distance and how do we calculate the
distance well here's my friend guitarist
philosopher mathematician the answering
trick used to following hims really
smart guy came up with this famous
algorithm that you probably remember
from school that relates the legs of a
triangle with hypotenuse I have
practiced this war a lot so in this in
this example the hypothenuse is exactly
a distance between the two blue circles
okay well I'm not here to scare you
promise but in our case I leave it more
complicated well there's more than two
dimensions by the ideas the same turns
out we can use the generalization of the
Pythagorean theorem to solve this
problem and that's exactly where this
is sorry so we calculate the
distance between all the points even if
it runs 100 dimensions so going back
here we just bundle everything and this
we had test this approach in both
internal and external apps and we have
found that it's much better than
anything we have try in the past in in
big app generates
bundles better that if a developer will
have to try to bundle this 100
components in most efficient way because
most of the things such the conditions
are changing
so this time in addition you know like
now emerging that preferably optimized
bundles and we can even generate hints
so browser can download and parts all
the assets that your application need
yeah in the critical path so in this
example we have the module preload for
all the JavaScript because we use
modules natively so all the JavaScript
require in a critical path is download
read like yeah in parallel I was saying
yeah so nothing is a faster random we
have profile and refactor to random to
be much smaller and faster institution
time so the new ran time about pattern
like optimization killers and pro the
async away racing schedule we use new
API like constructible stylesheet we use
native insuk SE modules async await so
in this benchmark we have eight hundred
eight thousand item buttons component
and you might look like it's a simple
component but in the hood it has a lot
of classes a lot of nested components
that will try to replicate them at
release on an iOS designs
so in this stress test we actually
having two hundred thousand nodes at all
historically it took six seconds to
fully initialize that withstands e1 it's
three seconds and it uses pretty much
half a memory which is yeah
[Applause]
so 2 times faster and yeah hologram
okay let's continue another advantage of
fusion a compiler is that we are not
longer limited by our by the you know by
3 second to remove part of self code
that are not required so instead we can
compile all this metadata that we have
with 3 second in order to heavy
optimized components so a hello world
app compiled with a stencil it's so a
small you can barely see it it's yes 133
bytes and compress well why it's so
small because it doesn't have any I mean
what it's a hello world right it doesn't
need any random so the the compress is
even smaller but here the important idea
is that while a hello world example
isn't really an artificial example we
are really proud about the power of a
compiler can do applying heavy
optimizations and completely remove what
is not needed in a specific route
brushes if it's needing some brush it
will also include that so these
optimizations can also apply to bigger
use cases like a complex application
built with ionic or the like almost like
a stander to do MVC so in our case it's
just two point four kilobytes and to put
a little bit more context well in the
same application with with different
technology we feel really proud about
what we have achieved and all of this
without messing with your no modules you
probably have seen this image before I
think yeah and the first talk we also
see it but you know it's a good example
it's usually no modules is heavier than
a supermassive level when you're
installing it we might take a couple of
minutes okay so this is but in general
it's a big trial today not only because
there is a dependency help in every
campaign every project you don't know
which code is running actually there
isn't healthy dependency in practice in
package package manager like I'm I have
nightmares with like npm apocalypse or
something like you can download anymore
so yeah there is many things moving on
like moving parts in our web projects
and developers already find creative
ways to get around and get some space in
their computer so sorry
so one of the design principles have a
stencil is to keep dependencies to the
minimum so it doesn't not only make the
Italians installing Sprint's much faster
but your project more future-proof and
stable it's not if it's not the first
time at least for us that a dependency
of that dependency change and finding a
solution becomes a problem for example I
think for notes as you update to note 12
and indeed stopped working so yeah it's
this kind of thing like don't see
dependencies so for instance if you open
node modules in a stems your starter you
will define two folders a stencil and
I've escaped here at the line' we have
the largest stencil drawing the world
the cosmonaut stencil is a tool you use
to paint something but it's not longer
there right you can use the same stencil
many times but it's never part of the
final product and that's why a stencil
has the name it has it's like treat me
my max my CEO said it's like written in
stencil four components and we said
that's it when you build a component
with their stencil I mean sorry when you
build a component with a delivery lead
element react angular view your
components you upload to MPN have a
strong dependency in this in this
framework and in this particular person
of the framework right but the
components you generate with the stencil
they are not essential components they
don't have a dependency on in stencil so
they so they don't even depend on it now
I if I have time I really with everyone
yeah so I have a quick demo of how easy
it is let's see if I can
see very quickly I know no meat love it
okay
all right okay so uh yeah so we have the
terminal we just run MP in it stencil we
run it we select we're going to create a
simple app but most of the times is
component a nap
yes humph done
yes it's already downloaded you don't
have to it's already downloaded the
started and we run npm install for you
so when you'd select the start there we
also you start so while you was typing
the name we already start downloading
everything so now we just go here MPM
start I'm using it actually so uh so for
example I hear we have a very simple
application we can we have this these
features I talked before about I like
thing more level features so if I open
the code and I try to make any change
even though these are web components I
can have like code mode module
replacement so for example here I'm just
going to make a GUI just going to make
the change button from profile page to
hallow page safe and you know you may
want to run the the docs
well you yes we'll go here and in the
configuration and you will create an
output target like type ducks I say we
have dogs Jason job read mean so if you
have that and you run the bill it will
generate as a readme file in every like
in here in this folder in this folder in
this folder with study and analysis of
these components let's say you want to
pre render the page well this is this is
something that you will not spec with
five components but here you will just
let me see if I this is running
no it's stopped all right here okay
let's stop it so it will say NPN van
built pre-render in this case it will
run out drop bill and it will yes
actually create different readme file
and it retains two pages well we have
remember that profile page another one
and yeah I I think that's pretty much it
okay yeah so you I really encourage you
to check it out the stencil yes calm or
just npm in it the stencil I'll give you
a try yeah it's like magic
so thank you
[Music]