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: What, Why, How, When
Search
Peter Gasston
March 04, 2015
Programming
2
110
Web Components: What, Why, How, When
Revised and updated version of an older talk, presented at the Web Components London meetup.
Peter Gasston
March 04, 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 Programming
See All in Programming
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
Software Architecture
hschwentner
6
2.1k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Immutable ActiveRecord
megane42
0
130
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
A designer walks into a library…
pauljervisheath
205
24k
Building Applications with DynamoDB
mza
93
6.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Transcript
@stopsatgreen WEB COMPONENTS What, Why, How, When #WCLDN, 04/03
@stopsatgreen @stopsatgreen Peter Gasston broken-links.com
@stopsatgreen WEB COMPONENTS
@stopsatgreen http://en.wikipedia.org/wiki/H%C3%A9lio_Oiticica
@stopsatgreen
@stopsatgreen WHAT?
@stopsatgreen “The component model for the Web.”
@stopsatgreen A suite of technologies for making reusable UI controls
or services.
@stopsatgreen Fundamental change to the way we build the Web.
@stopsatgreen
@stopsatgreen
@stopsatgreen
@stopsatgreen ® The Lego Group
@stopsatgreen Custom Elements + Shadow DOM + HTML Imports +
Templates = Web Components
@stopsatgreen WHY?
@stopsatgreen
@stopsatgreen OOCSS BEM Java Applets Dynamic Drive React Ember jQuery
UI Bootstrap Web Components
@stopsatgreen W3C WHATWG
@stopsatgreen
@stopsatgreen • jQuery : querySelector(), classList • Modernizr : @supports
• Sass : --custom-properties()
@stopsatgreen Let us make the tools we need.
@stopsatgreen #extendthewebforward http://extensiblewebmanifesto.org/
@stopsatgreen <flex-carousel> <prev-next> <show-position> <open-lightbox>
@stopsatgreen http://msdn.microsoft.com/library/ie/ms531426.aspx
@stopsatgreen
@stopsatgreen
@stopsatgreen
@stopsatgreen meaningful naming + modularisation + encapsulation + sharing =
web components
@stopsatgreen HOW?
@stopsatgreen Custom Elements
@stopsatgreen <fun-times></fun-times> document.registerElement('fun-times');
@stopsatgreen <fun-times></fun-times> = HTMLElement <funtimes></funtimes> = HTMLUnknownElement
@stopsatgreen fun-times:unresolved {…}
@stopsatgreen proto = Object.create(HTMLElement.prototype); proto.hooray = function() {…}; document.registerElement('fun-times', {
prototype: proto }); funTimes = document.querySelector('fun-times'); funTimes.hooray();
@stopsatgreen proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() {…}; document.registerElement('fun-times', {
prototype: proto });
@stopsatgreen <button is="fun-times"></button> proto = Object.create(HTMLButtonElement.prototype); proto.hooray = function() {…};
document.registerElement('fun-times', { prototype: proto, extends: 'button' });
@stopsatgreen Shadow DOM
@stopsatgreen
@stopsatgreen
@stopsatgreen var root = foo.createShadowRoot(); root.innerHTML = '<div>…</div>';
@stopsatgreen Templates
@stopsatgreen <template id="party">…</template> var party = document.getElementById('party'); var partyContent =
party.content;
@stopsatgreen var funTimes = document.querySelector('fun-times'); var proto = Object.create(HTMLElement.prototype); proto.hooray
= function() {…}; proto.createdCallback = function() { var party = document.getElementById('party'); var clone = document.importNode(party.content,true); var root = funTimes.createShadowRoot(); root.appendChild(clone); } document.registerElement('fun-times', { prototype: proto });
@stopsatgreen HTML Imports
@stopsatgreen <link rel="import" href="fun-times.htm">
@stopsatgreen http://leafletjs.com/
@stopsatgreen <leaf-map lat="33.9186805" lon="8.1198406"></leaf-map> <link rel="import" href="leaflet-map.htm">
@stopsatgreen But it’s not all rosy.
@stopsatgreen The is="" pattern. https://lists.w3.org/Archives/Public/public-webapps/2015JanMar/0206.html
@stopsatgreen <button is="fun-times"></button> <h1 is="h-7"></h1> <iframe is="new-button"></iframe>
@stopsatgreen document.registerElement('fun-times'); var funRoot = funTimes.createShadowRoot(); funRoot.innerHTML = '<button>…</button>';
@stopsatgreen HTML Imports have huge potential for performance problems…
@stopsatgreen /path/to/library.min.js /path/to/a/library.min.js
@stopsatgreen <link rel="import" href="//foo.com/btn-a.htm"> <link rel="import" href="//bar.com/btn-b.htm"> <link rel="import" href="//baz.com/btn-c.htm">
@stopsatgreen … so Firefox won’t implement.
@stopsatgreen WHEN?
@stopsatgreen Browser Custom Elements Shadow DOM HTML Imports Template Who
knows? ‘Under consideration’ ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓ http://jonrimmer.github.io/are-we-componentized-yet/
@stopsatgreen Web Components will happen. Maybe not in this form,
but the concept is solid.
@stopsatgreen
webcomponents.js (polyfills) Polymer Core Bosonic Core Elements Brick Paper Elements
Elements polymer-project.org | brick.mozilla.io | bosonic.github.io | webcomponents.org Standard
@stopsatgreen Web Components vs. React (etc)
@stopsatgreen Everything Useful Useful & well-made Crap http://en.wikipedia.org/wiki/Sturgeon%27s_law
@stopsatgreen Sturgeon’s Law: 90% of everything is crap
@stopsatgreen http://addyosmani.com/first/
@stopsatgreen http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
@stopsatgreen Web Components are for you to drive the future
of the web. Please drive responsibly.
@stopsatgreen THE END