Sessions is temporarily moving to YouTube, check out all our new videos here.

Web Components and Me

Dan Matthew speaking at HydraHack in March, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

A short talk on working on side-projects, and realising the right time to ask for help.


Okay, so I'm Dan, I'm a developer up at Talis and this is going to be of Redux I guess, a talk that I was going to give back in December, but for reasons that I'll touch on, I had to pull out of it. So, Kath, thank you very much for thinking of me and inviting me back. I hope you don't beat me up too much. Yeah, so, when I saw the title is show and tell, it's pretty much less show, more tell. Perhaps 100% tell. So the project I wanted to show to you in December was all about these accessible web components. So one cool Sunday morning I was, you know, chilling out, reading the specs, and W3C are pretty cool and they actually give you examples of how to make your websites accessible. And they had this whole document called "Authoring Practices," which is almost a playbook of how to create [inaudible] patterns and make them accessible for all users. So it kind of gives you a rundown of all the states and properties that you need to apply as the user moves through different...moves through the pattern. And also gives you the lowdown on influencing the appropriate keyboard controls. And I thought, "Yeah, this is going to make for a pretty decent side project to work on." Especially because a lot of the examples that are presented are now, you know, quite a few years out of date. So they're not maintained anymore. I thought it might be cool to bring them up to speed while also combining this with learning a new technology. So I thought I could use React, I could use Angular2. At Tallis at the moment we develop our, kind of, reading list interface. I thought, yeah, this might be a good idea to take advantage of the nascent web component spec. And in order to do so I was going to use Polymer. So for those who aren't sure, web components comprise four different areas. So you get something called custom elements where you can define your own tag and enhance it just as you would with a React component or the same as in Angular. You've got the shadow DOM, which makes it easy to encapsulate styles and functionality without affecting the kind of host document. You get HTML imports, which allow you to bring in documents from other places into your master document. And you get HTML templates, so you can kind of take a snippet of markup and use it repeatedly throughout your application. So this W3C doc, these authoring practices, they've got about 20 different components that they talk about, going from a basic alert through to a Slider. There's some that have kind of been implemented in HTML5, there, so you've got, like, a combo box and spinners, those controls available. Other ones that might be of interest are kind of accordions and carousels and, you know, the kind of basic tabbed interface. So I kind of started on this project and at the time it was early December, wasn't it? So it had three to show off. Just covering off the bases. And then, yeah, so it came to the day before and I was stricken with I guess worry and stress about delivering this talk. And it's stupid because this is why I wanted to get into talking, I wanted to face a room of developers and learn to fight it off. Because I don't like social situations. Getting better but I'd much rather, kind of, be on my tod. So I did... I don't know if anyone came to Cadalicious last summer, but that was my first attempt there. I thought, yeah, I quite like this. So looking at further opportunities. So yeah I was kind of just really down about it and Kathy was understanding but it's become clear this is why. And this was kind of like the final straw. I'd been feeling a sensation of low mood for a period of time and I was like, "You know what? I don't want this shit, basically, to impact my life." You know, I've had to cancel events and I don't want it to be in control of me. So I guess this is the...if I did have a slide, this would be where it has a record scratch and we'd go off on a tangent. So I finally took the plunge and went and spoke to my GP, and so basically got it diagnosed with depression and social anxiety. And I've been taking steps to remedy that. Kind of doing some cognitive behavioral therapy, which has been quite good. Kind of learning how know, when I'm getting panicked how to kind of control that. And what I was thinking of is that I'm sure I'm not alone and if I can speak to anybody in the audience or can offer any advice of my own, or if anybody can offer me advice, then I hope I can kind of pass something back there. And heck, if anybody wants to help out with these accessible components, pool requests welcome. So that's that. I mean, any abuse, any questions. I feel, I hope I haven't wasted your time but I thought, you know, once we go off on this tangent. - [Man] Taking questions on Polymer or...? Because I have a Polymer question. - Shoot. - What's your findings or opinion on using Polymer versus [inaudible] APIs for web components? - Yeah, I guess it's kind of taking the load off me, though, it's kind of smoothing over the cracks in terms of having to worry about which browsers to... I mean, there''ve got the custom elements, the zero spec and then the custom elements v1 spec. So... - A lot of brands are supporting a lot of the features now, and... - They're getting better, yeah. I think the only one that really doesn't have much take-up is the HTML import. But certainly, if you're using Chrome and Safari and Opera, since it's based off Chrome, you should be good. And Firefox I think has a lot of these tuck behinds of various development flags. But yeah, Polymer's just there because... I've been listening to those Youtube... sorry, those Google dev videos, and [inaudible] is a big proponent of Polymer. I thought, yeah, I'll take the plunge there and use this. I mean, as the spec matures, then I'll probably move away from Polymer and feel safer with that. But I kind of thought... And I guess because of the Angular2 work. I kind of felt that they would be almost seamless since they're both coming from the same team. I mean, I've come to one of the patterns that we're doing in our reading list, v2, kind of need to reimplement it in the classic view as well. I'm thinking this will be a prime component for a [inaudible] component because when you're building up your Angular app, you do get the opportunity to use native web components rather than just Angular2's implementation. - I did a talk two years ago on web components in Polymer, and what I've found now [inaudible] is that the native APIs were quite close. - Yes. - Polymer have [inaudible] abstraction across those. It's made it a lot more nicer to work with, I guess. - Yeah, you can create an element in, like, in one line rather than the five it takes in the DOM. Yeah, so, it's coming along nicely and they are about to release Polymer v2, which is kind of exciting-ish. - Angular4? - Now we're on Angular2, next week we'll be on Angular4. I'm not sure what happened to three. All right, thank you everybody.