Slide 1
Slide 1 text
@stopsatgreen
Web Components: where we
are now, and what next?
Responsive Day Out 19/06/15
Slide 2
Slide 2 text
@stopsatgreen
Peter Gasston
@stopsatgreen
broken-links.com
Slide 3
Slide 3 text
@stopsatgreen
For the designers.
Slide 4
Slide 4 text
@stopsatgreen
Web Components have
been around for a while.
Slide 5
Slide 5 text
@stopsatgreen
In a trough on the
hype cycle.
Slide 6
Slide 6 text
@stopsatgreen
Everybody’s in…
but that means trouble.
Slide 7
Slide 7 text
@stopsatgreen
Web Components enable
us to create widgets.
CSS JS
Widget Widget
Widget
Slide 8
Slide 8 text
@stopsatgreen
Composable, reusable,
encapsulated.
CSS JS
Widget
Widget Widget
Slide 9
Slide 9 text
@stopsatgreen
We run things, things
don’t run we, don’t take
nothing from nobody.
Slide 10
Slide 10 text
@stopsatgreen
React, BEM, etc. are ways
of doing this using the
technologies of today.
Slide 11
Slide 11 text
@stopsatgreen
The Extensible Web Manifesto.
extensiblewebmanifesto.org
Slide 12
Slide 12 text
@stopsatgreen
Web Components are:
Templates, HTML Imports,
Custom Elements, Shadow DOM.
Slide 13
Slide 13 text
@stopsatgreen
Templates.
Reusable fragments of
inert HTML.
Slide 14
Slide 14 text
@stopsatgreen
…
…
Slide 15
Slide 15 text
@stopsatgreen
Templates.
OK to use, with fallback
for IE/Edge.
Slide 16
Slide 16 text
@stopsatgreen
HTML Imports.
Include HTML documents
in an HTML document.
Slide 17
Slide 17 text
@stopsatgreen
// file.js
export foo;
// page.js
import foo from "file.js";
Slide 18
Slide 18 text
@stopsatgreen
HTML Imports.
Will probably be replaced
by ES6 modules.
Slide 19
Slide 19 text
@stopsatgreen
Shadow DOM.
Hide complex markup
inside an element.
Slide 20
Slide 20 text
@stopsatgreen
root = el.createShadowRoot({
mode: 'open'
});
root.innerHTML = '
…
';
Slide 21
Slide 21 text
@stopsatgreen
Shadow DOM is very
hard to polyfill.
Slide 22
Slide 22 text
@stopsatgreen
Shadow DOM.
Lots still to be defined.
Slide 23
Slide 23 text
@stopsatgreen
Custom Elements.
Meaningful markup with
bespoke properties.
Slide 24
Slide 24 text
@stopsatgreen
document.registerElement('fun-times');
Slide 25
Slide 25 text
@stopsatgreen
= HTMLElement
= HTMLUnknownElement
document.registerElement('fun-times');
= fun-times
Slide 26
Slide 26 text
@stopsatgreen
fTs = document.querySelector('fun-times');
fTs.hooray();
p = Object.create(HTMLElement.prototype);
p.hooray = function() {…};
document.registerElement('fun-times',
{ prototype: p });
Slide 27
Slide 27 text
@stopsatgreen
// ES6 approach (not final)
class fTs extends HTMLElement {…}
document.registerElement('fun-times', fTs);
ES6 offers a better way
to do this.
Slide 28
Slide 28 text
@stopsatgreen
Custom Elements.
Approach is sound,
some details to finalise.
Slide 29
Slide 29 text
@stopsatgreen
is
A major sticking point.
Slide 30
Slide 30 text
@stopsatgreen
p = Object.create(HTMLButtonElement.prototype);
document.registerElement('fun-times', {
prototype: p,
extends: 'button'
});
Slide 31
Slide 31 text
@stopsatgreen
is
isn’t
(probably)
Slide 32
Slide 32 text
@stopsatgreen
In summary: welcome to the
trough of disillusionment.
Slide 33
Slide 33 text
@stopsatgreen
A tour of the
sausage factory.
Slide 34
Slide 34 text
@stopsatgreen
This is our big opportunity.
We need to get this right.
Slide 35
Slide 35 text
@stopsatgreen
A11y, usability, SEO, etc,
become our responsibility.
Slide 36
Slide 36 text
@stopsatgreen
Sturgeon’s Revelation:
90% of everything is crap.
Slide 37
Slide 37 text
@stopsatgreen
The Gold Standard.
github.com/webcomponents/gold-standard/wiki
Slide 38
Slide 38 text
@stopsatgreen
Loading, DOM Presence,
Content, Interaction, API,
Styling, Performance,
Localisation, Factoring,
Development.
Slide 39
Slide 39 text
@stopsatgreen
Unix philosophy: every
component does one job.
Slide 40
Slide 40 text
@stopsatgreen
Learn a library first,
then vanilla.
Slide 41
Slide 41 text
@stopsatgreen
Slide 42
Slide 42 text
@stopsatgreen
Everybody’s in.
but that means trouble.
…
Slide 43
Slide 43 text
@stopsatgreen
Cheers.
Slide 44
Slide 44 text
@stopsatgreen
Reading list:
• webcomponents.org/articles/why-web-components/
• hacks.mozilla.org/2015/06/the-state-of-web-components/
• aerotwist.com/blog/polymer-for-the-performance-obsessed/
• tjvantoll.com/speaking/slides/Web-Components-Catch/San-Francisco/
web-components-catch.pdf
• w3.org/2015/04/24-webapps-minutes.html
• … and many, many more.