The State of Web Components - Ana Cidre - CityJS Conf 2020

[Music] hello and welcome to my talk the state of web components today we're going to be going on to a journey that will be looking into the past coming to the present and looking right into the future but before we do go on this crazy journey let's figure out what web components are because after all this talk is called the state of web components so what are web components web components are components that are completely platform agnostic and what does this mean well this is just a fancy way to say that they run equally well across more than one platform but their main goal is actually to have as an encapsulation so that there won't be any styling or behavioral leakages in or out we can also encapsulate them into reusable packages so that we can then share them across teams and that way we gain maximum interoperability which is really nice and we'll take a look at the benefits of that in a bit later in the talk so web components actually consist of four main technologies it's not a technology in itself and let's take a look at these four technologies to get a better understanding of how these work so we're going to start with html template html template is basically a html tag called template it's nothing new it's been around for quite a while and that's where we're gonna put the template of our web components and what we can do when we create this is that we can clone it as many times as we like and by doing so the browser is only going to pass it once which really speeds things up for us so let's take a look at an example now here what we want to achieve is an image gallery with its corresponding images inside and this is how we would do it so all we're doing is adding the first image and then we're cloning it and like i said is that the browser will only pass this once no matter how many times we do this so that's quite nice it makes it nice and speedy and we have our template ready for our web component the next technology is custom elements so sometimes i hear custom elements used interchangeably with web components and however this is quite correct because it's just one of the technologies even though it is the technology that allows us to create that tag that html tag or we can um improve it already existing ones or extend them and this is really cool because um we can actually name them however we want to so we have our own html tag and we name it how we want to we just need to remember to add a dash so the browser knows that we're talking about a web component and how will we do this well this is a very very simplified version however we'll be going in this into more depth in just a bit so what we do is we have a class and in this case it's called login button and it's extended from the html element and we do this because um that way we're inheriting all of the all of the special methods that we're getting from html elements so that we have an attribute change callback we have a connected callback again things we will look at in just a second but i just want to note that these methods are called custom element reactions so if you hear me talking about that then this is what i'm referring to and then what we're doing at the bottom is calling custom elements.define and here we have the name the login dash button that's going to be the name of our html tag and then we have the login button now so um when the browser actually sees this it's going to construct and render a new instance of the login button class however this element will not behave like a html button unless the author adds all of the necessary attributes event listeners callbacks and accessibility functionality to handle user interactions and so forth so just keep that in mind that you have to add all of this yourself and that's what it would look like so if we wanted to add it to our html this is what our html tag would look like and then we have the style attribute there with some funkiness going on um if you're not used to css custom variables don't worry we're taking a look at them in just a bit but this is what they look like and you always have to add a dash dash before one of the major benefits of creating our own html tag is that we're getting rid of that div zip that we all love so much and yeah so we won't have this anymore now our third technology is shadow dom and this is the way that we actually encapsulate our web component so that we won't have any styling or behavioral leakages in or out and i don't know about you lot but it's happened to me that even me myself i've touched the general css and boom my component has changed and we don't want that to happen do we so we add our shadow dom and what we're doing here is calling a test shadow and we have mode open now this is so that the developer who's using the web component can manipulate the structure of the component using javascript and this is beneficial because i might have created an image gallery at the beginning when i created a template and for me it's just a simple image gallery that i'm going to use in a web application however imagine someone that has maybe a native mobile app and wants to use a slider right and find this kind of image gallery that's a slider and then they're like yeah well maybe i could actually use this to be a page slider and not just an image slider well if we leave mode open we're giving them the flexibility and possibility to do so whereas if we closed it then they wouldn't be able to do that so if you can leave it open but if you really really don't want to you can always close it and you put mode closed instead of open and then on the second line what we're doing is we're simply um appending we're cloning the template cloning the template and instead of appending it to the dom appending it to the show down and last but not least we have es modules and that way we can develop our web components in a modular way so if you're used to javascript application development you're used to modules and what we can then do is define the interface of your custom element in the js5 which is then included with the type module attribute and this is basically what it would look like there so now we've covered the four technologies of web components let's actually put them all together and build a web component and what we're going to do is build a simple ui button which i'm going to call log in button but you can call it whatever you like and also what it's going to do is allow the developer to change the text inside the button so that's why we have that text attribute there it's a very simple ui button but please note that web components can be much much more powerful than this this is just an example so first we're going to create our template we have some styling which we will get back to i promise you we will get to the styling but it's an important part so we're going gonna have to pause a bit there but a tiny bit later and then what we have here is our button and we have two attributes id text which is what we're going to use to change the text attribute in our web component and then the class button here is where we are defining our custom element so we're going to call the class login button it's extending the html element also what i didn't mention before is that when we extend the html element we want it we're saying that we want it to be recognized as a dom element and then we have constructor and we call super so we have access to all the apis there we then need to add our shadow dom which we've already seen so we're not going to pause too much here and then here's where we're going to get the observed attribute static prop property and it's going to return an array with the name of the components attributes which in this case is just one and then this property is asking the browser to basically be notified when the value of any of these change any of these um attributes change so if we then want to capture these notifications from the browser we can do so by implementing the attribute change callback and this is one of the methods that i was talking about that's called custom element reactions and you can implement it to handle some events in the life cycle of the component then we have the connected callback which is another custom element reaction and this is actually called when the component is added to the pages dom and what we're saying here is basically this is our template and then we're just creating a render function there now in our render this is basically what we want to render and for text we want to get the text but if there isn't anything there in the attribute then what we have is this default value which is click me and that's just in case the first option doesn't exist and that's basically it we do have some accessibility things going on there which is great um it can be improved obviously but this is just a short demo and we have our login button there so if i were to change the attribute text that i put something else instead of login that would show up on the button now if you want to play around with this code you see the stack blitz logo at the top there you can just click on that when i share my slides and then you're good to go and pretty cool huh it's all very exciting um i don't know about you but i think it's pretty cool that we can build something so native to the web and then package it up and re reuse it across teams but who am i to be talking about this or be saying any of this because i haven't introduced myself yet so i'm anna cedrey and i'm a developer advocate for awesera now all serial is a flexible drop-in solution to add authentication authorization services to your applications if you have any questions about web components about all xero or just want to say hi feel free to reach out at any time my dms are open that is my twitter handle down there um and you'll see my twitter handle appearing and disappearing throughout the slide so feel free to reach out at any time now i'm not just a developer advocate for all xero i'm also a very active member in the community i'm the founder and organizer of both ng spain and girls tech ng spain is an angular conference based here in spain but due to the current situation well there isn't going to be one this year unfortunately but we hope that by the end of next year we'll get one on board girls tech is a local group for women in tech who it's a safe place for women who are either starting in tech or who want to be promoted or just have a voice right so it's something very local it's called gals because of girls but also because of the region where i am which is galicia and tech for obvious reasons and last but not least i'm a woman um ambassador i'm techmakers ambassador sorry and that's because i'm very passionate about diversity and inclusion so yeah feel free to reach out to me at any time now i just mentioned that it's all great with components right however when i speak to people about web components i get very different reactions well actually they're not that different they go along these sort of lines of oh my gosh why are you talking to me about word components to please stop and last but not least people that don't want to hear anything about web components and a good friend of mine he's a developer advocate too mike mike hartington hi mike um he did one of those i have an xyz joke right but about web components and it's i have a web component joke but you'll probably hate it for no reason so why is this why do we have this perception or conception of welcome plans well let's go back in time let's go back to around 2007 when web components first started the problem was that not all browsers were on board apple was trying to do their own thing edge would have had to make a huge effort to make this possible and also if we wanted to create them and use polyfills well the polyfills weren't great they were pretty huge we're talking about 16k compressed and also shadow cannot be implemented as expected so all in all developers had a bad experience and they tried it didn't like it comic books tried again that's normally the kind of response i get but if we come back to the present to today that little rabbit or big rabbit in this case has news for you and it's that browsers have adopted web components we are not in the situation we were back in 2007. if you don't believe me take a look at this chat all major browsers are fully stable and edges too because they adopted chromium so there's no need to worry browsers are stable on all four technologies that we talked about but why should i even consider web components like i'm happy with my framework why should i go and learn something else well we'll get into the learning part later because it's not a big jump but i'm going to tell you why i think you should learn about web components and one of the biggest benefits from work components is that they're interoperable remember how earlier at the beginning i said that we can like package up our work components into reusable packages and encapsulate them and share them across teams well imagine that let's give you an example imagine that you work in a big company where there or maybe you do and yeah let's just go with the story um it's a big company where there are several product teams right and each product team has their own product obviously and we have a product team that's using angular we have another one using vue and last but not least we have one that's used in svelt however we need to create a whole new login process because we do for all of the product teams because we want the same user experience on this login process so what do we do are we going to really create this login process three times because even though we want to have like the same user experience well that would be three times the headaches three times sleepless nights and so forth if we were to create it was a web component however we'll just have to create it once and then share it across teams and i think that's so powerful and if you want to know the framework you're using actually adopts or has adopted web components you can do so by checking out this website custom elements everywhere it's made by rob dodson who was on the pilot polymer team and it tells you basically the percentage of how web component friendly your framework is so it's not like you have to leave your framework you can also create web components and add them to the framework of your choice also they have a much better performance because they're using things that are native to the browser they're using technologies that exist there already and you can see that depending on which library you choose to work with to create these web components because yes you don't have to create them in vanilla javascript we'll take a look at the libraries at the end but there are many libraries out there and depending on what library you use well the bundle size will be bigger or smaller and this is a good chart that shows it to you if you want to see more information on this i really go and i really recommend that you go and check out this source which i put there and we've already talked about encapsulation we don't want leaks but when we talk about encapsulation it reminds of us of something that i wanted to talk to you all about styling right so styling is so important because i might want an orange button but maybe you want a green button or maybe you want to style it however you may want you might even want a round button and go totally insane well there's ways to go about this and there's two ways first with css custom properties which was the preferred way because of the browser compatibility however um in a moment we'll see our second option and we'll also see that browsers are fully on board there too so benefits of using css custom properties is that you can um for example in the styling of my template i have a login button and then i have all the properties that i need and then i say which properties can be accessed to the outside to the user of the web component to the developer of the work component and you do so by calling var and then you open parentheses put the name of the variable css variable there always starting with a dash dash and then the default value there and that's basically it and then when the user uses the web component they call in the style that funkiness that we saw earlier dash dash background dash color or dash dash font dash wait um i just want to note that these are names that i gave them you can call them whatever you think you like but please make sure that they're readable and understandable second option is css shadow parts with the part sudo element and browsers are now on board which is really really cool because it's going to allow you to theme and style your web components accordingly so the cool thing about this is that oh by the way i forgot to mention the source really good article if you want to go more in depth about theming you should definitely check out this article by monica okay so we saw a simple button but it could be so much more it could be a form it could be a card and there might be certain parts of the web component that you want people to be able to style and other parts not for whatever reason well this can be done through the part pseudo element so you call the part attribute in your template and then you give it a name and then what the developer does is in the style sheet they call the web component the part pseudo element and the name of the part and then they can add whatever pseudo classes they want there like hover or placeholder or whatever they need and even though i mentioned that this would be more beneficial in a form or a card or something a bit more complex than just a button you can also do it on the button so see on our login button we're calling the part attribute and then we have the custom button name and then in the styling we have the login button element the part pseudo element and the name and then we can change whatever properties we want to there another cool thing are slots so this will give again more flexibility to the user of the developer the user of the web component to decide whether they want to use this part of the web component or not and it acts like a placeholder so all we need to do is inside our template add a slot remember to give it a name because otherwise the browser the browser is just going to choose it randomly and then the developer what they do is they then add the slot attribute the name of the slot and use it if they want to that's pretty cool and i'm just going to go back to browser compatibility one more time because i'm so happy about this and you should all be very excited about this too and yes internet explorer still exists not for long i've heard which is great news however polyfills do exist for internet explorer and they're very very tiny nothing to worry about they work fantastically right frameworks and libraries so i mentioned before that um i created the web component with vanilla javascript however we can create it with a library or a framework of our choice it's not like we have to do it with vanilla javascript and here are for a few libraries out there for you so we have lit element we have hybrids we have stencil which is really really good by the way polymer skjs slim js if you're an angular developer you have angular elements vue.js also allows you to do so but just to get an idea of what benefits you get from using a library i just want to take a moment to look at the element one because lit html and lit element are actually the future of polymer which is very exciting and actually the new official material design web components are based on lit element so that's quite nice now you don't need to see this code don't worry um i know you can't read it it's not like i want you to read it i just want you to see the size like the amount of lines of code there are now this was my button from before which i already showed you now if i were to recreate this the one that was built in vanilla js positively create this with lit element this would be the size this would be the amount of lines of code there are so you can see that it has reduced dramatically and there are much more benefits obviously so we have automatic render updates we have um remember earlier i said that the learning curve isn't steep if you're coming from like other frameworks well especially if you come from like react it's kind of like that so it has a jss jsx like um it's quite nice so it's not like you're gonna have to learn something completely different there's also no virtual dom except for lists so much less memory usage and makes things a lot faster it can work with bible and typescript if you're used to those and want to work with those that's totally okay there's no build step required and they're very tiny and light which we saw in the chart earlier but when i show the car um the slides you can you can then click on the source and dig in deeper to this so that's really really nice now if you don't want to create your own web component from scratch you just want to use something that's out there there are many many ready-made ui elements for you so there are libraries of them there's wired elements which is quite nice because like hand-drawn work components which is quite nice ionic is fantastic um you should really go try them out there's lion web components too actually we're going to take a look at ing in just a second because i want to go on to talking about companies that are actually adopting web components and there's a bunch more out there but here are just a few which i think you might recognize and you can see i want to talk about ing because i know that they're using web components for their features so this really emphasizes the fact that they don't need to be ui elements they can be so much more they are so powerful and to prove to you how powerful and cool they can be i just want to show you a few cool projects so we have the model viewer here and this is a way to easily display interactive 3d models on the web and an art in ar so this is really cool and it's a web component we also have medical imaging use cases we have this css doodle which allows you to create css patterns we have a color picker and we have this sware kit that now has a web component that can be implemented inside of their partner's hybrid apps and it's built with sensor js and ionic framework and these are just a few of many many many that are out there now i did this cool tweet where um if you look at the replies you'll see some of the amazing web components that are out there again this is just a few but feel free to take a look right so we've been to the past we went to 2007 we came back to today we see that web components today are awesome but what does the future look like so one thing i didn't mention was that these are elements these are technologies that are native to the browser so they're pretty we can we say future safe proof maybe maybe not you never know what the browser's in javascript but it's looking good but there are some cool things coming to web components and one of them is the custom state pseudo class so this feature lets custom elements explode expose their state via the state css pseudo class now um for example there are some four contra form controls that have an invalid state right and these are exposed through the invalid state pseudo class so just like bulletin elements just like this invalid pseudo class custom elements may also have states and web authors want to expose these states in a similar fashion to built-in elements and this will allow you to produce a declarative shutdown so this is going to be a declarative api and it's going to allow the creation of the shadow root or shadow dom using only html and no javascript it's also going to allow that web components that use the shadow dom to also make use of server-side rendering which i know is a big thing so that's really nice and last but not least um form participation api and this is going to allow custom element authors to provide integrated form controls that behave similarly to built-in elements and that way we're going to reduce the need for redundant runtime and load time infrastructure that exists only to replicate what browsers already do so as you can see the future is looking pretty pretty bright for web components and you can check these three out um on on them on github because they're really really cool and i think they should be tested and they i know they're coming out pretty soon so if you have any questions about web components or just want to say hi um please feel free to reach out my dms are open and thank you so much it's been a real honor speaking here today at ctjs so thank you [Music] thank you very much that talk that was very useful very interesting how'd you like it we have a few questions for you already i'll know they're the previous questions we'll wait for the new questions to come in if you have any questions please add them into the q a channel and i have a few questions for you if you don't mind though hannah um zero are you using web components or is it is it something you're playing with through work or is it like a just a personal thing you're playing with them it's just a personal thing i'm i've been trying to convince my team but it's not that easy we're very much um react focused so okay yeah okay we've got a question coming in is it possible to utilize styled components for styling web components or is it well you can i know there's i think it's called masquerades out there which allows you to do something very similar um i will i i recently saw an article on that so when you bring that up i'll try and find that and post that and the chat later obviously when you have stuff like i was talking about the earlier the the um css um sorry custom the css custom variables um you don't really need to do that because it kind of like overloads your component so i would really go with just what what i talked about my talk so css custom variables and also the um the theming i was talking about back there too so the built-in browser stuff essentially is yeah it's best to keep things simple and not over engineer right that way you also keep things small and fast so absolutely i like to keep them simple okay we've got another um question what's the coolest weirdest or most pointless use of components you've seen oh that's a good one the coolest is definitely the one i showed you first um the webvr one of the google the little astronaut thingy there that you can see that's really cool um weirdest huh i wouldn't i don't actually know and well i would what was the last one and the stupidest silliest um oh the questions disappeared it was uh the weirdest uh yeah the stupidest stupidest okay so i wouldn't say that there's a stupid web component because maybe you think that a simple ui button could be stupid however it could be really really useful so i don't find any web component stupid but um yeah there are some that are badly built there are plenty out there they're badly built so they don't work too well yeah but if you learn something in the process that's beneficial right so that's good definitely yeah okay this is one of the ones i was wondering about actually and so you mentioned ssr there yes and that there is the ability to do ssr i assume the main benefit of that is is sort of seo um what what is the story of seo is it are you is it is it basically a javascript app and the search engines call it like it's a javascript app or are they is there anything else going on there the actual question is what's the state of ssl web components so the state of ssr that's going to be coming soon with that new feature i do think that when it comes to seo it really depends on the web component that you build um if you're trying to make something very native to the browser such as the buttons um you do have to remember to add all of the features of um adding that you would to a button to make it like known to the browser as if it was a native button so and that in those cases um for seo purposes it's always good to add accessibility and make it more legible right okay um right we've got a loaded question i've not read the question i've just seen it loaded one we've taken a particular route one already but could you speak on accessibility with web components so yeah just talking about the um how accessible the components are yeah you have to implement that completely yourself and you should obviously anything that you're going to put public matrix accessibility friendly there's a golden standard checklist which you can check it's on github i'll drop that link later too um because it's really important that you do take these measures so if you do create a button don't forget to add that it's a button um if it is a button use a button tag and if you can't for whatever reason then use your area labels and whatnot there so please do take accessibility in mind if you're extending a native element then you get the benefits of the native elements from accessibility point of view would you yeah yeah but i guess the search engine wouldn't well that i'm not too sure about right now that you've mentioned it but i'm pretty sure you do have to make the extra effort when it comes to web component from what i've seen from the golden standard checklist because it's one of the yeah items on there okay right we've got another one here how complex work how complex web components could get for example putting payment in one part or for another could it face growing complexity as number of elements grow definitely but like everything do not over engineer them keep them simple keep them small you don't want to add too much complexity to one component because that web component won't serve for any other purpose and that takes out the purpose of web components right because they're meant to be reusable so make sure you keep them nice and simple and well if you need to make it complex then it's probably you're the only person that's going to be using it okay okay do you think that any more hurdles web components need to jump so people don't look so horrified like in a presentation when they're mentioned um honestly no i think they're there you just need to use them actually i was speaking to my colleague earlier sam he's also at the booth i was saying to him like if you want to use web components and just add it to your spell app location that you're already building just pick a web component that's already out there and open web components or wherever and just plug it in to see how it feels and what you feel like doing with it just so you get a feel for them you don't have to start a whole new application you can already use what you have and just plug one in makes sense have you this is just one for me i think we've got the main questions there um how are you packaging your components do you do you package it as like npm modules or what's the what's that you can but again if you do that you'll put them out to the public so make sure you're doing them properly look at that golden standard checklist that i love so much oh it's on there obviously yeah um but you can just like share them across teams as they are sir you don't need to very nice i think that's the main questions anything else you want to say before we disappear anna no that was actually pretty nice and quick thank you all so much thank you very much i think we've got little javascript bundles of joy coming up next um but we'll leave it there thank you very much thank you

Channel: Pusher

Views: 4,438

Rating: 4.8987341 out of 5

Keywords: developer language, language code, libraries, help, tips, forum, meet-up, meet up, learn code, coding education, coding hints and tips, lecture, coding lecture, learn about code, learn a developer language, amazon alexa skills, developer conference, node.js, javascript, backend, web components, current state, reusable, architecture, improvements, common uses

Id: xMGRF6pE764

Length: 35min 58sec (2158 seconds)

Published: Thu Oct 08 2020