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
53
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
190
Surveying the Landscape
stopsatgreen
4
600
Other Decks in Programming
See All in Programming
Open AI APIを使う前に知っておきたいアカウントTier の話
akki_megane
0
110
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
510
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
430
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
940
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
Sheets API使ってみた
toshi0383
2
170
Going beyond Apache Parquet's default settings
xhochy
0
140
AmperとFleetを使ったAndroidアプリ
yoppie
0
280
Goのエラースタックトレースの歴史と今後
sonatard
10
2k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
Ruby Function Composition
bkuhlmann
1
340
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
Facilitating Awesome Meetings
lara
43
5.6k
Infographics Made Easy
chrislema
238
18k
Into the Great Unknown - MozCon
thekraken
15
1k
Debugging Ruby Performance
tmm1
70
11k
YesSQL, Process and Tooling at Scale
rocio
165
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Teambox: Starting and Learning
jrom
128
8.4k
Done Done
chrislema
178
15k
Navigating Team Friction
lara
179
13k
Designing Experiences People Love
moore
136
23k
Fireside Chat
paigeccino
22
2.6k
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