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
November 24, 2014
Technology
0
62
Web Components: What, Why, How, When
Given at #lwsroots, 24th November 2014.
Peter Gasston
November 24, 2014
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
110
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
110
Surveying the Landscape Sept. 2016
stopsatgreen
1
180
Surveying the Landscape
stopsatgreen
4
580
Other Decks in Technology
See All in Technology
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
Challenges - Open Farming Hackdays 2024
loleg
0
540
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.6k
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
160
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
830
任意コード実行の原理
ffri
0
170
Cloud Friendly(?) Jenkins. How we failed to make Jenkins cloud native and what we learned?
onenashev
PRO
0
110
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
200
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
バッチ処理のSLOをどう設計するか
rynsuke
7
560
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
BBQ
matthewcrist
78
8.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
GraphQLとの向き合い方2022年版
quramy
28
12k
Why Our Code Smells
bkeepers
PRO
330
56k
Designing for Performance
lara
601
67k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
GitHub's CSS Performance
jonrohan
1023
450k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Transcript
@stopsatgreen WEB COMPONENTS What, Why, How, When #LWSROOTS, 24/11
@stopsatgreen @stopsatgreen Peter Gasston broken-links.com
@stopsatgreen WEB COMPONENTS
@stopsatgreen ‘Demeaning’ ‘Condescending’ ‘A bit silly’
@stopsatgreen
@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
@stopsatgreen Shadow DOM
@stopsatgreen HTML Imports
@stopsatgreen
@stopsatgreen Templates
@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 #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 <indiana-jones></indiana-jones> document.registerElement('indiana-jones');
@stopsatgreen proto = Object.create(HTMLElement.prototype); proto.whip = function(…); document.registerElement('indiana-jones', { prototype:
proto }); indy = document.querySelector('indiana-jones'); indy.whip();
@stopsatgreen <button is="indiana-jones"></button> proto = Object.create(HTMLButtonElement.prototype); proto.whip = function(…); document.registerElement('indiana-jones',
{ prototype: proto, extends: 'button' });
@stopsatgreen
@stopsatgreen
@stopsatgreen var root = foo.createShadowRoot(); root.innerHTML = '<div>…</div>';
@stopsatgreen <indiana-jones> <template id="doom">…</template> <script>…</script> </indiana-jones>
@stopsatgreen <link rel="import" href="button-super.htm">
@stopsatgreen http://leafletjs.com/
@stopsatgreen <leaf-map lat="33.9186805" lon="8.1198406"></leaf-map> <link rel="import" href="leaflet-map.htm">
@stopsatgreen Everything Useful Useful & well-made Crap http://en.wikipedia.org/wiki/Sturgeon%27s_law
@stopsatgreen http://addyosmani.com/first/
@stopsatgreen http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
@stopsatgreen
@stopsatgreen
@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 WHEN?
@stopsatgreen Browser Custom Elements Shadow DOM HTML Imports Template Who
knows? ‘Under consideration’ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ http://jonrimmer.github.io/are-we-componentized-yet/
@stopsatgreen
Platform.js (polyfill) Polymer Core Bosonic Core Elements Brick Paper Elements
Elements polymer-project.org | brick.mozilla.io | bosonic.github.io | webcomponents.org Standard
@stopsatgreen Web Components are for you to drive the future
of the web. Please drive responsibly.
@stopsatgreen THE END
@stopsatgreen Unless otherwise stated, all photos in this deck are
copyright George Lucas or Mickey Mouse or someone and used without permission.