@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.