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
120
Your Reality Here
stopsatgreen
0
68
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
300
Growing Up, Getting Serious
stopsatgreen
0
54
Surveying the Landscape — November 2016
stopsatgreen
1
120
Surveying the Landscape - Fronteers
stopsatgreen
2
430
The Web vs. The Browser
stopsatgreen
0
120
Surveying the Landscape Sept. 2016
stopsatgreen
1
200
Surveying the Landscape
stopsatgreen
4
630
Other Decks in Programming
See All in Programming
C++ MIX #11 これどう読むの...?
5mingame2
0
130
multipart/form-dataの省メモリパース / Go Conference 2024 Pre Party #gocon24_preparty
mazrean
0
280
Towards Structured Data: LLMs from Prototype to Production
inesmontani
PRO
0
110
自作HTTPルーターから新しいServeMuxへ
bmf_san
3
1.2k
Dive into gomock / Go Conference 2024
utgwkk
12
3.2k
Deriving derived state: derivedStateOf explained (dcSF 24)
zachklipp
1
160
バリデーション付きフォームを宣言的に実装する / Declaratively Implementing a Form with Validation
studio_rookery
0
260
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
140
DroidKnights 2024 : Compose Material3 커스텀 디자인 시스템 구축기
kwondae
0
250
RubyKaigi Effect 2023, and ...
tagomoris
1
520
ReactNativeでスケジュール帳を作っている話
mokoshi
0
180
チームの成長を促すためのスプリントレトロスペクティブの活用法 / How to use sprint retrospectives to promote team growth
mackey0225
3
330
Featured
See All Featured
KATA
mclloyd
18
12k
Teambox: Starting and Learning
jrom
129
8.5k
It's Worth the Effort
3n
180
27k
Adopting Sorbet at Scale
ufuk
69
8.7k
Faster Mobile Websites
deanohume
300
30k
GitHub's CSS Performance
jonrohan
1025
450k
The Art of Programming - Codeland 2020
erikaheidi
46
12k
The Cult of Friendly URLs
andyhume
74
5.8k
What's new in Ruby 2.0
geeforr
338
31k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Designing with Data
zakiwarfel
96
4.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
127
32k
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