Tag Archives: web components

“An introduction to Web Components” at Manchester Geek Nights

I was in Manchester last week for a Manchester Geek Night meetup organised by ThoughtWorks North. I gave an overview about Web Components, and potential issues regarding accessibility / SEO, and using them with some of the popular frameworks:

Slides: onlinesource code.

It’s kind of similar to my jQuery UK talk, but updated, because many things have changed since March.

Yet people in the audience are mostly still not using Web Components or don’t plan to do so for the time being. They are mostly happy with the UI options provided by their framework of choice, or what they do doesn’t really justify the investment that Web Components require.

I am however hopeful that browser vendors have finally agreed on something and things are starting to move towards a minimal, commonly agreed with, implementation of something-web-component.

But I am going to politely decline doing talks about Web Components until the tech is a bit more stable. I am not working actively with UI/Web Components stuff at the moment so preparing these talks requires a huge investment of time (as I don’t like telling lies, or lies by accident).


For the project I’m working on I’m building web components that sometimes require other components to build their UI. For example, the theremin-ui uses the slider. So they will try to load and register the component before creating instances of it. It worked fine when there was only one level of dependencies, but then I put all of the components on the same document, to let the user choose an instrument from the collection of Web Audio instruments, and I got an error from the browser complaining about… something:

NotSupportedError: Operation is not supported

I traced it down to the register() call, and I figured that I was registering an element twice. So I made safeRegisterElement, a one-function module I’m using now instead of directly calling document.registerElement:

var safeRegisterElement = require('safe-register-element');

// safeRegisterElement(type, prototype);
// e.g.:
safeRegisterElement('custom-name', customElementPrototype);

All my custom element modules have a register method that uses safeRegisterElement internally (this lets you register the element with whatever name you want to use).

In npm: https://www.npmjs.com/package/safe-register-element
And sources: https://github.com/sole/safe-register-element

Loading webcomponents-lite with require()

I just realised that the Web Components polyfills not only are in npm so you can install them like this:

npm install --save webcomponents-lite

but they also have a well formed package.json with a main entry.

So if you’re writing your front-end code with Browserify and want to load the polyfill without adding an additional script tag, you can do this:


and this pulls the polyfill into the scope.

NICE! Thanks, Addy :-)

PS I guess this should also work with webpack, if you’re so inclined.

jQuery UK 2015

I attended jQuery UK past week, sorry about the delay in writing about it :-)

The organisation was as smooth as it could be. They made sure we knew where, how and when to go to places and treated us really well, so it was a pleasure to be a speaker in this conference.

I must admit I was stupidly silly with regards to the conference at the very beginning. My programming bias elitism was yelling on my brain “oh I MIGHT NOT NEED jQUERY! Who needs it these days anyway!?”

But turns out that

  1. there’s lots of people who cannot afford to compromise on customer support, so they have to go the pragmatic way, and
  2. there’s a lot about newest web technologies we can share with them too!

So when they asked me to talk about Web Components I opted to frame it in the most pragmatic way too: how to use them without shooting yourself in the foot, so you can start working in a more modular way and taking in all those advantages.

I asked before starting and from an audience of… 300? 400 people? approximately 20 had heard about Web Components and about 10? had implemented them in a project. So I ran a quick introduction on what they were, why they were developed and how they looked like, before tackling them interoperating with the four main “frameworks”: jQuery, React, Ember and Angular.

A write up on the results of my research is upcoming, but in the meantime you can look at the slides if you’re so inclined. Be aware that something in Nightly was crashing with the slides at the time I presented, so if your browser crashes (including Nightly for Android)… you know why 😉

The talks I watched:

Addy Osmani gave an excellent talk on the state of Chrome’s developer tools and then explained how their team identified performance issues on Wikipedia, and how to fix them (this was related to Paul Irish advising people to not to use jQuery’s hide() method). Also, Paul is sorry for tweeting that without the proper context.

Natasha Rooney explained what Service Workers were and what problems they were meant to solve, but I am afraid if you had not a bit of background it would be a little bit confusing as the topic is *complex*.

Andy Hume explained various techniques on how to deliver fast experiences specially on mobile.

Alex Sexton infused us with a bit of South-West American culture and told us about don’t mess with Texas, then tried to find an equivalent for the web (don’t mess for the web?) with regards to hacking/building websites that cannot be hacked.

Jenn Schiffer explained all about vart.institute* and how it came to be. Also provided multiple screenshots of Dave Methvin keynoting at various jQuery events, which was quite amusing. And invited us to feel more empathy for people in the industry, which is a good thing if you ask me. *you can read it as fart and feel silly and it would also be totally OK

Estelle Weyl gave a very interesting talk on how to use forms and take advantage of all the cool features that browsers are already providing us but some people opt to rewrite in clumsy ways that go against all accessibility and usability best practices.

Ben Foxall did one of his shows (at this point we should call those a performance rather than giving a talk) where he involved everyone on the audience and elevated our phones from mere “phones” to interactive objects or “things” that transcend the simplest notion of “phone”.

I’m sorry I couldn’t watch the rest of talks, but it was great to meet Alice Bartlett, Rosie Campbell, Anne-Gaelle Colom, Rich Harris, Philip Roberts, David Rousset, and of course, Bodil Stokke!

After the last talk finished, we moved to the larger ‘hall’ style space where there were some snacks and drinks and people could mingle and ask questions if they hadn’t had the chance yet, so that was way better for me than going to a crammed pub, as I could walk between groups and speak to different people and not YELL ALL THE TIME. There were also some stands and also RETRO GAMES but I started talking to people and forgot to check out the games. AAAAH! Funny moment: Mike MacCana getting super excited about how he could help them setup multiplayer in DOOM using IPX.

All in all a very interesting conference for people who build websites and are willing to improve their practices or tooling… or both! I definitely learnt a bunch of things, so highly recommend checking it out next year!

Introduction to Web Components

I had the pleasure and honour to be the opening speaker for the first ever London Web Components meetup! Yay!

There was no video recording, but I remembered to record a screencast! It’s a bit messy and noisy, but if you couldn’t attend, this is better than nothing.

It also includes all the Q&A!

Some of the things people are worried about, which I think are interesting if you’re working on Web Components in any way:

  • How can I use them in production reliably?
  • What’s the best way to get started i.e. where do I start? do you migrate the whole thing with a new framework? or do you start little by little?
  • How would them affect SEO and accessibility? the best option is probably to extend existing elements where possible using the is="" idiom so you can add to the existing functionality
  • How do Web Components interact with other libraries? e.g. jQuery or React. Why would one use Web Components instead of Angular directives for example?
  • And if we use jQuery with components aren’t we back to “square one”?
  • What are examples of web components in production we can look at? e.g. the famous GitHub time element custom element.
  • Putting the whole app in just one tag yes/no: verging towards the NO, makes people uneasy
  • How does the hyphen thing work? It’s for preventing people registering existing elements, and also casual namespacing. It’s not perfect and won’t avoid clashes, some idea is to allow a way to delay the registration until the name of the element is provided so you can register it in the same way that you can require() something in node and don’t care what the internal name of such module is.

Only one person in the audience was using Web Components in production (that would be Wilson with Firefox OS, tee hee!) and about 10 or so were using them to play around and experiment, and consistently using Polymer… except Firefox OS, which uses just vanilla JS.

Slides are here and here’s the source code.

I’m really glad that I convinced my awesome colleague Wilson Page to join us too, as he has loads of experience implementing Web Components in Firefox OS and so he could provide lots of interesting commentary. Hopefully he will speak at a future event!

Join the meet-up so you can be informed when there’s a new one happening!