Uh, when I started this.

Hi, everyone.

I'm so excited to be here.

I hope you like my talking is the last one.

Were everyone a living target?

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.

I mean, you know, I have a compiler can help you build with applications.

And in general, most specific.

Gibbs decided systems.

So my name is Manu on a work has a civilian year at Ionic, which is the team that builds ironic framework and a stencil itself.

So we basically are a company, a towing company.

I want to be able to help Web developers build applications 100% based in technology.

So, uh, okay, So before gained into much detail, I want to start with the true history.

Is that 12 years ago, jealous creep was not what it is today.

It was a mess.

Different browsers have different behavior in from Explorer on escape on the strip itself.

Like the high level FBI's that today we consider basic.

So what's really hard to break?

Cos application on top of it?

Um then something happened, you could reappear, and he came to solve all the problems that JavaScript hat at that time.

It normally beekeeper between brochures and provide a higher set off a pea eye so that, actually, some of them are part off off the web today, like curry selector.

So, but the biggest innovation is that it allows JavaScript to grill.

What's the language on Hello to be used for more complex application that just like some simple form, elevation and, in fact, May company Bill Kartika.

Which one was one off the first descent systems?

Reckon drop tools for your components on it was basing equerry mobile.

So in order to instance, she ate and create these components.

You will have to use the imperative AP I off you query.

So we work.

But it wasn't great.

Some years later, angular years appear on the eco system was a little bit healthier.

So the problem is that JavaScript had angry.

Yes, had to solve was not the same ones.

It doesn't only provide a higher layoff.

Higher level AP eyes, by the way, are working.

We're organising set off good defaults.

What today we know has a framework so that helped you escape to grow even more on introduce the country of directives that that was my going to us.

And it was closer at our idea, off of components.

So we were so excited about it that we decided to put everything we got into into these new system because it's what's the biggest there forward on.

That's how I only want four.

Then read.

Yes, Dangler team announced, angular to Was was going to be faster is smaller mobile first, everything s so angry he has worked so great for us that we just decided to make the investment on.

That's how ironic to bionic three months more.

So even the name is the same.

It would require a completely effective on.

Think about that.

This is already the third time that we have to go the same components on today.

Well, they're consistent is completely different.

There are many fingers and alternatives on All of them are great.

It just depends on your own preferences.

You're keen, your team, your skills, your product or even what just issue for hiring a specific country.

So going back to our mission as a company that we want to help all the Web developers, not the ones used in ah, specific framework.

So we start thinking about how we could achieve that, how we could if we have to port these 100 components to every popular framework off today and maybe tomorrow.

And of course, the answer is not.

We know that we have to go through this reflector many, many times on.

We know that that's not going to happen.

It's so time consuming its We quickly realize this is not going to be the solution, So we have to think about something else.

Andi think like frameworks are great for building the final products.

Even if you say that reacts not a framework, it is.

They built a framework around it and that's not nothing.

It's inclusive.

Okay, create recap A.

Rather a way of organizing a way of testing a set off good defaults.

And that makes sense because at I lose you to focus into a building your product, you don't have to make this hundreds of mixture decisions every single time.

So So, yeah, I have remained with the wheel every time, so but at the same time, they are terrible for building reusable components on.

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 your use cases change.

Or you just want to serve your components with more people on.

Not only people will use the same framework.

So the point off building reusable components is to last in time, right?

So it's pretty much like investment.

You make too low you to build faster in the future.

So it used to build them on double future proof.

Technology is the Web does the web.

That doesn't change.

So the solution off this problem, of course, is where components.

But again, this is very important component doesn't not not solve any other problem.

Yes, universal model of components on.

Even if you like it or not, you will work.

So I'm sorry for a record sometimes, but this is will work.

You can go around it.

So, um, but it said it doesn't handle anything else.

So you still I believe that frank words Pulis's forever.

They will not be replaced in the same way that angular and react and view does not replace the FBI's the Web MPs off today?

Yes, live together on off course.

We know in the past that so maybe eyes were baby that break.

They remove sometimes.

But there is something in common for AP eyes that have a full consensus across browsers is that they will be around forever.

So even if yeah, so think about the website you build 20 years ago.

You still works today because the way can break a thing we can break that they went can't.

So if you were aware component with it, it will still work in the future framework.

So around that idea, um, off we want We don't want to make a decision off the frame where you have to use because we don't know your product.

We just build the components.

So I ran that idea We create ironic to the lightest ionic gunning for is basing weapon points on this fourth re factor is very different because this time we them build on dub off the angry RGs directives or the angry components.

This time it's Bill on top off standard Web.

Yes, they're just web components that staying the female.

So, um, but when before doing that, we found that, as I said, like, we're components of very little label that says he doesn't solve any other thing.

So what happens when the Soviet Union has to deal with a, you know, with a low level?

Okay, well, they just scream.

The next eruption on that usually comes with a new problem and the safe off overhead.

But I'm not saying this upper four months of ahead.

It's a knowledge random locking You are not.

You are not longer building on top of this.

Fix it.

Well, maybe you're building on top of something else that can break on change, so we'll start thinking about what will be the sweet spot here.

What if destruction is a computer time, meaning that the reason of any specific framework in specific ranting So you see your component, but that doesn't come with a well defined phantom.

Instead, the compatible take Your components on generate the best possible sort code.

I mean, it will generate the best possible component.

This has worked for the gates like combined languages like C and rest.

They don't have to care when Interval is a new Cebu or they have to target that if different CPU architecture instead they just use a different compiler or they upgrade the existing one on that.

Exactly.

Re stencil.

It's It's a bill time disruption.

It's a compiler for the well.

Ah, as technology, the web will be this always moving target.

Sorry, The the weather will be the hardware this always moving target.

Understand?

Seal the compiler taking your components on using the newest Nu Nu s A P eyes without developing having to make any single change.

So the idea is that we are not only able to unit highly optimized components, we will see later, but a bullet making any kind of breaking change on this is really important for us.

It's the main use case because we are.

We have already go through all this reef actors on, um, our main use cases to build reusable components aside, implement design systems on being future proof.

So we have the same design.

They have compiler off stencil to restrict ourselves to a stander interfaces like glasses from properties.

It's female attributes and dom events were Don't try to half a stencil way of doing things.

Um so this way we can keep changing how the computer worse, the initiations.

We apply on using new new FBI's without recording developers to make any change.

So, for example, let's say that next year Kirm soups a new feature at this a built in beaver or some kindof template system.

This is going to be built into the grocer, and it's going to be much faster because, well, it's probably programming in c++ wherever these, um and you don't have to see any escape, right?

So in a stencil that could happen on, you'll now have to make any time.

Well, yes, third year component on change how that thing works.

So even there is not a specific render like even, you know, like we are using some specific rental render, we could change it.

So, um, in addition, we can support or brushes in the same the same idea.

Like they say, compiler can't different can generate different targets for different browser.

A C compiler can't different candidate goal for different architectures.

We can do the same for different browsers without developers having to think about it.

So, for example, the mall they're building most of your juicers actually using chrome Firefox.

So far your modern browsers will get the smallest bundle without any kind of Holyfield without using Mother Tapestry features like Native isn't a weight or, yes, models on old browsers.

Well, if you have to support them like inference, lawyer people get there a little bit bigger.

Yes, five bundles on this, an example off the same component it's I Am Button.

It's a beta mus, a button with material designed and now us styles.

The stencil the compiler generates after eight different Burstyn's.

But that doesn't mean that the that decline will have to download all these six files.

Its father is just going to download one of them so we can see that some files have the years five Perfect or yeah, so that means that it's yes, five old coat S C means that for browsing the Dustin's Reports album.

But in any case, this way we can cover the whole spectrum off browsers in the most efficient way on we can provide, and we can do it with the vests.

Developer spins the ones you're used to it because think about it.

We build a stencil for us and obviously we use framework before, So we wanted to be productive the same way.

We're not telling our engineers too bright, you know, like assembly, you know, like assembly for a weapon that will be their components.

But, um, have this this every select service workers in its imprint rendering fast incremental builds like a deep interrogation with the script and their types.

You know, doc, generation we take the static analysis of this component and we can even get out of the unit.

I've read me that.

You know, you just deployed your ducks in there, get up having to make any change, or we have radiation output where we can integrate with things like a storybook or your Houston Web generator.

So, for example, for the docks off Ionic, the website, we use the station target that puts all the information on even like the bombs We even part of the CSS on.

We extract the CSS valuables that you might Who's because this was a big deal for us on?

You know, we have peaceful day of testing.

We use puppeteer under the hood.

Everything this is already don't you don't have to implement.

These things are confused these things.

So we have built this in the sample.

Michael, eat brandy.

They fix some issue with that eye on I'm put on here is different.

We can review that previously, but the idea is that we can have their components and still have a framework level features.

Today I'm announcing a big milestone in development of development office Stancil Estancia one on human heavy wonder we're using, uh, we're not using numbers yet, like from 1.0, but because essential oneness is incremental, it's not the incremental release, its second solicitation consolidation off, baby since l was initially built to solve the problems at Sonic, but it and absorbing a lot more problems for a lot more people.

So during the Lexus months, we have been collecting all this week bad for 1000 of developers on Use me to consolidate this FBI.

That way, we're proud off.

In addition, we have a new, random new compiler.

So one of the most interesting things about the stencil is that when you instances about components, right, so you're not using it.

Most of them to treat a nap, right?

Ah, So how will you handle the least slowing?

Because most of the time it's about routing routing base laced loaded.

But here we can have that.

So instead, we took a different approach.

Is a component based laced loaning because we want to use a stencil to build its components, but they will be used in different places.

They will may be used in react.

We have a unique react, Yannick.

Angular.

They have different ways of lace.

And so in order to do that, essentially is able to perform this a static analysis off how the components depend on each other on a play the best of initiations on the rubber, something have to deal with it.