Web Components: What, Why, How, and When
-
Upload
peter-gasston -
Category
Technology
-
view
230 -
download
1
Transcript of Web Components: What, Why, How, and When
@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>
@stopsatgreenhttp://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">
@stopsatgreenhttp://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
@stopsatgreenhttp://addyosmani.com/first/
@stopsatgreenhttp://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.