Web Components: A whirlwind tour
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| 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 | 10.5446/48936 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC London 201682 / 133
2
6
10
12
15
17
23
24
28
30
31
32
35
36
39
40
43
44
45
47
51
52
55
58
59
60
61
62
63
64
67
69
71
73
74
75
82
84
86
87
97
103
107
108
111
112
114
115
117
120
123
126
128
129
132
133
00:00
Software developerComponent-based software engineeringSystem callBitConnectivity (graph theory)QuicksortJSONXMLUMLComputer animation
00:41
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
02:29
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)
04:34
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
08:51
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
10:49
Software developerElement (mathematics)Template (C++)PasswordPhysicalismQuicksortFree variables and bound variablesGoodness of fitContent (media)Perfect groupMoment (mathematics)Data miningProcess (computing)Computer animation
11:38
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
17:00
Software developerAcoustic shadowCartesian coordinate systemScripting languageContent (media)Element (mathematics)CuboidMessage passingPoint (geometry)Right angleSet (mathematics)Internet forumReading (process)Computer animation
17:50
Acoustic shadowSoftware developerRegulärer Ausdruck <Textverarbeitung>NeuroinformatikContent (media)Graphical user interfaceComputer configurationRevision controlWeb browserLine (geometry)Object modelTouchscreenBitCartesian coordinate systemFluxComputer animation
18:56
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
22:02
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
25:18
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
29:37
Software developerModul <Datentyp>Cartesian coordinate systemConnectivity (graph theory)QuicksortPhysical lawModule (mathematics)Web pageMathematical optimizationMessage passingEndliche ModelltheorieStructural loadComputer animation
31:40
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
38:03
Software developerWeb browserAndroid (robot)Integrated development environmentGraphical user interfaceTemplate (C++)VotingGraph (mathematics)Line (geometry)Software developerLie groupConnectivity (graph theory)FlagDreizehn
39:18
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
45:01
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
50:40
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
51:25
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
52:12
Electronic visual displayDemo (music)Data typeSoftware developerDigital photographySource codeStructural loadPoint (geometry)CodeConnectivity (graph theory)Web 2.0Slide ruleWeb browserComputer animation
Transcript: English(auto-generated)
00:06
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.
00:21
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.
00:40
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.
01:02
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
01:21
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
01:42
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.
02:04
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.
02:22
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.
02:40
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.
03:01
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?
03:21
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.
03:42
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.
04:02
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
04:21
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.
04:42
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.
05:00
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.
05:22
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,
05:41
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,
06:02
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.
06:20
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?
06:40
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.
07:00
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
07:21
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
07:41
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
08:02
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.
08:21
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.
08:42
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.
09:01
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.
09:20
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,
09:41
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.
10:01
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
10:23
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.
10:42
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.
11:02
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.
11:22
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,
11:43
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.
12:00
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.
12:20
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
12:41
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?
13:03
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.
13:22
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.
13:42
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.
14:00
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
14:22
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
14:43
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
15:01
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
15:20
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
15:43
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.
16:03
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
16:21
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
16:42
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.
17:06
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?
17:21
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.
17:42
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
18:01
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
18:20
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
18:42
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
19:01
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
19:21
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
19:43
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
20:01
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
20:20
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
20:41
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
21:01
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
21:20
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
21:40
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
22:00
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
22:20
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
22:42
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
23:01
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
23:22
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
23:43
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
24:01
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
24:22
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
24:41
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
25:00
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
25:21
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
25:41
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
26:01
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
26:22
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
26:41
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
27:01
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
27:21
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
27:41
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
28:01
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
28:21
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
28:42
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
29:01
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
29:21
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
29:41
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
30:03
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
30:20
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
30:43
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
31:01
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
31:22
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
31:41
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
32:01
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
32:21
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
32:40
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
33:01
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
33:20
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
33:40
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
34:02
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
34:21
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
34:41
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
35:02
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
35:20
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
35:41
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
36:01
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
36:22
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
36:42
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
37:02
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
37:24
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
37:41
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
38:00
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
38:20
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
38:42
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
39:03
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
39:22
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
39:41
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
40:00
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
40:22
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
40:41
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
41:01
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
41:22
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
41:42
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
42:04
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
42:22
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
42:43
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
43:01
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
43:20
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
43:40
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
44:02
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
44:25
first hey there London and I'll have a second one that has a label second I'm super, super
44:42
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
45:00
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
45:21
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
45:41
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
46:01
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
46:20
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
46:42
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
47:01
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
47:21
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
47:41
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
48:00
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
48:21
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
48:41
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
49:02
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
49:21
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
49:42
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
50:01
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
50:20
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
50:42
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
51:01
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
51:20
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
51:41
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
52:01
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
52:20
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
52:43
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
53:03
I think I'm over by 11 minutes now