 Next speaker is Martin Naelman. I was just chatting to Martin a bit about himself and he sort of says that his job is just to come up with and implement crazy ideas. So that sounds quite cool and that he likes doing scary live demos. So hopefully this will be a good treat. Martin contributes to Meet Your JS, he also contributes to Firefox OS and is one of the team behind Numbers, which is sort of in the banking javascript world. Last night he built his own slide deck software because he realised that if he's going to talk on web components he should really be using some slide deck software that's built in web components. So we were checking earlier that was going to work and hopefully fingers crossed it will. So a big warm welcome to Martin Naelman. Hi, thank you. All right. Hi everybody. Thanks for having me here in Barcelona. It's really, really nice to be here. It's really, really cool to see all these great people here doing great stuff and especially the talks yesterday rocked it, today rocked it and I hope I kind of give something nice as well. By the way, Barcelona is really, really nice if you have not been here before or if you're not from here, just walk around the city. This is actually a picture I took while being on one of these touristy buses. So what I do is, as I got introduced as well, I work for Numbers, which is the product of Central Way. I'm the tech ambassador. So I'm talking to guys outside of the company, developers and as well as engineers inside our company. And I work with a ton of different technologies. There's Go, there's Ruby, there's Javascript, there's Java as well. We're doing banking, right? So we have to have some sort of Java contact, I guess. And I'm from Zurich and some people yesterday and even someone on this speaker's dinner said like, oh, Zurich is pretty boring, isn't it? And I'd just like to slightly sidestap here and say, no, actually it's not as boring as you may think. So there's a couple of days ago actually what they did as every year on the end of April to sort of say goodbye to winter, which looking at the climate data from Switzerland is very optimistic to do in April. They basically built this huge snowman full of explosives and set it on fire. So obviously that thing blows up at some point. And the fun thing is why are we doing this? Well, you know, first of all afterwards you can have great barbecues with all the rest of the wood that actually lies around and it's still pretty hard. And sort of to say goodbye winter, hi summer. And the legend says that the time it takes from setting it on fire, the snowman which is called Burke actually. So the time it takes from setting it on fire to it actually blowing up will tell you if the summer is going to get warm. And Switzerland wouldn't be Switzerland if we wouldn't actually analyse the data. So here you see, you can see on the y axis, on the vertical axis, you see the temperature, the average temperature, and on the x axis you see the time it took to actually blow up and you don't really see a correlation here. Someone on Twitter actually then took this picture and just threw a random line and went like, yeah, that's exactly how it goes. But still it's fun, right? I mean, who else is blowing up a snowman just for the fun of it? Right, anyway, so actually I'm here to talk about something completely different. So let's talk about it. Web components. So who of you ever has heard of web components before? And keep your hands up if you have used them. It's still pretty good. So to understand what web components are for, you have to understand sort of how the web came to be and how it became so successful. So now while we are trying or we developers are tending to go all in our wonderful world of programming and try to express everything as programs, that's not what many other people do. So originally the web came about to be sharing your research results so you needed something that makes documents. And it turned out that actually it was pretty easy to build stuff. Like this little girl built awesome stuff with awesome building blocks and so HTML sort of came to be the awesome building block. At some point you separated out the presentation from just the content and then that became CSS and then you had some interactivity with JavaScript. So the problem is that that wasn't really meant to be any sort of really super bonus interactive thing. Though we have seen today that you can build awesome interactive applications but applications are very different from being documents. So you came from these very, very simple forms, very, very simple building blocks to super complicated, sophisticated UIs for applications. And not just the UIs, also just applications were built with this, right? We could build a banking application for example or you could build a game or whatever with these building blocks today. But that became more complicated because we needed to sort of keep backwards compatibility with what is out there and the standardisation so that you do not end up in the situation like in 1999 or 2000 with IE. The standardisation needs to be well thought out and actually well executed as well which just takes some time. So the standard bodies couldn't really keep up with this. Unluckily. And that ended up with stuff like that. So this is a filterable list of Chuck Norris jokes and you could then go for I want a dad or I want something where he kills something, alright. So the problem with this is, so yes, we use the very, very simple basic building blocks to build such a thing. The bad thing about this is that we are sort of mixing it in into the rest of the application so it is not really encapsulated. It makes it really hard to compose it. This thing is horrific to maintain. Imagine that something else has for some reason something with an ID of filter term and then this whole thing blows apart which is easy to spot in such a simple case. It is really, really hard to actually figure out what's going on if you have a really sophisticated application that is composed of lots of modules. And that's sort of the problem that many, many libraries and frameworks try to address. There's, for example, Blade Runner that we heard about which tries to do this thing with blades and components and then there's Angular Directives and a lot of others try to sort of do this encapsulation as well. So that is where the, hello? That is where you ask yourself when you build something like that, how do I move on? Now, you could just leave it like that or package it up as a jQuery plug-in and just hope that it never, ever blows up anywhere and you get blamed for it which is not really the best attitude to this sort of stuff because it's your code and you're sort of responsible for it as well. You can try to directly go into the browsers and sort of do the native implementation and sort of hide it away from your user by encapsulating it by making it an actual component or an actual part of the browser. But then again, there's tons of browsers and there's pretty much more fragmentation to come maybe with mobile devices. So that's a hard thing to do as well. And maybe you're not that much into C++ or Objective C for anything else. So not really a way to go. So that leaves you with actually making sure that you're talking to the standards bodies and making sure that it becomes a standard. And that is a very idealistic goal nonetheless. Standards bodies have to take into account what is out there and it's a democratic thing that's going on and so there's lots of hard discussions and lots of reasons not to do something though it is awesome to do and it just takes a really, really long time. I want to give a shout out to the W3C guys. They're doing a really, really good job at that and they're really, really working hard on this stuff and I don't want to be in this discussion and I actually as a web developer I have to move on, right? So I built this component and then I'm like, yes and now I want to at some point reuse this thing or actually give it out to the world so others can use it as well. I don't want to spend two hours a day in some sort of IRC channel where I get shouted at on having seen something and that's where web components sort of come into play. So the idea is instead of having us muddle through with all these technologies on very, very shaky grounds it is creating a set of standards that is there to just give us a proper method of encapsulation and reuse and composability of all the things that we just created and they should to the user and that goes back into this building blocks idea of HTML to the user it should just feel like it was part of HTML forever. I don't want to do any jQuery stuff where I have to go like oh yeah and then you need that library and that dependency over here or you just use Bower to install all these magical dependencies that are over there and then you have to have this CSS and then you need the theme to make it pretty or this and that. It's really complicated for a user who's not really into programming. Imagine a designer just going like I just want to demo to my boss some concept and I just want to drag a component somewhere or write a component, declare a component somewhere and then just have it work. So this is where these standards come in. So web components whenever someone says web components think of these four things there's the fifth one which is not really specced out yet which is decorators but ignore it for the moment practically these four cover your basis. So and I'm going to go into details with some examples for each of these four and you're going to see how they play together really really well to build composable things which also takes some pressure off the standards bodies because then we can just pretend to actually have it sort of in the language already or in our toolbox and then they can go actually that thing 95% of the people use and that thing is a low hanging fruit so let's just standardize this thing and actually deliver it in a proper way. So what you do is you use the building blocks you have HTML, CSS and JavaScript to build new elements and new components that you can then just plug together and have it working. Whatever your component is depends on you it could start with a filterable list like I did it could go on with a photo booth app that you just plug in into a complex application like I don't know Spotify or Facebook where everything could be a component like imagine Spotify has the playlist and that's a component that is actually built into another component that is the thing that you see and then inside there there's more components. So this is how the slide deck is done by the way. This is one huge component that's a slide deck that takes care of moving slides back and forth and styling slides generally and then each slide is one component that takes care of displaying itself properly and then you see these live demos are another component that allow me to load a file display it on the left-hand side and actually run it on the right-hand side and updating it and all this kind of stuff. So let's start with the template element. That one has been around pretty long and is actually pretty well supported in browsers nowadays except for Internet Explorer unfortunately but you kind of expect that today. By the way, I'm trying to sort of balance future in today's with the counters so at the end I'm going to ask how am I doing and I'm going to try to balance it out again. Anyway, so yeah, we have this wonderful template element and what is up here is basically a piece of document that is not active yet. It is inert. It just sits there in a way to be called or copied or actually called into action. So this script in there does not get executed unless I actually put it somewhere, somehow. And then I have this button and I can click on it and then it will ask me for a headline. Hello, FutureJS. Today is a wonderful... Whoops. Day. Day should never pass. Away. Very poetic. And here we have our wonderful headline. Now, what does this give me? Well, it allows me to actually prepare my template somewhere and somehow I could load this asynchronously from a script or something instead of actually having it there. So it sort of makes templating a little easier. When you actually want to insert it, it's pretty easy. You just query it, use the content of it and then just clone it somewhere or move it somewhere, I could have moved it as well. And that's about it. It's very simple actually. So that is that. But then I have this problem that it sort of leaks. So what I mean with that is let's modify this a little bit. You're going to see me modifying demos today quite a lot because it's sort of a life coding thing and I wonder if I can... Can I move these? Do I get shouted at? I hear no shouting, that is great. Okay, that's a German method. In Switzerland, I would never ever do that because I got probably, I don't know, jail for it or something. Swiss people are super defensive but really, really nice folks. You should visit Switzerland. Anyway. So what I could do is I could do an order that does document.crayselector or... So I get all the headlines that are in the document and I count them and I tell me if it happens. And I say, today is so nice. And then it says one, and obviously if I do this a second time, future.js, it's two words, so future counts. And then it's two. So it still leaks. But I imagine this not just having a tag, this having an ID or a class selector or anything or style sheet attached. That would mean that I now actually leaked something that should not be outside of my little world into the document using it. And that's bad. That was fun. And that is where the shadow DOM comes in. So it's sort of the same code. It has a little adjustment, but first of all I'm too lazy to type that stuff in so I have a test for headlines thing that says fountain zero headlines. Woo! And I have this button at again and this time what I do is I create a new div. Just a div element. No fuss about this one. And then I create a shadow root on this div. Now what does that mean? Well, who of you has actually seen how shadow DOM works already? In that case I'm going to explain it. Great for those who actually have. Awesome. So what it does is it says basically I cut it out here and whatever, I create a new node in the DOM but it's disconnected. So I put stuff below this node. I add child, it's a subtree as well as the rest of the DOM is the tree. But the position in the tree, so from the top perspective if I'm the browser I sort of go in but if I'm the application that lives somewhere here in the tree I could query the tree and I would go shadow root and then I just go on somewhere else. I will never ever go into the shadow root. I can, I shouldn't. So that's what happens here. So I create a new node in this DOM tree and it is a shadow root and then I add my content from the template into this shadow root and then I append the container just as I would anyways onto the document. So that works still pretty well. Is this the future of live coding? Today we'll find out. Okay, now I click on this test for headlines and it still says zero headlines. So it did not leak but it is there, right? So there is a headline but it says like no, is there something broken in my code? Let's just try that. I could say I'm now appending directly to the container so I basically make the step useless but it doesn't matter. And I click on the test for headlines and now it found the headline. So this thing sort of does what it is supposed to do, right? And it even works on IDs as well. So I could say ID magic and I can then modify this to say I want everything that has this magic this magic ID and then I go ola. By the way, ola is basically 80% of my Spanish knowledge so I try to use that as much as possible so I get the best out of it. Again, Swiss thing, I guess, get the best for your money. So now it found this hotline and if I now go back into the shadow DOM thing, see, es bueno. And that is 100% of my Spanish and I click on this and it goes zero headlines. Isolation! Wonderful, so that I keep doing this. So that is pretty good. So now we have the shadow DOM but it's still a little quirky to use because we have to deal with this still with the JavaScript bit and we can still make mistakes and it can still be really, really nasty and it's not really declarative and it does not really solve the problem of people just wanting to drop elements somewhere like they would be in native HTML. In native HTML you don't have to do anything like document.createElement. You can just put the tag in where you want it and you're done. We want that as well for our wonderful new components. What I do here is I introduce the custom element which is the third of the four standards and as well as the shadow DOM the shadow DOM just landed in Firefox. I think it's in stable now. I'm not sure about that but it's prefix probably and in Chrome beta it is without prefix and I think Chrome did a sort of Hail Mary manoeuvre there. I was like, oh yeah, we'll just write you to let you know that we're actually shipping it without the prefix and everyone was like, whoa, whoa, what? So yeah, it's out there now but it's hidden behind the flag as far as I'm aware so if you want this to run you have to enable some flags and you have to certainly run Chrome it's not possible to do this in other browsers yet but there's poorly filled. And so what was I talking about? Oh yeah, exactly, custom elements. So this code here allows us to finally say I give you some sort of declarative way as well as an imperative way to sort of use these components like you would a native HTML element in your document. So what we do is I could be more specific here but I just say I use the prototype of an HTML element so that I have all these funky properties that I need and then I create a new object from that which is my new prototype then it has lifecycle callbacks the created callback happens when the browser loads your element because that can happen asynchronously so that means that it's not already there if you're unlucky. And this tells you all right I'm ready I can actually now process you and make you happen somewhere in the DOM and make you appear and work so get yourself prepared so this is sort of the initialisation on the global level component not for a certain instance of your component and what I do in here is I create the shadow DOM and I put the content in and that's it and then you go on with the attached callback which happens whenever the parser because the parser line goes again through the DOM and goes like that's one of these components and then this callback is actually called when it's inserted into the DOM right before it's inserted into the DOM so what I do here is I then ask for the message that I should display for this particular instance so that I can have the messages per instance rather than again globally and then we just register it and it happens down here so we say our attack should be called x-headline that you see that x pretty often is just random because people are lazy to type stuff but you could say like I could say numbers-account list or something or you could say whatever you feel like. Important is that it has to have a dash because the dash makes it easier for the browser to figure out alright this is actually not a normal component so the dash is mandatory by the spec and that then registers it with the browsers for use in the documents and I give it just the where is it the prototype that I created over here so that it knows how it should behave and I make it available on the document so that I then can just say I'm creating a new x-headline that's the imperative way and then there's a test again so I can do this now and it doesn't work that's great it's probably because I ran this beforehand and the problem is that if it's already registered and it tries to register again then it throws a syntax error so this demo is not really suited for this particular use case but well that's what you get weee an element in HTML how futuristic does that count? now it counts it's two words alright yay there we go and I can obviously now I'm going to run into this problem again that the element is already registered so I rename this into headline yay really bad naming but doesn't matter and I put it in here just to show you that you can do it on declarative as well headline yay slash x line yay not making a syntax error here and then it directly asks me for the message because now it got attached and I say okay right and it's there and I can still then create headlines headlines and I can still do this and it still says there's no headline here so it's still isolated everything working fine so now we finally got ourselves into a position where we sort of have an isolated working declarative and imperative component but if you look at the code it's still like that is not really user friendly imagine that you have to ship that around okay you could put it in a java script file and then they have to figure it out but I don't want that to be semantically more useful or actually more expressive because putting it in a java script doesn't really tell you what's going on and why the java script is there so they got us covered there as well which is html imports and html imports are just nothing else than another type of link that you can set so you have this link type for style sheets and now you have a link type for imports which happens over here so this is the basically the whole thing that I wrote beforehand is adapted now to the filter list with javasnode and jokes and it's put in this separate file so I can now just import it like I would import a style sheet as well it's just more I feel it's more semantically useful or expressive because it's actually a link to something that I want to import to use I would prefer to be called like link relation component but you know you just don't get to vote everywhere so yeah and then you have just the filter list and you have the list items just as you would with a normal list and I could do fancy stuff here as well I could show something when it comes to Shadow DOM which is what you can do in Shadow DOM is you can specify actually no I make it here best naming convention ever I just make this things up so because another question that I often get asked is how do you get this in in a declarative way because right now the content in this one comes from sort of imperative magic and that doesn't have to be I can do this content slash content which takes whatever is in here the future is nice so is the weather today and I I can declare this thing somewhere down here I lose the lines and I can make sure that it doesn't try to ask me something to overwrite this thing so that now the attached prototype sort of is useless I go in here and then it just takes it from here and what is really nice with this is that you can say I want to select a certain thing and this is just a CSS selector so I can say primary and then I want a secondary hatline as well and I can say I'm just a little lazy today and I make this a hatline ja3 and I can now go in here and say I want to have this or make it diff just for funs and giggles class equals primary as when and then I have some sort of other content that doesn't really matter diff ABC and just to show off my awesome Latin skills I can do diff laurum ipsum the laurum said almond or something I modify this thing down here and I run the demo again and as you can see it now selected the thing that I said is primary for the H1 element and the whole rest goes in whatever and the least specified content element ever and I only have a second one so it just goes like oh this one I pick for my H1 element for my hatline and then the rest are just stuck next to it into the H2 element as well and I hope it didn't break the demo to actually go there as well so this all being nice and fine one of the things that I said when I saw the web components stuff for the first time I said that's really cool stuff it's just very sad that we can't use it and it's pretty ironic actually if you think about that this stuff is there to help us get away from the problem of oh yeah this is really cool stuff but we can't use it because my browser doesn't support it yet and we can't use that to fix this problem because the browsers don't support it so it's sort of ironic really but I have pretty good news which is first of all this is really really active it's sort of bleeding edge I woke up this morning just to check if I'm still up to date only to find out that I'm not so yeah that's fun I really really hope that my Macbook wouldn't crash because then maybe Chrome would update automatically when it restart and then all my demos would stop working that would be nice but I was lucky it didn't crash or Chrome didn't update and I'm not sure which one happened really I can't remember so web components are sort of in your browser already so this is what happens when you actually inspect there's a setting in the Google Chrome developer tools that says show shadow DOM and inspect user agent shadow DOM and you click on the video element that's what you see so even the Chrome guys couldn't really be bothered to actually use native stuff they just use the different diffs and an input here and an input there and you can do that with pretty much everything an input is not a native input anymore it is actually a diff that has content editable set to true so the browsers are sort of dock footing on this which is pretty handy and that sort of blew my mind because I mean who of you expected that actually these elements are not native elements but just a random collection of web stuff who did so hands up you're gonna get probably something smack in the head or so I don't know so yeah that sort of blew my mind nonetheless the browser support just isn't quite there yet as you can see the the IE guys are a little behind some of the things that are yellow I would consider not really yellow but dark orange but okay that's very optimistic but that's the compatibility matrix and the good thing is that there's some polyfill from the google guys and some framework to help you not deal with the problems that I just deal with which is these standards are in flux so they are still not finalised, they are evolving they are actually under rapid and active development and so the stuff changes right so that is why I wouldn't use that in production but I don't know why I came up with this idea yesterday evening it's like oh let's completely redo my slides as web components which worked out which is surprising but it's cool so these two frameworks sort of abstract away the nasty bits and pieces wiring that you have to do so that you have a more or less consistent interface to work with stuff and Polymer you could use whatever you feel like you could either use the whole framework which is contrived off a set of it's the polyfilts it is elements that they build for you so you don't have to build them again like a style rating, widget and things you can actually use them with vanilla web components as well so they are interoperable, that is pretty cool and then there's just the platform thing so you could use whatever layer you want and with X tags it's pretty much the same they use the same polyfill they just apparently couldn't be bothered to write another polyfill and why I mean it works and so that supports down to IE 10 or now actually it supports IE 9 plus all the mobile browsers if someone here is doing phone gap applications it also works on phone gap and something Polymer doesn't the polyfill does fine and then if you just want to give it a try I highly recommend the Mozilla App Maker it's really really cool you can drag and drop stuff my now 4 year old nephew played around with it and built it sort of a mobile app that you have a button, you press a button and then it fireworks very impressive and then we have our collection of web components ready to use Brick is more in the direction of X tags so they are trying to get tied in there while custom elements is more bound to work with the Polymer so most of the elements there require some sort of Polymer stuff and that was my talk you find the slides online already as I say you need a Chrome browser that actually supports the flags so you have to set the experimental web platform stuff but the fog will be recorded anyway and then you find me on Twitter I'm Geekonaut with 3 instead of E and yeah thanks for having me here, thanks for listening I hope it was entertaining and useful thanks a lot so I imagine if you would like to have a nice component based architecture you would like to nest components into another component or just shadow DOM and other solutions the presentation was all about that the presentation literally is built as a slide deck component which nests slide components which then may have a demo component you could use each of these components standalone or you could nest them so basically all the demos that you saw were actually nested within three layers of components and it just works you're welcome what's the coolest thing that you've actually seen in production using this stuff using polyfills or whatever what's the best thing you've seen in production using this what's the most exciting thing you've created with it for me personally my laptop has gone the most exciting thing I have done is that or I didn't do it that's what's exciting about my nephew literally I'm not making this stuff up my nephew five years old dragged and dropped stuff with the app maker onto a canvas that was sort of trying to be a phone and then he said look I click this button and it makes fireworks and the coolest thing is you then click on publish and then you install it on your phone who can do this stuff with five years and it's just because it's so freaking easy it is Lego for the web that is cool I think cool awesome thank you very much you're welcome