Web Components are here. Finally.

(upbeat music) - Welcome to my talk, The State of Web Components.

Today we're going to go on a journey to see what the state of the web components were, what they are today and the future of web components.

But just before we do, let's take a look to see what web components actually are. So what are what components? Web components are components that are platform agnostic. This is just a fancy way of saying that they run equally well across more than one platform. The main goal is to encapsulate the code for components, right.

So what do I mean by this? We want to encapsulate them so that we don't get any behavioural or styling leakages in or out.

We also create reusable packages like this, and we can then share them across teams to gain maximum interoperability.

And this is so powerful.

We'll take a look at the benefits of web components a bit later on in this talk but keep this in mind. So web components are sometimes used interchangeably. I hear them used interchangeably with custom elements. However, that's not quite correct because web components is like an umbrella to four technologies.

And these technologies are HTML template.

HTML template is where we put our template tag. The powerful thing about this, just to note.

This is nothing new, template tag has been around for quite a while. This is where we're gonna put our template of our web component.

But the benefit of this is that when we clone it, it doesn't matter how many times we use it because the browser is only gonna pass it once. And this is really going to speed things up. So let's take a look at what I mean.

Now this could be our template, this is in out image gallery.

And we want to add images in there.

In our JavaScript, all we're doing is saying, here's the add the first image and then clone to the new gallery and insert it into the DOM.

So this is quite nice.

And like I mentioned, web components are used interchangeably with the web custom elements.

And why is this not true? Because there's four technologies.

So a web component.

And the second technology is custom elements. So what is custom elements? Well, custom elements is the way that we create the new HTML tags.

We also make existing HTML tags better or we can even extend them.

And these are built on top of ES 2015 classes. So this is really cool.

Just know that when we do create these new HTML tags, be aware of how we name them.

Because it's very important that when we add a dash so that the browser recognises that it's a web component. And two for your future developer self and your colleagues, make sure they're understandable.

So how would we do this? Well, we need to have the class.

In this case we're acquiring that LoginButton and we're extending the HTMLElement.

Now elements inherit from a HTMLElement and that way we have access to a few special methods, which we'll look at a bit later.

But these methods just know are called custom element reactions.

So if you do hear me talking about custom element reactions, this is what I'm referring to.

So now when the browser sees the login-button, see it on the bottom line there how I call customElements.define, will pass the name of the component first and then the class.

And what we're doing here is.

What the browser would be doing is construct and it's going to render an instance of the login class. The LoginButton class sorry.

But I just want to note that this will not behave like HTML button unless also the web component has all of the necessary attributes, event listeners, callbacks and accessibility functionality to handle the interactions there.

Cool, so what would this look like in our HTML? Well, it would just be login-button, and then we can style it accordingly.

If you don't know custom CSS variables and that kind of --background-color looks a bit funky to you.

Please do not worry, we will be getting into that in just a bit. One of the major benefits of having your own HTML tag is that you're getting rid of this beautiful div soup, which we all love so much, hum.

So just keep in mind that this is a really cool alternative than having div soup.

Now the third technology and one that I'm very excited about is shadow DOM.

And shadow DOM is what provides us with that encapsulation that I was talking about earlier.

Where we don't have any styling or behavioural leakages in or out.

And I don't know about you but it's happened to me many times that maybe I've accessed my general CSS or someone else has. And then I did a small change thinking that everything was great and then my component has actually completely changed too. And I kind of didn't want that to happen.

Well, this is one way to avoid that.

And it's very very very easy to implement.

We just do this .attackShadow.

Here I'm calling the mode open and I do this because I want to give developers the possibility to manipulate the structure of the component by a JavaScript. Now, have I kept it close it wouldn't have this possibility. And why do I like to keep it open? Well, I imagine for example, that my image gallery from before might just be a simple image gallery on a web application, right.

However, for a native mobile developer, it might not be just that.

Maybe they see it as a potential to be an actual page slider on their mobile. And that way they can manipulate the JavaScript to make that happen.

So if you want to give people the flexibility to use your web component in ways that you have not imagined, I recommend that you keep things open.

And then on the second line of code, all we're doing is cloning the template to the shadow instead of to the DOM.

And last but not least ES modules.

And that basically enables web components to be developed in a module way.

Basically, most JavaScript application development now uses ES module.

So this is just a nice way to kind of continue with that. And you can define the interface of your custom element in a JS file which is then included with a type module attribute. So let's take a look at that and you can see an example here.

All we're doing as importing and then we can use it. So it's quite nice.

But how do these four technologies work nicely together? Well, let's go and build a web component and figure it out. So what we're gonna create is this login button. I call it login button because I'm actually going to use it as a login button. Maybe it's not the best naming but okay.

What we're going to do is a simple UI button where you can change the text.

And you do that through the text attributes. See I dded log in there.

We have that funky styling going on again.

And then we have an onclick which is nothing new.

Let's take a look.

First we need to create our template.

In our template, we just have a simple button there.

And we have an ID of text because that's what's going to be our attribute later on. Then what we do is we create our custom element and we do so by encoding class, I call it LoginButtoElement, it's extended in the HTMLElement for everything I said before but also I didn't mention that we need it to be recognised as a Dom element. So that's why we do that.

And we call constructor and inside our constructor we have super because we want to have access to all of the APIs. Next we need to add the shadow DOM which is what we've talked about previously. Again, we're leaving it open, nothing changed here.

I don't need to go over this part.

And then we have our get observed attributes. So the observed attributes static property is returning an array because maybe in the future we want to change this. And it's basically got the components attributes there, which in this case is text.

And the property is asking the browser to be notified when the value of any of these attributes change or in this case this attribute changes.

And then you can capture these notifications from the browser by implementing the attribute change callback method.

Remember when I said that I'll get to the custom element reactions for this is one of them. And this one will be implemented to handle some of the events in the life cycle of the component. Next we have the connectedCallback.

And this is another custom element reaction. And this is called when the component is added to the pages DOM.

And basically all we're saying here is this is our template and then we're creating a render function.

And this is basically what we want to render. So first up we have the text that is gonna be put in through the attribute. Here there's no text we want a default value which is in this case, click me.

And then we have some accessibility area labels there and put pretty much good to go.

So as you may have noticed, this is all in native JavaScript.

No libraries involved.

And here we go, here is our login-button.

We can change it through the text.

You may have noticed as the lightning logo. It's the StackBlitz logo actually and have you, when I share the slides, if you want to go check out this code, you just click on that and it'll take you there. And web components are completely awesome, right. Look how simple it was.

We created a simple UI button.

Now, who am I to be telling you all of this? Well, up until now I haven't actually introduced myself. So I'm Ana Cidre and I'm a developer advocate for Auth0.

And Auth0 is a flexible drop-in solution to add authentication and authorization services to your applications.

So if you have any questions about that feel free to DM me. My Twitter handle is there and you'll see it appearing on some of these slides too. So feel free to reach out.

Or if you have any questions about this talk or web components or just wanna say hi.

Like I said DMs are open.

But am not just a developer advocate, I'm also very active member in the community. I'm the founder and organiser of both NG Spain and GalsTech.

NG Spain is an angular conference based here in Spain. But due to the current situation, we will not be hosting one this year.

But we hope to host one next year.

And GalsTech is a group for women who are getting started in tech or who want to just be part of something here in Galicia. Galicia is a very small region in Spain, of course not that small, but nobody knows it.

But maybe you know the pilgrimage to Santiago de Compostela. Well, I'm neither.

And this group is basically just to help and promote women in tech in the region.

And because I'm very very passionate about diversity and inclusion, I'm also a Women Techmakers Ambassador.

Right.

So that's a little bit about me.

Now when I talk to people about web components on a more like personal level.

Not like I'm talking to you now, or like one-on-one or something.

I tend to get very similar reactions, which go along these lines.

What goes from.

Can we not talk about them to I cannot deal with web components I'm super depressed from my last experience. And there are people that just don't even wanna know, right. Now a good friend of mine, Mike Hartington from the Ionic team did one of those. I have an XYZ joke.

But you'll probably hate it for no reason.

And he's right.

I've spoken to many people that just hate web components and maybe they've never even tried them.

So why is this? Well, let's start our journey and let's go back in time. Let's go back to 2017 when web components started. Now the problem was when web components actually started, not all browsers were on board, let alone having any sort of stability.

We had Apple that was trying to do their own thing. It would have had to make a huge effort for this to happen. And not just the browsers weren't onboard, well also the polyfills weren't great.

We're talking about 16K compressed and shadow couldn't be implemented quite as expected. So we can firmly say that all in all developers had a bad experience.

They tried it, didn't like it.

Don't want to try it again.

But let's come back to the present because like seven years have passed.

So something must've happened, right.

Well, I do have good news for you.

Look how happy our rabbit is now.

Browsers have actually adopted web components. And I'm not just talking about one or two browsers, I'm talking about the major browsers.

And thanks to edge with chromium.

They're also fully stable.

So this is really not an issue anymore.

But why should I even consider web components, right? Like I'm happy with my framework.

Why should I do this? Well, let's talk about the benefits of web components. At the beginning I mentioned that we can gain maximum interoperability.

And it's true because we can share web components across teams. What do I mean by that? Well, let me give you an example.

Imagine that you're in a big company that has several product teams and each of these product teams are using that framework. Like maybe we have one that's using Angular and there's one that's using Vue and another one that's using SVELTE.

Well, instead of saying that I need to create three login processes for these three frameworks, because at the end of the day, they are three product teams.

However, they do want the same and good user experience. So instead of creating the same thing three times, because you also want the same kind of feel, right. You want to know that it belongs to the same company. You can create it once, saving you three times the headaches, three times the sleepless nights, three times of bucks.

And just do it once and share across teams. So this is really cool.

Now if you're wondering whether the framework you're using supports web components, you can check this out on this really cool website called Custom Elements Everywhere.

Which basically gives you a percentage of how web component friendly your framework is and tells you why and why not.

So go check it out.

Also because web components are native to the browser, then you get better performance.

And you can see that depending on which library you use, they are like the bundle size is larger or smaller.

And obviously have you just HTMLElement is gonna be smaller.

So if you do a native.

But there's no need because you can see like with Svelte, with Stencil even with LitHTML or LitElement that you're going to get very small small bundle sizes. So you're not even going to notice adding these libraries. Like I mentioned before, encapsulation.

And this is really really great because you get that complete encapsulation. There aren't gonna be any leakages whatsoever in or out, which is important, right.

But talking about encapsulation let's go on to styling because before I showed you some funky CSS custom properties going on.

And I want to explain what these are.

So when we talk about styling we need to remember that when people create a web component or when people use a web component better said that they might not want an orange button like I did before. They might want a blue one or a transparent one with a border.

Or I don't know how they want their button. They might even want a circular one, right? So there are two ways to go about styling or like styling your web component as a creator of a web component.

The first one and it was the preferred one because of the browser which we'll would take a look at in a second, the CSS custom properties.

As you can see most browsers are fully on board with CSS custom properties.

So there's no need to worry about this and how does it work.

So what we'll do in our template is call the properties we want.

So background colour.

And colour VAR open parenthesis, give it the variable name, sorry, and then a default colour in this case our default value. You always always always have to add dash dash so the browser knows that we're talking about CSS custom properties or CSS custom variables.

And then what the user of the web component does is when the colours of the web component is in the style attribute at this --background-color. And that's it.

That's all you have to do.

But I guess you can imagine that if this was a fairly big web component not just a simple button.

Then we would have to like write lots and lots of variables in here which is more bug prone and also a bit tedious. So there's another way to go about this and it's my preferred way.

And it's also a way in which we can theme our web components.

Now if you want to take a look at this in more in depth, I really recommend that you check out this article by Monica.

It's a really really really cool article.

And it's CSS shadow parts.

So now that browsers are fully on board, this is quite recent.

I'm very happy to see this happen because what we can do is say we have a more complex web component not just a button, might be a form, might be a card.

We can then select which parts of the web component we want to be styled or not.

We do so by coding the power attribute and giving it a name.

And then use of the web component.

All they need to do in their CSS style sheet or in their style tag wherever they want to is called the web component cool the part pseudo element, and then the name of the part pseudo element. And then they can even add pseudo classes on top of that, like hover and placeholder and I don't know what else. And they just add all the properties they want to. So it's just like normal CSS.

Pretty cool, huh? How would we do this with the button we did earlier? Because we can.

It doesn't just have to be complex web components, it can be a simple button too.

Well we call the part attribute and we're calling it custom button.

So remember that our web component was called login-button where you call (mumbles) part, which is part pseudo element.

And then the name which we just got which was custom button.

And the properties we want to in there.

Sounds very nice and very tidy and neat.

Let's move on to slots.

Now slots act as a placeholder for people who want to use certain features of your web components.

So say for example, I have a login and logout button and I want to allow the web developer, the user of the web component to add a description. Can be the name of the person, might be just howdy.

Whatever they want.

Well, I can add a slot here.

And then the developer path before I move on. Always name your slots because the browser will render them randomly.

So if you have more than one, this might be a bit of a pickle.

So the best practise is always to name your slots. Then what the web developer does is call for example in this case a div then have the slot attribute and the name of the slot, which was description.

And then they add whatever they need to there. And I really would wanna go over browser compatibility really quickly one more time, because I think it's so important to see all of this green. Like two years ago this was not all green.

So this is very very nice to see.

And polyfills are great.

So you might have seen that it seems as though Microsoft is pushing to replace IE11 with Edge which is good.

But there are still 5% of the internet population that still uses Internet Explorer.

But the polyfills are really good for this. So no need to worry.

And also, I don't think Internet Explorer, personal personal thing, will be around for much more.

I hope.

Okay, so let's move on.

As you saw I created the web components with pure native vanilla JavaScript.

However, there are many frameworks and libraries out there to help you.

So you don't have to do this.

There's LitElement, hybrids.

Stencil is really really good one.

Also have your, an angular developer, you have Angular Elements and so forth.

You just need to see what fits with you.

Now I want to stop a second on LitElement because Lit-HTML and LitElement are the future of polymer. And the real benefit is you don't need to read this card, it's just to look at the size of it.

You can see how many lines of code I used just to create that UI login button with native JavaScript. However, if I were to use LitElement, the code would be much much more smaller.

And there are a lot of benefits that LitElement have. We have automatic render updates.

It's very react/JSX like, so no need to worry there.

There's no virtual Dom except for lists.

So we have less memory usage and it's also faster. It can work with Babel and TypeScript.

There's no build step.

And it's very small and light which we saw earlier already.

Now there are ready-made UI element libraries. So we don't have to create them ourselves if we don't want to.

And here are a few of them.

Wide elements has core cause I hand roll ones, and Ionic is really amazing.

However, it's not just me talking about web components here, there are many many companies adopting web components, as you can see here we have GitHub ING.

We have Ionic, we have BBVA.

And I just want to note that lots of these companies such as Salesforce and ING and BBVA are using them for features.

So it's not just pure UI components.

And I wanna show you a few cool projects quickly cause running out of time here.

But I want to show you these cool projects because I just want to emphasise that they don't have to be UI elements.

You can see the model-viewer here, which is really nice.

It's an easy way to display interactive 3D models on the web and in AR.

It's a web component.

We have medical imaging and use case.

We have CSS doodle which allows you to draw patterns with CSS.

You have a colorpicker.

Sworkit has also implemented some cool features. And if you wanna see ever more, you can click on this tweet when I share the slides and you'll see all of the replays here.

It's so cool.

Now we've seen the past of the web components, we've seen the present.

And now let's take a quick look into the future because there's some really cool features coming out. The first one is custom state pseudo class. Now this feature lets custom elements expose their state via the state CSS pseudo class.

Now, you know like how some form controls have the invalid state which is exposed through the invalid pseudo class. Well like built-in elements, custom elements may also have states and web authors want to expose these states in a similar fashion to built-in elements.

And this is coming to web components soon.

We also have declarative shadow DOM.

Now this would mean that we can create the shadow root using only HTML and no JavaScript.

But another cool thing about this is that it's going to make use of the server side rendering.

So that's very very nice cause that way we get render content on screen quickly without requiring drivers script for shadow roots attachment.

Very nice.

And last but not least.

And I'm wrapping up for today.

Is the form participation API.

And this allows custom element authors to provide integrated form controls that behave similarly to built-in elements. And that way we're reducing the need for redundant runtime and load time infrastructure, sorry, I can't speak that.

That exists only to replace what browsers already do. So these are some really cool features that are coming to the future web components.

I really really recommend that you go check out web components because they're so native to the browser, we don't really have to worry too much about frameworks and libraries.

And they're just brilliant.

So thank you so much for listening to me today and please feel free to reach out anytime.

Thank you.