Web Components

The Extensible Web Summit is taking place in Berlin today because Web Components are that important. I wish I could be there, but I’ll make do with the live notes, the IRC channel, and the octothorpe tag.

I have conflicting feelings about Web Components. I am simultaneously very excited and very nervous. That’s probably a good sign.

Here’s what I wrote after the last TAG meetup in London:

This really is a radically new and different way of adding features to browsers. In theory, it shifts the balance of power much more to developers (who currently have to hack together everything using JavaScript). If it works, it will be A Good Thing and result in expanding HTML’s vocabulary with genuinely useful features. I fear there may be a rocky transition to this new way of thinking, and I worry about backwards compatibility, but I can’t help but admire the audacity of the plan.

And here’s what I wrote after the Edge conference:

If Web Components work out, and we get a kind emergent semantics of UI widgets, it’ll be a huge leap forward for the web. But if we end up with a Tower of Babel, things could get very messy indeed. We’ll probably get both at once.

To explain…

The exciting thing about Web Components is that they give developers as much power as browser makers.

The frightening thing about Web Components is that they give developers as much power as browser makers.

When browser makers—and other contributors to web standards—team up to hammer out new features in HTML, they have design principles to guide them …at least in theory. First and foremost—because this is the web, not some fly-by-night “platform”—is the issue of compatability:

Support existing content

Degrade gracefully

You can see those principles at work with newly-minted elements like canvas, audio, video where fallback content can be placed between the opening and closing tags so that older user agents aren’t left high and dry (which, in turn, encourages developers to start using these features long before they’re universally supported).

You can see those principles at work in the design of datalist.

You can see those principles at work in the design of new form features which make use of the fact that browsers treat unknown input types as type="text" (again, encouraging developers to start using the new input long before they’re supported in every browser).

When developers are creating new Web Components, they could apply that same amount of thought and care; Chris Scott has demonstrated just such a pattern. Switching to Web Components does not mean abandoning progressive enhancement. If anything they provide the opportunity to create whole new levels of experience.

Web developers could ensure that their Web Components degrade gracefully in older browsers that don’t support Web Components (and no, “just polyfill it” is not a sustainable solution) or, for that matter, situations where JavaScript—for whatever reason—is not available.

Web developers could ensure that their Web Components are accessible, using appropriate ARIA properties.

But I fear that Sturgeon’s Law is going to dominate Web Components. The comparison that’s often cited for Web Components is the creation of jQuery plug-ins. And let’s face it, 90% of jQuery plug-ins are crap.

This wouldn’t matter so much if developers were only shooting themselves in the foot, but because of the wonderful spirit of sharing on the web, we might well end up shooting others in the foot too:

  1. I make something (to solve a problem).
  2. I’m excited about it.
  3. I share it.
  4. Others copy and paste what I’ve made.

Most of the time, that’s absolutely fantastic. But if the copying and pasting happens without critical appraisal, a lot of questionable decisions can get propagated very quickly.

To give you an example…

When Apple introduced the iPhone, it provided a mechanism to specify that a web page shouldn’t be displayed in a zoomed-out view. That mechanism, which Apple pulled out of their ass without going through any kind of standardisation process, was to use the meta element with a name of “viewport”:

<meta name="viewport" value="...">

The value attribute of a meta element takes a comma-separated list of values (think of name="keywords": you provide a comma-separated list of keywords). But in an early tutorial about the viewport value, code was provided which showed values separated with semicolons (like CSS declarations). People copied and pasted that code (which actually did work in Mobile Safari) and so every browser must support that usage:

Many other mobile browsers now support this tag, although it is not part of any web standard. Apple’s documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari’s documentation says the content is a “comma-delimited list,” but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

Anyway, that’s just one illustration of how code gets shared, copied and pasted. It’s especially crucial during the introduction of a new technology to try to make sure that the code getting passed around is of a high quality.

I feel kind of bad saying this because the introductory phase of any new technology should be a time to say “Hey, go crazy! Try stuff out! See what works and what doesn’t!” but because Web Components are so powerful I think that mindset could end up doing a lot of damage.

Web developers have been given powerful features in the past. Vendor prefixes in CSS were a powerful feature that allowed browsers to push the boundaries of CSS without creating a Tower of Babel of propietary properties. But because developers just copied and pasted code, browser makers are now having to support prefixes that were originally scoped to different rendering engines. That’s not the fault of the browser makers. That’s the fault of web developers.

With Web Components, we are being given a lot of rope. We can either hang ourselves with it, or we can make awesome …rope …structures …out of rope this analogy really isn’t working.

I’m not suggesting we have some kind of central authority that gets to sit in judgement on which Web Components pass muster (although Addy’s FIRST principles are a great starting point). Instead I think a web of trust will emerge.

If I see a Web Component published by somebody at Paciello Group, I can be pretty sure that it will be accessible. Likewise, if Christian publishes a Web Component, it’s a good bet that it will use progressive enhancement. And if any of the superhumans at Filament Group share a Web Component, it’s bound to be accessible, performant, and well thought-out.

Because—as is so often the case on the web—it’s not really about technologies at all. It’s about people.

And it’s precisely because it’s about people that I’m so excited about Web Components …and simultaneously so nervous about Web Components.

Have you published a response to this? :

Responses

Aron

@adactio I’m seeing similar warnings to @tkadlec in Safari and Twitter on iOS… will check again later today.

# Posted by Aron on Thursday, September 11th, 2014 at 12:34pm

Orde Saunders

@adactio I’m similarly excited and nervous too. My hope is that we’ll get some new cow paths that can be paved with native functionality.

Meekostuff

@adactio <core-animation>, <brick-flipbox>, <x-layout>. Mixing presentation into content - what could possibly go wrong?

# Posted by Meekostuff on Friday, September 12th, 2014 at 4:43am

Mircea Piturca

@adactio Thank you for the reference. Will have to read it properly. Is good to know that solutions are looked up on this.

19 Shares

# Shared by Evan Henſleigh on Thursday, September 11th, 2014 at 12:36pm

# Shared by Adam Bowen on Thursday, September 11th, 2014 at 12:36pm

# Shared by la nouvelle hipster on Thursday, September 11th, 2014 at 12:37pm

# Shared by Orde Saunders on Thursday, September 11th, 2014 at 12:38pm

# Shared by ge ricci on Thursday, September 11th, 2014 at 12:41pm

# Shared by Paul Lloyd on Thursday, September 11th, 2014 at 12:42pm

# Shared by Sarah Horton on Thursday, September 11th, 2014 at 12:46pm

# Shared by Lucas Mazza on Thursday, September 11th, 2014 at 1:18pm

# Shared by Scott Birdsey on Thursday, September 11th, 2014 at 1:44pm

# Shared by Adam Perfect on Thursday, September 11th, 2014 at 1:55pm

# Shared by Matthew Jackson on Thursday, September 11th, 2014 at 2:04pm

# Shared by Laura Kalbag on Thursday, September 11th, 2014 at 2:53pm

# Shared by Ian MacDowell on Thursday, September 11th, 2014 at 3:32pm

# Shared by Daniel Appelquist on Thursday, September 11th, 2014 at 3:50pm

# Shared by Simon St.Laurent on Thursday, September 11th, 2014 at 4:02pm

# Shared by Brent Lineberry on Thursday, September 11th, 2014 at 4:30pm

# Shared by lotus sutra on Thursday, September 11th, 2014 at 6:44pm

# Shared by SteveALee on Thursday, September 11th, 2014 at 8:29pm

# Shared by Salvador Peters on Friday, September 12th, 2014 at 8:51am

33 Likes

# Liked by Robin Taylor on Thursday, September 11th, 2014 at 1:27pm

# Liked by Sam Nabi on Thursday, September 11th, 2014 at 1:27pm

# Liked by Aron on Thursday, September 11th, 2014 at 1:30pm

# Liked by Ari Palo on Thursday, September 11th, 2014 at 1:37pm

# Liked by zack jewell on Thursday, September 11th, 2014 at 1:37pm

# Liked by Ethan Marcotte on Thursday, September 11th, 2014 at 1:38pm

# Liked by Trent Walton on Thursday, September 11th, 2014 at 1:38pm

# Liked by Gunnar Bittersmann on Thursday, September 11th, 2014 at 1:39pm

# Liked by Arelia Jones on Thursday, September 11th, 2014 at 1:44pm

# Liked by ge ricci on Thursday, September 11th, 2014 at 1:44pm

# Liked by Alex Carpenter on Thursday, September 11th, 2014 at 1:44pm

# Liked by Suzanne Long on Thursday, September 11th, 2014 at 1:55pm

# Liked by Angel on Thursday, September 11th, 2014 at 1:56pm

# Liked by Brad Frost on Thursday, September 11th, 2014 at 2:06pm

# Liked by Brent Jackson on Thursday, September 11th, 2014 at 2:07pm

# Liked by Josh Levinson on Thursday, September 11th, 2014 at 2:16pm

# Liked by Niall Thompson on Thursday, September 11th, 2014 at 2:33pm

# Liked by Trevan Hetzel on Thursday, September 11th, 2014 at 2:43pm

# Liked by Peter Grucza on Thursday, September 11th, 2014 at 2:44pm

# Liked by ☯Evil Jim O'Donnell on Thursday, September 11th, 2014 at 2:54pm

# Liked by Laura Kalbag on Thursday, September 11th, 2014 at 3:55pm

# Liked by Q on Thursday, September 11th, 2014 at 3:56pm

# Liked by Marc Drummond on Thursday, September 11th, 2014 at 4:03pm

# Liked by L A Watts on Thursday, September 11th, 2014 at 4:21pm

# Liked by Todd Parker on Thursday, September 11th, 2014 at 4:21pm

# Liked by Scott Jehl on Thursday, September 11th, 2014 at 4:30pm

# Liked by Sébastien Cevey on Thursday, September 11th, 2014 at 4:52pm

# Liked by Julian Viereck on Thursday, September 11th, 2014 at 4:53pm

# Liked by Tim Strehle on Thursday, September 11th, 2014 at 8:48pm

# Liked by codekipple on Friday, September 12th, 2014 at 7:29am

# Liked by Salvador Peters on Friday, September 12th, 2014 at 10:01am

# Liked by vaibhav on Friday, September 12th, 2014 at 8:02pm

# Liked by Octávio Turra on Saturday, September 13th, 2014 at 11:16pm