Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Components: Where we are now, and what’s next?
Search
Peter Gasston
June 19, 2015
Technology
1
190
Web Components: Where we are now, and what’s next?
Responsive Day Out, 19/06/15.
Peter Gasston
June 19, 2015
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
130
Your Reality Here
stopsatgreen
0
80
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
310
Growing Up, Getting Serious
stopsatgreen
0
70
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
150
Surveying the Landscape Sept. 2016
stopsatgreen
1
280
Surveying the Landscape
stopsatgreen
4
740
Other Decks in Technology
See All in Technology
マルチデータプロダクト開発・運用に耐えるためのデータ組織・アーキテクチャの遷移
mtpooh
1
360
ゆもつよがこの30年間自ら経験してきたQA、テストの歴史と未来
ymty
3
490
AIをプロダクトに実装するならAPIで分離しよう 〜タクシーアプリ『GO』のアーキテクチャ実例紹介〜
74th
2
130
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
400
あなたはJVMの気持ちを理解できるか?
skrb
5
2.1k
[2024年10月版] Notebook 2.0のご紹介 / Notebook2.0
databricksjapan
0
1.7k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
360
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
110
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
220
Active Directory の保護
eurekaberry
6
3.1k
High Performance PHP
cmuench
0
120
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
600
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
Side Projects
sachag
452
42k
What's in a price? How to price your products and services
michaelherold
244
12k
Facilitating Awesome Meetings
lara
51
6.2k
The Invisible Side of Design
smashingmag
299
50k
Producing Creativity
orderedlist
PRO
343
39k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
520
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Speed Design
sergeychernyshev
25
760
Transcript
@stopsatgreen Web Components: where we are now, and what next?
Responsive Day Out 19/06/15
@stopsatgreen Peter Gasston @stopsatgreen broken-links.com
@stopsatgreen For the designers.
@stopsatgreen Web Components have been around for a while.
@stopsatgreen In a trough on the hype cycle.
@stopsatgreen Everybody’s in… but that means trouble.
@stopsatgreen Web Components enable us to create widgets. CSS JS
Widget Widget Widget
@stopsatgreen Composable, reusable, encapsulated. CSS JS Widget Widget Widget
@stopsatgreen We run things, things don’t run we, don’t take
nothing from nobody.
@stopsatgreen React, BEM, etc. are ways of doing this using
the technologies of today.
@stopsatgreen The Extensible Web Manifesto. extensiblewebmanifesto.org <picture> <source srcset="foo.png" media="(min-width:
600px)"> <img src="bar.png" alt="Logo"> </picture>
@stopsatgreen Web Components are: Templates, HTML Imports, Custom Elements, Shadow
DOM.
@stopsatgreen Templates. Reusable fragments of inert HTML.
@stopsatgreen <script type="text/x-tmpl-mustache"> … </script> <template>…</template>
@stopsatgreen Templates. OK to use, with fallback for IE/Edge.
@stopsatgreen HTML Imports. Include HTML documents in an HTML document.
@stopsatgreen <link rel="import" href="file.html"> // file.js export foo; // page.js
import foo from "file.js";
@stopsatgreen HTML Imports. Will probably be replaced by ES6 modules.
@stopsatgreen Shadow DOM. Hide complex markup inside an element.
@stopsatgreen root = el.createShadowRoot({ mode: 'open' }); root.innerHTML = '<div>…</div>';
@stopsatgreen Shadow DOM is very hard to polyfill.
@stopsatgreen Shadow DOM. Lots still to be defined.
@stopsatgreen Custom Elements. Meaningful markup with bespoke properties.
@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 // ES6 approach (not final) class fTs extends HTMLElement
{…} document.registerElement('fun-times', fTs); ES6 offers a better way to do this.
@stopsatgreen Custom Elements. Approach is sound, some details to finalise.
@stopsatgreen is A major sticking point.
@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 In summary: welcome to the trough of disillusionment.
@stopsatgreen A tour of the sausage factory.
@stopsatgreen This is our big opportunity. We need to get
this right.
@stopsatgreen A11y, usability, SEO, etc, become our responsibility.
@stopsatgreen Sturgeon’s Revelation: 90% of everything is crap.
@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 Learn a library first, then vanilla.
@stopsatgreen
@stopsatgreen Everybody’s in. but that means trouble. …
@stopsatgreen Cheers.
@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.