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
290
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Technology
See All in Technology
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
220
君も受託系GISエンジニアにならないか
sudataka
2
440
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
740
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
370
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
100
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
630
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
410
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1k
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.7k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
740
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
2
3k
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.6k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Code Reviewing Like a Champion
maltzj
521
39k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
How to train your dragon (web standard)
notwaldorf
91
5.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Being A Developer After 40
akosma
89
590k
Speed Design
sergeychernyshev
27
790
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.