We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Web Components: A whirlwind tour

00:00

Formal Metadata

Title
Web Components: A whirlwind tour
Title of Series
Number of Parts
133
Author
License
CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
When building web applications nowadays, there's a lot of fiddling and frustration involved. There's also the notorious problem of cross-browser support for new web standards, be it new input elements or new APIs - most of the time you'll end up having to hand-stitch some sort of coating around it to make it work decently. But that's about to change - as of today. Browsers start shipping an exciting set of web standards, summed up under the term "Web Components".In this talk we'll have a close look at what problems they're solving and how they're set out to do so.There's gonna be many live demonstrations of how they work and how you can start using them today for your web applications.
36
61
Thumbnail
1:11:04
73
107
Software developerComponent-based software engineeringSystem callBitConnectivity (graph theory)QuicksortJSONXMLUMLComputer animation
Software developerComponent-based software engineeringDeclarative programmingConnectivity (graph theory)Web browserFocus (optics)Web 2.0QuicksortMultiplication signInformationTouchscreenSemantics (computer science)Declarative programmingError messageLink (knot theory)Content (media)Search engine (computing)Core dumpProcess (computing)BitData structureState of matterDescriptive statisticsComputer animation
Normed vector spaceSoftware developerWindowWebsiteWeb browserPlug-in (computing)Cartesian coordinate systemWeb 2.0Interface (computing)Core dumpContent (media)Computing platformWeb pageSemantics (computer science)Error messageDataflowInformationTouchscreenSineScripting languageProcess (computing)
Sign (mathematics)Sample (statistics)Term (mathematics)outputSoftware developerScripting languageLengthContent (media)Function (mathematics)Web browserQuicksortFeasibility studySchmelze <Betrieb>outputElectronic mailing listComputer configurationProcess (computing)Web 2.0Electronic visual displayInformationInstance (computer science)WebsiteLabour Party (Malta)Product (business)InternetworkingSoftware developerCodeMultiplication signPower (physics)MereologyScripting languageSelf-organizationQuicksortCASE <Informatik>Flash memoryStandard deviationData structureDigital photographyNavigationWeb browserJava appletCartesian coordinate systemWeb pageFunctional (mathematics)Event horizonMobile appTerm (mathematics)Game controllerPhotographic mosaicContent (media)Quantum entanglementDependent and independent variablesRandomizationMarkup languageComputer animation
Software developerBuildingCross-site scriptingScripting languageJava appletElement (mathematics)Sign (mathematics)Link (knot theory)Template (C++)Acoustic shadowStandard deviationElement (mathematics)BuildingGame theoryQuicksortLink (knot theory)Web 2.0Web browserMathematicsProcess (computing)Graph (mathematics)Electronic mailing listTerm (mathematics)Bit rateConnectivity (graph theory)Standard deviationFitness functionComputer animation
Software developerElement (mathematics)Template (C++)PasswordPhysicalismQuicksortFree variables and bound variablesGoodness of fitContent (media)Perfect groupMoment (mathematics)Data miningProcess (computing)Computer animation
Software developerElement (mathematics)Template (C++)Web browserSocial classContent (media)CloningMessage passingVideoconferencingMedical imagingWeb browserJava appletScripting languageMultiplicationQuicksortContent (media)Network topologyTemplate (C++)Semiconductor memoryVolumenvisualisierungHookingThread (computing)String (computer science)Instance (computer science)Element (mathematics)BitInterior (topology)Formal languageMathematicsRepresentation (politics)Cartesian coordinate systemCuboidMessage passingLevel (video gaming)Imperative programmingDifferenz <Mathematik>Structural loadDifferent (Kate Ryan album)Link (knot theory)Software testingBenchmarkMiniDiscResultantPoint (geometry)ParsingEntire functionGoodness of fitObject (grammar)ForestArmInternet forumAcoustic shadowSystem callDirected graphVideo gameSocial classLogicComputer animation
Software developerAcoustic shadowCartesian coordinate systemScripting languageContent (media)Element (mathematics)CuboidMessage passingPoint (geometry)Right angleSet (mathematics)Internet forumReading (process)Computer animation
Acoustic shadowSoftware developerRegulärer Ausdruck <Textverarbeitung>NeuroinformatikContent (media)Graphical user interfaceComputer configurationRevision controlWeb browserLine (geometry)Object modelTouchscreenBitCartesian coordinate systemFluxComputer animation
Acoustic shadowSoftware developerRootContent (media)Cartesian coordinate systemElement (mathematics)Network topologyDifferenz <Mathematik>RootAcoustic shadowObject modelConnectivity (graph theory)QuicksortGraph coloringInheritance (object-oriented programming)Instance (computer science)VideoconferencingWeb 2.0Template (C++)MathematicsGraphical user interfaceInformation securityLevel (video gaming)Division (mathematics)BitKernel (computing)Right angleSoftware developerComputer animation
Element (mathematics)Software developerComponent-based software engineeringElement (mathematics)Message passingElectronic mailing listCuboidTemplate (C++)Declarative programmingAcoustic shadowCodeConnectivity (graph theory)Greatest elementWeb browserMedical imagingGoogle MapsAttribute grammarAdditionWeb 2.0InformationUniform boundedness principleNormal (geometry)Level (video gaming)Instance (computer science)ImplementationGraphical user interfaceEmbedded systemFluid staticsVideoconferencingMoment (mathematics)Right angleMultiplication signCartesian coordinate systemCondition numberInteractive televisionSoftwareEscape characterCASE <Informatik>Electronic visual displayProcess (computing)Object (grammar)QuicksortFamilyPrototypeComputer animation
Function (mathematics)PrototypeComponent-based software engineeringSoftware developerCloningContent (media)Element (mathematics)Acoustic shadowTemplate (C++)1 (number)Instance (computer science)Medical imagingConnectivity (graph theory)File formatCASE <Informatik>Object (grammar)QuicksortElement (mathematics)Web browserTemplate (C++)Game controllerMultiplication signAcoustic shadowMultiplicationMathematicsPoint (geometry)BitPrototypeSource codeLatent heatCartesian coordinate systemAttribute grammarContent (media)Structural loadFrame problemWeb 2.0Functional (mathematics)Cycle (graph theory)Control flowDrum memoryComputer animation
Software developerModul <Datentyp>Cartesian coordinate systemConnectivity (graph theory)QuicksortPhysical lawModule (mathematics)Web pageMathematical optimizationMessage passingEndliche ModelltheorieStructural loadComputer animation
Link (knot theory)Euclidean vectorSoftware developerComponent-based software engineeringTemplate (C++)Element (mathematics)Interface (computing)Revision controlReal numberSynchronizationCategory of beingConnectivity (graph theory)Hacker (term)Semantics (computer science)Formal languageWeb 2.0Video gameTouchscreenoutputWebsiteLevel (video gaming)Multiplication signSoftware frameworkElectronic mailing listPosition operatorElement (mathematics)Instance (computer science)Theory of relativityGraph coloringAttribute grammarWeb browserDot productHookingEvent horizonCodeQuicksortFunction (mathematics)Component-based software engineeringStapeldateiAcoustic shadowPixelBlock (periodic table)Standard deviationForm (programming)Cartesian coordinate systemGoodness of fitMereologyLink (knot theory)Keyboard shortcutMobile appDefault (computer science)Library (computing)Template (C++)FamilyTap (transformer)Extension (kinesiology)Coefficient of determinationPoint (geometry)MathematicsCore dumpMetropolitan area networkRight angleShared memoryWater vaporCASE <Informatik>Integrated development environmentAngleAmsterdam Ordnance DatumReading (process)Computer animation
Software developerWeb browserAndroid (robot)Integrated development environmentGraphical user interfaceTemplate (C++)VotingGraph (mathematics)Line (geometry)Software developerLie groupConnectivity (graph theory)FlagDreizehn
Template (C++)Element (mathematics)Acoustic shadowStandard deviationSoftware developerSoftware frameworkLibrary (computing)Euclidean vectorFeedbackTwitterConnectivity (graph theory)Slide ruleEmailCollaborationismMeta elementMultiplicationWage labourWeb 2.0WebsiteConnectivity (graph theory)Artificial lifeUniform boundedness principleInheritance (object-oriented programming)Software frameworkIntegrated development environment2 (number)Hand fanElement (mathematics)Product (business)CASE <Informatik>Binary fileFacebookImage resolutionEmailCursor (computers)TouchscreenMereologySpacetimeContext awarenessBitStandard deviationCartesian coordinate systemComputing platformGraph (mathematics)Template (C++)Cohen's kappaPolarization (waves)Level (video gaming)Tap (transformer)Multiplication signDialectTwitterRight angleHacker (term)Computer animation
Software developerAugmented realityConnectivity (graph theory)Right angleFunctional (mathematics)Category of beingAcoustic shadowProcess (computing)Template (C++)Division (mathematics)Element (mathematics)Electronic mailing listSocial classContent (media)Goodness of fitBitUniform resource locatorLevel (video gaming)Block (periodic table)Instance (computer science)Set (mathematics)Attribute grammarCartesian coordinate systemInformationWeb browserNavigationScripting languageLengthQuicksortVideo game consoleRootSystem callDependent and independent variablesType theoryRoutingProduct (business)Gastropod shellCuboidFamilyLie groupGroup actionMultiplication signDigital photographyEvent horizonTotal S.A.Software developerExtension (kinesiology)Computer animation
Software developerTerm (mathematics)Demo (music)Data typeElectronic visual displayWeb browserCuboidDigital photographyConnectivity (graph theory)Radical (chemistry)Different (Kate Ryan album)Instance (computer science)Source codeWeb pageComputer animation
Software developerScripting languageFunction (mathematics)Link (knot theory)Electronic visual displayDemo (music)ParsingComputer iconRadical (chemistry)Point (geometry)Data dictionaryHoaxQuicksortMetreObject (grammar)Connectivity (graph theory)Functional (mathematics)Event horizonSet (mathematics)Function (mathematics)Parameter (computer programming)Structural loadComputer animation
Electronic visual displayDemo (music)Data typeSoftware developerDigital photographySource codeStructural loadPoint (geometry)CodeConnectivity (graph theory)Web 2.0Slide ruleWeb browserComputer animation
Transcript: English(auto-generated)
Ah, a few people, at least. So it's Friday. It's the last slot in the conference, and it's a sort of niche topic. So that's kind of cool. Welcome, everybody. Let's have a chat about Web Components.
So first of all, I was a bit surprised when I came here on Tuesday, and it looked like this, because I expected. You know, I'm from Zurich, and you're kind of in this shitty, rainy, snowy weather. And you're like, oh, in London, it's not going to be any better. And then you get this. So thank you very much for whoever made that happen.
And as I said, I'm from Zurich, which is a nice little town in Switzerland where people think it's a city. And I do this with, together with other engineers on my team, we're doing WebGL in the browser. So that's a very different and very interesting topic as well. But let's focus on Web Components.
So before we start with Web Components, let's talk about HTML. Now, HTML has been around for quite a while now, as you might have noticed. And it has a few really nice benefits. One of it is it's declarative. So you basically declare what you want to see, and you most of the time get more or less
what you want to see. It also is reasonably simple to write and read and understand. So you easily can teach children to write HTML. And it's also very, very resilient. So if you're making a mistake in HTML, your browser will not throw an error and go, oh, I don't know what to do. You're not getting this dreaded blue screen
of death on the web. You should get something that is readable and more or less usable, hopefully. And it's semantic. So we can even write things like a search engine for it or actually implement sort of semantic data into it so that we actually can extract information automatically and sort of link this data, which is really, really cool.
Also, HTML has the benefit of being especially considering how a document and a content layout looks like. So the very first thing you have to think about is your content and how you sort of want to structure it if you want to do it right, which is nice.
For everything else, making it pretty, making it do stuff, there's other technologies to do that, JavaScript and CSS, that is. But as I said, it's around for 26 years now, so ish, 25 and a bit. And the cool thing is it still works.
So this might be a very, very old website from the very first couple of years of the web. And it still works if you go visit this website with your browser on your iPhone or on your Windows mobile phone or on Windows 10. It still works. No need to recompile, no need to run any weird plugins or stuff or no problems with dependencies, it works.
But it's crap, but it works. So how do we get here? How do we get to rich interfaces? How do we make it more application-like? How do we make it appy? How can we actually build into active applications with a technology that is primarily focused on document exchange?
Because that's what the web really is. It's a bunch of documents that can reference each other and we can have a flow from one document to the other so that we basically can gather information, even automatically as its semantic. But we don't really concern about that much. We are more concerned about actually building applications.
So it has to turn into a application platform. A lot of people then resort to just writing JavaScript and nothing else. And what you get is pretty bad. Because what you get is you get an application that when there is a syntax error somewhere it gives you a blank page.
You don't get semantic information if you're doing it wrong. You can do it right, you might get semantic information, but it's extra effort. Accessibility, people with screen readers or other tools have issues then extracting information from your JavaScript application. And again, it's not as resilient and it's not as easy to read
and it's not as easy to understand and oftentimes new technologies using JavaScript oftentimes merge concerns. So you have your behavior as well as your layout as well as your content in one place. That's suboptimal. So what do we do? Well, we build things like this. So this is supposed to be a filterable list.
So I have a filter input here that I can put something in and I have a list of things here and this list basically should reduce to the joke that matches what I'm entering in the search terms. And I do this by adding a piece like that of JavaScript.
So you have your filter term gets an event listener when I press a key and lift my finger from that key, I query all the LI elements, everything is in this list, go through them. And if it sort of matches what I entered, what I searched for, I then either display it or hide it.
Now try running this on a website that has another thing that also has a filter term input or just having three or four different lists of that. It's getting tricky. Try styling that nicely. Plus you have this piece of code here and this markup and this markup in itself,
basically when I just see this part, I just go like, oh, it's a random list of stuff. I'm like, and here's a random input. But actually there is another piece of code in a completely unrelated place that links this to this, but it has no way for me to tell. I'm losing semantic information here. If I'm looking at this, I'm like, yeah, I guess,
me as the human, that this label, okay, this label actually refers to this one. And probably because it says search for and there's a list, it might filter the list, but I don't know. So what can we do with this? Again, it's not really shareable.
It's not really reusable. It's not easy to use for other developers, nor users actually. So we can either go like, job done, buy, be a o'clock. But that's not really feasible because most of the times we're gonna be responsible for actually maintaining this. And guess what?
It's gonna be harder to actually reuse this anywhere else because it's sort of entangled with the application structure. So we can't really reuse it, so we would have to write it over and over again or adjust it and it's copy and pasty and huh. Or we can write a browser plugin. That worked really well for Java, Silverlight, and Flash.
Well, in that case, probably we wanna make it a web standard because I think a filterable list is kinda a useful thing. So let's standardize it, which should be reasonably simple and nice, right? Well, standards take a lot of time and a lot of developers on the web complain about that. But actually, that's not a bad thing
because it takes so long because we have to get all these browser vendors, and there's a bunch of them, as you might know, to sorta agree on something, which is a good thing, but it's not an easy thing to do because everyone wants to make sure that their product still delivers the best experience for everyone. And on top of that, we have to make sure
that people coming with older browsers, yes, Internet Explorer 6, for instance, don't get just a blank page. That's not the web. Then build an app if you want that. The web experience should give you something. So in this case, if I go onto this one with a really, really old browser with Mosaic
or Netscape Navigator or Internet Explorer 5, I get a list. Okay, sure, I can't search it, but then I can do Control or Command F and then search using my built-in search function, which is not as nice, but I still get the content. I still get the information, even if this fails.
And it will fail because it uses querySelectorAll, which is not supported in older browsers. So standardizing, on the other hand, takes long and is, as Steve Faulkner says, apparently a quite emotionally involved process. Let's put it that way.
So what can we do? What can I, as a developer, do then? Am I out of options? Switch for Java or Silverlight? No. We gonna build new HTML content, new HTML elements using HTML, CSS, and JavaScript.
And you might think, what? Is he insane or something? By the way, this is SAS flights snacks, and I loved it. I was like, this is nuts. I'm like, ah, I see what you did there, SAS.
I didn't know that I would actually be able to put it onto a slide, but hey, there we go. Achievement unlocked, I guess. Gamer score increases. So how about having this? So we have some sort of link to some sort of URL. Ignore that. And we have a list, and it says here, right in the list,
it says, this is a filter list. So I'm like, ah, filter list. So probably I can somehow have the user filter that list for a search term. And then I just have the list items, and that's it. That would be nice, wouldn't it? So let's see how we get there.
So when we talk about web components, what we really do is we're talking about four different standards. And we're gonna look at each of these individually. First of all, one of them is already a recommendation. So it is through the nasty and stormy process
of becoming a web standard, which is the template element. It's about to be implemented in Edge 13. So it's there, it's ready. Everyone, all the others, all the other three are still in working draft. Which means there's still changes being made. It's not well supported yet in all the browsers.
But we're gonna see how to tackle that anyways. So let's start with the template element. So what is the template element? Well, it tries to solve a problem where we have to somehow have a placeholder that then gets replaced with real content. And that can be done in many ways and in many very inefficient ways.
So, and here's an example. That is a physical piece of paper from one of the Swiss banks that shall go unnamed for the moment. And a friend of mine got this and his user ID apparently is just this placeholder. And we're like, nice.
That's, good job, perfect quality. And so we wanna avoid sort of flashing unstyled content to the user here. And we want some way of actually being really, really fast and really, really efficient in actually distributing template content. And how do you do that? Well, you can do that, as I said,
pretty much now as it is a recommendation and it is in all major browsers. And it will come to all evergreen browsers soon. The polyfill is reasonable. So there is a polyfill. There's multiple polyfills actually that allows you to actually use it today. The vendors agree as well.
And it looks like this. So you have a new tag called the template tag. And in this tag you can place anything. Style sheets, JavaScripts, images, videos, all, everything basically. And the cool thing is all these things will be inert.
That means images will not be downloaded immediately. Videos won't be downloaded immediately. Scripts won't execute. Everything is sort of waiting to be inserted but it's not in the document yet. It's just waiting somewhere in memory for being instantiated. Who here has worked with document fragments
before Show Hands? No one. Who here has used create a document.createElement to create content? Okay, who here has used something like mustache or handlebars or a few? Okay, so basically at the very, very basic level there's multiple ways of getting stuff into your document, into your application, right?
One way of doing it is you have a string representation of the entire document and you just change the string. Which is pretty horrible because your browser then has to take the string, parse it into HTML, prepare it to be actually inserted or instantiate all the different elements and then insert it into the document.
It's really, really slow and that's funnily enough what most templating languages like handlebars and stuff use. It's not that fast. It's fast enough but not that fast if you do a lot of changes. Then you have the possibility to say, well, I'm gonna create a node in memory and I'm gonna fill it in with other nodes.
I create or I do document.createDiv. And this one, like I said, outer equals document.createDiv, outer.class equals box, yada, yada, yada and then append child and then you append it into the actual document. That's the second way of doing it.
It's a bit faster because you're creating the elements directly and you don't have to do string parsing beforehand. You don't have to tokenize the string and parse the string beforehand. You basically just create instances and then you hook them up with a DOM. But they're live which means basically the browser puts them into the DOM more or less immediately or in the DOM thread more or less immediately
and is ready to render them but you're not ready to actually render them because you have to fill them in first and then you actually append them and then it gets rendered. So it's faster but it's not that fast. And then you have this thing called document fragment. With document fragment, you have your documents and you create a new piece in memory aside of it
and you say this has nothing to do with this thing over here. Here's the application, here's my document fragment and then you do all your document create and append child and thing here. So basically you build a small tree and then you say hey browser, this tree over here goes there into the application
and then the entire document fragment is just linked. It's just referenced into the DOM. That's really, really quick. There's pretty good nice micro benchmarks to demonstrate that as well. Unfortunately the micro benchmarks died at some point because it ran out of disk or something and now the benchmark results for this particular benchmark
are not available anymore but the test still runs so if you want to try it out, you can try it out later. I can show you the link. So yeah, and basically this template element is a document fragment. The difference being I don't have to program that all in JavaScript because JavaScript is nice and fine and it's cool and it's functional, object oriented-ish
and an imperative programming language so it's really nice but it's not declarative. And it shouldn't be concerned with this. This has nothing to do with my application logic. This is layout, right? So I'd like to keep it in HTML. I can, thanks to the template element.
So that's quite lovely. So if we want to use that and actually get this into our application, that's where behavior comes in, right? Here's behavior. Our application does something. It just loads this template and does things with it. So here we're getting the content
which is the document fragment as I described for this particular template. We import it into our document and then we can fill it in with an H1 for instance shall have the text content message and the diff shall have the text content hi I'm a message box and then we actually plug it and we actually reference it into the document
so the application now displays this and runs the scripts and runs the image downloads and all this wonderful things. Nice. That's not too complicated. Shadow DOM is the next thing here. Shadow DOM tries to solve this problem of tight coupling.
So with the template element you still have the problem that all your styles see everything including the things that you just put into the DOM, right? You have this message box and you might want to style the headline in the message box by making it red, right?
But if you just go like H1 so all my headlines one shall be red then all the headlines in the document are red and also what you might not want is you might not want another piece of the application going possibly there's a script that goes through all the headlines and capitalizes them and you don't want that to happen to your message box.
So this application over there that you don't know of at this point might do something to your content and that is a problem. So this is what Shadow DOM sets out to fix. But unfortunately polyfilling that is really, really tricky because there's a thousand ways
of actually going through documents and actually enumerating their content. So it's really, really hard. There's a 30 lines regular expression somewhere in the polyfill I want. So I'm like yep, nope, I'm not gonna touch that. And there has been a lot of discussions until recently how to actually implement things
and how they want to do things and there's gonna be a version two that does a few things differently and nice and gives you more options but the basic version one has just been agreed on in July by all major vendors but there's still changes pending so a lot of things that have been agreed on are not in any browser yet that includes Chrome, the regular Chrome on your computer as well
and the spec is really in flux. So when you check when the spec has been edited it's probably today. I checked yesterday, it was yesterday definitely so I'm like huh, okay, I'm not gonna screenshot that because it's gonna change anyways. And this is what it does. So here we have our document object model
so we have our HTML which encloses the entire application we have the body that is the bit that you actually see we have one headline here and we have a div that is the host of a shadow DOM and it has its own little tree which is a very boring tree which is just this other headline one
but it's enclosed, it's hidden so if an application runs on this level and asks like how many H1 elements are there in this document it's gonna say one because this is hidden, right? Do not mistake this for a security feature though there is ways of piercing through this border
so there is ways of actually grabbing into this content it's not a security feature it is made for encapsulation so that means no one can accidentally go and change the internals of your components but if they are determined to do so
they shall do so which is nice because actually for instance the video element is implemented as a web component in Chrome so it has a shadow DOM and inside that shadow DOM somewhere there is the slider which is also a web component it's web components all the way down
and if you wish to sort of change the color of the slider for instance you can do so by actually just getting the right selector that crosses the border of the, so basically that goes, if this is a video element it goes hop, finds the slider and changes the background color for instance or the handle color so it's possible and it's quite nice and because it's nice people go like
we should remove this and there is talks about removing that because it might be confusing for people to actually sort of have stuff tempered with inside their component there should be inheritance over doing that but that's nice anyway. So this is how we use it we have a template here as well
we've copied the template we fill stuff in all the same but here we create our host element I could have had a diff element already but I just chose to create one and then we do create shadow root and this makes this element host a shadow tree
and then by appending to the shadow tree so our template goes into the shadow tree it's not reachable from outside, nice. Also there's ways of getting content into a shadow DOM so there's possibilities to do so declaratively from the template which I'm gonna show later which is nice
but what was I trying to say here? Oh whatever, so it's quite nice it's well isolated and yeah this application could now not actually reach this particular headline in here which is nice. Next one, third one of the four
is custom elements. Custom elements try to solve this problem that I now have templates I now have shadow DOMs but I still have a lot of code lying around and I can't just declaratively say hey I want a message box here there's no way that I could do that or a tab or a slider
but I wanna do these things because maybe this filter list example that we had at the very beginning I want it to look like that I just want a component I just want an HTML tag that looks like the browser has it built in but in fact someone nice wrote it for me or I wrote it myself. The status is there is polyfills
that do that quite nicely it's possible to progressively enhance but they're discussing because it's hard to implement in browser vendors are not really inclined to do that let's put it that way Chrome has an implementation that they consider not nice and as I said it is tricky
to get this right so they're like well probably remove it for the moment but generally they are interested in making it progressively enhanceable so like the video element where you can actually host embeds and images and whatever in that the browser falls back to if it is not supported that's more or less how you can progressively enhance
a custom component imagine you have a component that displays a Google map that's an example yesterday I was in a pub unrelated story and I completely randomly met a guy who goes like oh you're talking about web components I built a cool web component and that's his web component that I'm going to talk about oh London and it always starts like that
I was in a pub dot dot dot that's when it gets interesting anyway so he built this web component that is an image so you get an image but if your browser actually supports web components it takes information from the image and additional attributes that the browsers ignore
and uses these images to display a Google map so if your browser is capable and there's no weird network conditions you actually get a nice interactive Google maps interface that you can use and actually delivers data to the rest of the application but if everything else fails you still get a static map image
not bad you can then click on the map and actually it takes you into a new tab that opens Google maps so that's quite lovely however the API is about to change so there's still a lot of discussions but when it's mostly agree but certain implementation details might change soon so your mileage may vary
depending on what you do you can use it or cannot use it GitHub for instance uses it as well so when you see somewhere like two hours ago or three days ago or 15 minutes ago that is a custom element and it uses the daytime elements so if your browser fails or the polyfill fails
or you don't have JavaScript enabled you still see the date the normal date and time but if it actually supports and I think you all see like 15 minutes ago on when you go to GitHub and check out when comments have been done then you actually see a custom element which is nice and this is how it works
so you create a new prototype object you inherit from any sort of element that you want to inherit from so it can be another web component or in this case I would basically inherit all the methods and all the behavior from an image element and then we have lifecycle callbacks so this one for instance is quite nice
because it tells you when the browser has registered it and now has loaded the functionality so basically you see an image at some point the browser loads your JavaScript executes it and then you have something else and this is the point in time where that happens so here you can actually clone all your things and then at some point it actually puts it into the DOM so the user then starts to see it
and that's when the attached happens there's also detached and destroy callbacks and attribute changes so you can basically react to everything that can happen to your component and you say and this is about to change so this is the bit that definitely is gonna change you say register element X-GIF for instance custom components always have to have a dash in their name
so that the browser can determine aha this is a custom component and nothing that I have built in so here it's X-GIF because I'm not very creative and you give it a prototype and then optionally and that's probably gonna go away you also say hey this extends an image tag so this is the easier way
of progressively enhancing this you can also use then new X-GIF for our GIF how the inventor wants to be called it's not it's graphics graphics interchange format it's a GIF get over it anyway so you can then use this to programmatically
from JavaScript from within JavaScript create new elements or you just do this so this is one way of doing it you just go like X-GIF a source maybe you have a speed that varies how fast it actually is rendered if it should automatically start or if it should just start with the first frame and so on and so forth
this component exists I'm not making it up or you do the sort of easy way of progressively enhancing which is probably gonna go away which is this one you say you have an image with a source and some attributes that are not supported by image but it's an X-GIF
so it's gonna use your component once it's registered to actually enhance it with this feature so you see your image and then it improves into a GIF player whatever and here's how it works together with Shadow DOM because this alone does not fix the problem of everything in the application
being able to meddle with our template but this does so in our template we can have something called the content tag again this has changed recently in the specification but has not been implemented anywhere yet so even the polyfills do not react to it that's why I'm showing you the old way this is the way that it works today
be careful this may change at any point in time soon so we're having a content element and we can specify a selector we're gonna see what that does in a second and we can have multiple of those and unless so basically if this would be the only one and wouldn't have a selector so if this would be the only one here in this template
it would get everything that is inside our component so for instance if this is the only thing they will say news and then London surprisingly nice weather and breaking news JetBrains launches rider and so on and so forth but here we are doing something interesting because the control of how the content gets put
into our Shadow DOM is with us so here we can specify we want the breaking ones first and all the breaking ones so if there would be multiple breaking ones here they would all go first so they would all go in here and then everything that's left goes in here
so this is quite nice so we can now programmatically sorry declaratively sort of fill in our Shadow DOM which is nice but we still haven't found a way to actually get this playing along nicely and this is exactly what you wanna have you want to have sort of Lego
to build your modular applications you have a bunch of components and these components might use other components to do whatever they are doing and you wanna put them together to an application so you somehow need to link them together and get them into your application and get them to sort of make it happen and make it go nicely make the little dance of initialization for you
HTML imports is also a troubled one unfortunately there's still pretty big disagreement on how it should work in vendors so Mozilla and I think Apple as well no, Microsoft and Mozilla I think are the two that said we're not gonna work on this
because we wanna see what we're doing with ES6 modules or ES2015 modules so JavaScript gets this way of loading modules and they're like well we could probably use that rather than a hard to implement HTML tag the polyfill works has a bunch of drawbacks but works
so it's possible but I wouldn't do it right now especially because it might have performance implications because it does not allow to actually asynchronously load things it basically when you put it in your hat tag it halts the execution or the passing of the rest of your page
it waits until it has downloaded the other one all the components and then actually parses them and registers them and then it goes on with your application that's not optimal there's ways around it if you search for HTML imports performance work around you find someone who has suggested some ways
of fiddling with JavaScript so that it actually only triggers afterwards so like when your page is ready you actually start loading the components but again mileage may vary and this one is the seemingly the easiest one but actually apparently the one with the most uncertain future
and this is how it looks we saw that at the very beginning you just say I have a link which has the relation of an import and I'm importing from this website that has a component in here and then you use the component done
so that's the four standards now how do other languages or how sorry other frameworks do this there's a bunch of very popular frameworks that you might or might not be familiar with who here has been working with angular one or two angular two
okay ember okay I expected so react uh huh okay AureliaJS come on there was a talk you should have been playing by now but you were drinking weren't you anyway yeah where was I oh yes
so and then there's vue.js who has used that or heard about it okay that's quite nice check that one out so they all sort of have looked at this and went like well you know angular two said actually we're gonna use web components because they're kind of cool and we're gonna use all of it
which is brave ember went like well we don't think it's ready yet so we're gonna basically re-implement everything but we're gonna make sure that we stay in sync with the specs so when you write ember components you're basically in sync with or hopefully in sync with how the web component specs look like
so you can then when web components actually hit or they can then for you switch over to real web components which is nice react went like nah okay fine by me Aurelia went like they're nice we're not gonna use them by default but you basically you can use them
in Aurelia apps and you're gonna have data binding and everything so it works nicely and it's compatible and interoperable and we are watching them so it's like okay cool and Vue.js is pretty bold and goes like template element dibs so they're already using it nice and it works pretty well I have to say now we know that a bunch of frameworks
consider using them and that you can use them in your browsers using polyfills or parts of them actually of web components but what makes a good web component well you shouldn't have an application component that has your entire application in it because it's not really that reusable fun fact you can do that
I've seen applications running as a component in another application because why not but it's not really practical also make sure that they are self-contained so if I have to install Polymer as well as your web component you're doing it wrong or if I have to have jQuery on my website
because your web component uses it internally don't please don't it just makes my life harder especially if for whatever reason I have a third-party library that has a different version and then we have conflicts and nah don't hide it all in your web component you can do that that's what templates are for it should be accessible so I failed that one
I wrote a tabs component and I only recently noticed that I don't do the keyboard access so if you write something crazy that is not supported by your browser natively then make sure that it's accessible the shadow DOM itself is not a problem for screen readers because it gets reflected back
so everything that shows up in your shadow DOM shows up in screen readers as well you get that built in also if you do this extends thing so basically you have a component that does form input for instance and you're extending it with other form inputs as long as you don't do crazy shit you're safe you will be accessible because it's baked in
that's kind of lovely make them performant so if you're calling APIs make sure that you sort of do that asynchronously and not sort of block the browser by doing some weird stuff also don't try to avoid layout thrashing so layout thrashing is basically the browser tries to be clever so if I change something
if I change a property if I say hey make this 20 pixels larger the browser doesn't do it immediately but actually waits until he has to redraw something else anyways and sort of tries to batch this together so if I have a list with 5,000 elements and I make them all change color for instance that's fine it's not gonna be horribly slow
because the browser goes like oh let's wait what he does and if your code runs fast enough and changes them really really quickly all the colors then the browser will do one repaint however if you ask what color you just said like basically you go like color equals red and then you output color for something like and append text
this is now plus this dot color or this style dot background color for instance and then what happens is the browser goes like okay he wants to change that I'm gonna put that onto my list to do oh he wants to know what the new value is ah damn it okay so fine I'm gonna repaint now I know for sure it's red
so yeah red there you go and then you do this 5,000 times you have 5,000 repaints and then people go like the web is slow we're gonna implement it in Canvas losing all accessibility and semantics and go on Hacker News and get slashed for it so yeah that's not really cool also make sure that you expose
useful properties and useful events so that other people can actually hook into it and use that and extend it because that's what makes it really really powerful so basically if I have a map component I should expose a say center
property and an attribute and possibly a click handler so that I can actually listen to clicks that happen on the map and probably not just get the position on the map as in screen coordinates but maybe extend that so that you actually also get map coordinates that would be so cool because I can then easily extend it
so very important in summary this is what the environment looks like right now so we have it all spec'd which is a lie because the spec still changes we have it all polyfilled which is a lie because shadowed on polyfill
but it's mostly done it's possible it has a bunch of pitfalls so be careful with that one it's all stable in Chrome and Opera including Chrome and WebView I think it is on Android it's coming to Firefox so shadowed on and custom components are hidden behind flags
which is not very user friendly so ignore them you're gonna have to polyfill this as I said yes it is Mozilla saying we're gonna hold this one and it's Apple saying we're not gonna implement this one but as you can see across the line starting from Safari 8 and starting from Edge 13 we have templates already
imports are on hold and no active development from Mozilla and Apple please go and vote for Edge to implement the two missing specs possibly also this one because if there's two then hey maybe Apple and Mozilla reconsider their idea and generally start using template
it's useful it is fast it is really fast start trying or start playing around with custom elements use polyfills be aware of the problems that polyfills have you can use them GitHub does that in production so it can't be that horrible
of an experience but don't overdo it just yet as the spec may change and maybe the polyfill might not catch up that quickly shadowed on really cool stuff really really useful really really helpful but not quite there yet keep an eye on it play around with it
make sure you understand how it works there's brilliant articles on HTML5 Rocks about it same goes for HTML imports but I wouldn't use the last two for anything in production just yet but if you have something that internally and you know most people access it in a certain environment like you know everyone is on IE
sorry on Edge 12 then start playing around with that one but I wouldn't put it out to the public just yet there is as I said a bunch of interesting frameworks Polymer is definitely an interesting candidate having so basically web components JS is the polyfill that polyfills the entire platform
so all of it but that's the one that also Polymer uses internally and Polymer has this philosophy that everything is a component when you end up with a component that is your application you're like okay there's X-Tags which is strictly not using the standard features from web components
but some JavaScript hacks basically but it's quite interesting to get a feeling for how web components could look like when you work with them and then there's the document register polyfill from the guy that I met at a bar yesterday and it's really really cool and then there's a template element polyfill which is quite nice and small
if you wanna get going with this and have to support IE six or seven or eight I think it goes down to seven that's what you wanna play with probably and with that we have the part where you can start questioning me if you don't have questions I have live coding
so hey we're already set up flights are already online ping me on Twitter or write me an email if you have any questions you don't wanna ask in the big round and in that case thank you very much and I'm taking questions
I made some fans back there and I didn't even bribe you with Swiss chocolate wait a minute you've got some you're like ha and my microphone dies right now
any questions? I was like what the hell is happening I see it's Friday you wanna get to the pub to have your own no so where's my mouse cursor so I promised some live coding just to see that I'm not lying to you
hi Facebook hi Anna how's it going freaking shitty weather take that Zurich so I happen to have some lovely they're actually sick poor bunnies
I happen to have some web components online so how about we get them into yes it's X tabs X tabs X tabs dot HTML and then I have a second actually where wait a minute
oh that's J's fiddle okay I was like wait a minute J's bin usually has the site ready as well so actually I don't know if no you can probably not read that that wasn't very clever of me let me increase font size a lot oh now shit goes down all right
okay that was geez give me more space to breathe right doesn't it get any better so I'm gonna zoom out a tiny little bit again 250 is too much for them if you can't see there's a lot of spaces right in front of me so just get closer
GitHub dot IO X tabs X tab dot HTML it's a fun one because the resolution is larger than my actual screen resolution so and now I can start using them and so I can say like okay I have a bunch of X tabs and I have one that has a label
first hey there London and I'll have a second one that has a label second I'm super, super
creative today yeah and run it on the weekend and if I run this it doesn't work because screw me that's why what where did I mistype something right I don't trust JS fiddle
I usually do JS bin I prepared something I'm not taking any risks with this stuff so here we have the same thing so where was my actual mistake did I mistype the URL I don't know this one doesn't work anymore as I noticed because they now actually have a license for a freaking API
so I would have to pay them so I'm like yeah no it's gonna happen good job everybody and they made so much money on me and here we see that we have the different tabs whoops it does weird thing when it comes to okay and I can then go in and actually so here what I did
is here you see how you use CSS to cross the shadow border right so this shadow property here says that I can actually reach into into my component and when I investigate how this looks fruition here we go make it a little
this isn't really zooming in is it beautiful we can see that here it says shadow root right and you see that there are you may see that inside the X tabs there is a naff element so what I can do is I can go I can probably use the console
because it might actually be nice I can go and query selector all nav there is navs within the shadow dot length I get zero there's none but what happens if I do
shadow nav I got one because there's exactly one element in there which is just hidden behind the shadow border and the component looks more or less like this now that we are having it on GitHub we can easily have a look
at bullshit that's the one how this looks internally so here is the X tabs component for instance that is really small here I can probably zoom in a bit more yes
so we are having a bunch of style elements and here is for instance I'm actually making sure that the element that hosts me is showing in a blocks level style I then style all the things inside my template I have my template and here I'm saying okay I want all the X tab elements so if I would put a div in here
it wouldn't show up in my actual element because there's no content element that takes them good we also have this empty list for navigation here which will turn into the labels on top of it that you can click on we create using a div element
and then we have functions like toggle tab that does some bits and pieces and we have created callback created callback takes the content element the template content puts it in and then when it's attached and only when it's attached the only one the user can actually interact with it we do something that I haven't been talking about which is get distributed nodes
so this allows us to figure out what is it that the user is putting into our component if I have to do something with this information and here with the X tabs element I have to I wanna know what X tabs I have in there so I can extract their labels and put them into my navigation so I have this wonderful top level bar
so to get the information that this and this and this exists and to be able to display that up here I have to do this I have to actually figure out what is it that got sort of put into my application and to do so
I am asking for the distributed nodes I set the first one to active which gives it the distinct style and then I'm querying my UL this is the navigation bar I go through all the tabs that have been inserted and I create LI elements and yada yada
and then I ask them for the attributes.label so that's the label that we put into our X tab and when I click on this navigation item I wanna toggle tab which is this internal function that actually sets this other component to active why do I even bother with this active stuff? Well that's the reasoning behind that one
is in the X tab which you can see here so this one makes sure it's always invisible except its host element which is the X tag itself has the class of active so the X tabs toggles this class and my component, my X tab component
responds to this this also means you can theoretically easily throw away my X tabs for something else and just use X tab if you so wish. This one is rather boring again just clone stuff has nothing in the attached callback that's it and here you see a work around because of the polyfill
so the polyfill for imports sets underscore current script and only a browser that supports HTML imports properly has document.current script that's a bit shit and that's how you get this and there's a few components you can play around with I'm making sure that all my components
are vanilla components so you don't have to install anything they are self-contained and they are nice and there's things like the photo box which might not work because my browser recently started noticing that my camera isn't something that he wants to use okay fine but here's a here for instance is a fake terminal
so I can go in this is really small again so we get this and I can say something like hello London hooray let's see if the weather API still works
no it doesn't that's when it breaks if we look into the source code of this page it loads the fake terminal component and then it sets up fake terminal and down here we're having an object with a bunch of functions which basically can take parameters
and then just define what they're gonna output into the HTML and down here I'm saying okay I have this fake terminal somewhere here and if it's ready I wanna set its commands to my commands dictionary and if it's ready loading I do the same so basically whatever if it's already ready nice
if it still has to sort of trigger its unload event then I'm just using that to sort of set this so I can program my fake terminal from outside we also have the code sandbox which is a fun one I used that one for a talk at some point
because what I can do here is I can write oopsa yes I can write code and it gets actually automatically executed and the fun thing is I can use this to write code that registers a custom component and uses it and it runs it in the browser so it was quite fun so I was doing web components in a slide deck
that was made out of web components on the fly that's it if you have any questions reach out thank you very much for your attention and enjoy your weekend thanks
I think I'm over by 11 minutes now