Slide 1
Slide 1 text
@stopsatgreen
Web Components Now
MK Geek Night 11/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 enable
us to create widgets.
Slide 5
Slide 5 text
@stopsatgreen
Composable, reusable,
encapsulated.
Slide 6
Slide 6 text
@stopsatgreen
The Extensible Web
Manifesto.
extensiblewebmanifesto.org
Slide 7
Slide 7 text
@stopsatgreen
Slide 8
Slide 8 text
@stopsatgreen
Web Components have been
around for a while.
Slide 9
Slide 9 text
@stopsatgreen
Web Components
FTW WTF
Slide 10
Slide 10 text
@stopsatgreen
In a trough on the
hype cycle.
Slide 11
Slide 11 text
@stopsatgreen
Everybody’s in…
but that means trouble.
Slide 12
Slide 12 text
@stopsatgreen
Templates,
HTML Imports,
Custom Elements,
Shadow DOM.
Slide 13
Slide 13 text
@stopsatgreen
Templates.
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.
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.
Looking doubtful.
ES6 modules, perhaps?
Slide 19
Slide 19 text
@stopsatgreen
Shadow DOM.
Slide 20
Slide 20 text
@stopsatgreen
sR = el.createShadowRoot({
mode: 'open'
});
sR.innerHTML = '
…
';
Slide 21
Slide 21 text
@stopsatgreen
Shadow DOM is very
hard to polyfill.
Slide 22
Slide 22 text
@stopsatgreen
Shadow DOM.
Lots to still be defined.
Slide 23
Slide 23 text
@stopsatgreen
Web Components
FTW WTF TBD
Slide 24
Slide 24 text
@stopsatgreen
Custom Elements.
Slide 25
Slide 25 text
@stopsatgreen
document.registerElement('fun-times');
Slide 26
Slide 26 text
@stopsatgreen
= HTMLElement
= HTMLUnknownElement
document.registerElement('fun-times');
= fun-times
Slide 27
Slide 27 text
@stopsatgreen
fTs = document.querySelector('fun-times');
fTs.hooray();
p = Object.create(HTMLElement.prototype);
p.hooray = function() {…};
document.registerElement('fun-times',
{ prototype: p });
Slide 28
Slide 28 text
@stopsatgreen
However, ES6 has a better
way to do this.
Slide 29
Slide 29 text
@stopsatgreen
// ES6 way (not final)
class fTs extends HTMLElement {…}
document.registerElement('fun-times', fTs);
// current way
p = Object.create(HTMLElement.prototype);
document.registerElement('fun-times',
{ prototype: p });
Slide 30
Slide 30 text
@stopsatgreen
Custom Elements.
Approach is sound,
some details to finalise.
Slide 31
Slide 31 text
@stopsatgreen
is
Slide 32
Slide 32 text
@stopsatgreen
p = Object.create(HTMLButtonElement.prototype);
document.registerElement('fun-times', {
prototype: p,
extends: 'button'
});
Slide 33
Slide 33 text
@stopsatgreen
is
isn’t
(probably)
Slide 34
Slide 34 text
@stopsatgreen
A11y, usability, SEO,
are our responsibility.
Slide 35
Slide 35 text
@stopsatgreen
The Gold Standard.
github.com/webcomponents/gold-standard/wiki
Slide 36
Slide 36 text
@stopsatgreen
Loading, DOM Presence,
Content, Interaction, API,
Styling, Performance,
Localisation, Factoring,
Development.
Slide 37
Slide 37 text
@stopsatgreen
Unix philosophy: every
component does one job.
Slide 38
Slide 38 text
@stopsatgreen
I bet you feel sad now.
Slide 39
Slide 39 text
@stopsatgreen
A tour of the
sausage factory.
Slide 40
Slide 40 text
@stopsatgreen
We need to get this right.
Slide 41
Slide 41 text
@stopsatgreen
Learn a library first,
then vanilla.
Slide 42
Slide 42 text
@stopsatgreen
Slide 43
Slide 43 text
@stopsatgreen
Everybody’s in…
Slide 44
Slide 44 text
@stopsatgreen
Cheers.
I’ve been Peter Gasston.
Slide 45
Slide 45 text
@stopsatgreen
Reading list:
• webcomponents.org/articles/why-web-
components/
• hacks.mozilla.org/2015/06/the-state-of-web-
components/
• 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.