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
320
Growing Up, Getting Serious
stopsatgreen
0
71
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
280
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Technology
See All in Technology
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
High Performance PHP
cmuench
0
140
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
Larkご案内資料
customercloud
PRO
0
600
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
240
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Building Adaptive Systems
keathley
40
2.4k
Making Projects Easy
brettharned
116
6k
Building Your Own Lightsaber
phodgson
104
6.2k
Embracing the Ebb and Flow
colly
84
4.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
What's in a price? How to price your products and services
michaelherold
244
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Done Done
chrislema
182
16k
GitHub's CSS Performance
jonrohan
1030
460k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
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.