Web Components Now

@stopsatgreen Web Components Now MK Geek Night 11/06/15

@stopsatgreen Peter Gasston  @stopsatgreen  broken-links.com

@stopsatgreen For the designers.

@stopsatgreen Web Components enable us to create widgets.

@stopsatgreen Composable, reusable, encapsulated.

@stopsatgreen The Extensible Web Manifesto. extensiblewebmanifesto.org

@stopsatgreen <picture> <source srcset="foo.png"  media="(min-width: 600px)"> <img src="bar.png" alt="Logo"> </picture>

@stopsatgreen Web Components have been around for a while.

@stopsatgreen Web Components FTW WTF

@stopsatgreen In a trough on the hype cycle.

@stopsatgreen Everybody’s in… but that means trouble.

@stopsatgreen Templates, HTML Imports, Custom Elements, Shadow DOM.

@stopsatgreen Templates.

@stopsatgreen <script type="text/x-tmpl-mustache"> … </script> <template>…</template>

@stopsatgreen Templates. OK to use, with fallback for IE/Edge.

@stopsatgreen HTML Imports.

@stopsatgreen <link rel="import" href="file.html"> // file.js export foo; // page.js
import foo from "file.js";

@stopsatgreen HTML Imports. Looking doubtful. ES6 modules, perhaps?

@stopsatgreen Shadow DOM.

@stopsatgreen sR = el.createShadowRoot({ mode: 'open' });  sR.innerHTML = '<div>…</div>';

@stopsatgreen Shadow DOM is very hard to polyfill.

@stopsatgreen Shadow DOM. Lots to still be defined.

@stopsatgreen Web Components FTW WTF TBD

@stopsatgreen Custom Elements.

@stopsatgreen <fun-times></fun-times> document.registerElement('fun-times');

@stopsatgreen <fun-times> = HTMLElement <funtimes> = HTMLUnknownElement document.registerElement('fun-times'); <fun-times> =
fun-times

@stopsatgreen fTs = document.querySelector('fun-times');  fTs.hooray(); p = Object.create(HTMLElement.prototype); p.hooray =
function() {…}; document.registerElement('fun-times',  { prototype: p });

@stopsatgreen However, ES6 has a better way to do this.

@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 });

@stopsatgreen Custom Elements. Approach is sound, some details to finalise.

@stopsatgreen is

@stopsatgreen p = Object.create(HTMLButtonElement.prototype); document.registerElement('fun-times', { prototype: p, extends: 'button'
}); <button is="fun-times"></button>

@stopsatgreen is isn’t (probably)

@stopsatgreen A11y, usability, SEO, are our responsibility.

@stopsatgreen The Gold Standard. github.com/webcomponents/gold-standard/wiki

@stopsatgreen Loading, DOM Presence, Content, Interaction, API, Styling, Performance, Localisation,
Factoring, Development.

@stopsatgreen Unix philosophy: every component does one job.

@stopsatgreen I bet you feel sad now.

@stopsatgreen A tour of the sausage factory.

@stopsatgreen We need to get this right.

@stopsatgreen Learn a library first, then vanilla.

@stopsatgreen

@stopsatgreen Everybody’s in…

@stopsatgreen Cheers. I’ve been Peter Gasston.

@stopsatgreen Reading list: • webcomponents.org/articles/why-webcomponents/ • hacks.mozilla.org/2015/06/the-state-of-webcomponents/ •
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.

Web Components Now

Web Components Now

More Decks by Peter Gasston

Other Decks in Technology

Featured

Transcript