Web Components: back to the future

<web-components> Web back to future </web-components>
by Anna Khabibullina

.Agenda
_ Web Components and their parts
_ X-Browser Support
_ Demo
_ Best Practices

.About Me
_ Co-founder of DA-14 Web Dev Team
http://da-14.com
_ Web Engineer
http://sitecues.com
_ Open Source Contributor
http://github.com/akhabibullina
_ Social Person
http://twitter.com/_khabibullina

.What I work on
_ SaaS application(assistive
tool)
_ (No) libraries
_ No frameworks
_ UX design matters
_ Accessibility in mind
.Welcome every problem as opportunity
_ Better understanding
_ R&D challenges
_ Taking advantage of new technologies
_ Experimental features
_ X-browser support for modern browsers

.Web Components Made Of Rainbows
Set of cutting edge [draft] standards
proposed by Google that make it
possible to build secure reusable
widgets using web platform
technologies.

.Web Components
Comprised of four parts:
_ Templates
_ Custom Elements
_ HTML Imports
_ Shadow DOM

Templates: Standardizing client-side templating
_ Why? : Maximize code reusability and maintainability.
_ How? : Declare inert chunks of cloneable DOM with <template>.
_ http://www.html5rocks.com/en/tutorials/webcomponents/template

Templates
_ Inert markup
<table>
<tr>
<template id="cells-to-repeat">
<td>Some content!</td>
</template>
</tr>
</table>
_ Activate template
var t = document.querySelector('template').content;
var clone = document.importNode(t, true);
document.body.appendChild(clone);

.Web Components
Templates
Custom Elements
HTML Imports
Shadow DOM

Custom Elements: Sexy markup
_ Why? : There is nothing modern in <div> soup.
_ How? : Define new types of HTML elements and their APIs.
_ http://www.html5rocks.com/en/tutorials/webcomponents/customelements

Custom Elements
_ JavaScript
var CustomElementProto = Object.create(HTMLElement.prototype);
var XFoo = document.registerElement('x-custom-da-14', {
prototype: CustomElementProto
});
var xfoo = new XFoo();
document.body.appendChild(xfoo);
_ HTML
<x-custom-da-14></x-custom-da-14>

HTML Imports: Simple way to load HTML elements
_ Why? : The web's most basic content, HTML, requires the
greatest amount of effort to work with.
_ How? : Import HTML components via <link rel="import">.
_ http://www.html5rocks.com/en/tutorials/webcomponents/imports

HTML Imports
index.html
<head>
<link rel="import" href="/path/to/import.html">
</head>
<body>
…
</body>
<script> … </script> import.html
…
<div id="blog-post">...</div>
var c = document.querySelector('link[rel="import"]').import; access content

HTML Imports
Yo dawg. I hear you like imports, so I included an import in your import.

Shadow DOM: Separating content from presentation
_ Why? : DOM tree encapsulation problem.
_ How? : Think about DOM hosting DOM, which hosts more DOM.
_
http://www.html5rocks.com/en/tutorials/webcomponent
s/shadowdom

Shadow DOM
_ Video player
<video controls="" autoplay="" name="media">
<source src="http://localhost:1000/media" type="audio/mpeg">
</video>

Shadow DOM
_ http://html5-demos.appspot.com/shadowdom-visualizer

.Web Components
Templates
Standardizing client-side templating
Custom Elements
Sexy markup
HTML Imports
Simple way to load HTML elements
Shadow DOM
Separating content from presentation

.Best Practices
_ Namespacing(bower.io, customelements.io)
_ Mimic built-in elements as closely as possible
_ Don't put too much in Shadow DOM
_ Don't create more custom elements than you need
…..
_ Accessibility
_ Performance
_ Testing
_ http://webcomponents.org/articles/web-components-best-
practices/

.X-Browser Support
_ X-TAG
http://x-tags.org/
_ POLYMER
http://www.polymer-project.
_ http://jonrimmer.github.io/are-we-componentized-yet/
org/
_ BOSONIC
http://bosonic.github.io/

.Demo
_ CUSTOMELEMENTS.IO
A gallery to display Web Components
created by the community.
http://customelements.io/
_ COMPONENT KITCHEN
Component catalog for a mainstream
HTML audience.
http://component.kitchen/
http://html5-demos.appspot.com/static/webcomponents/index.html#1

.Web Components Supporting Cast: Awesome Future Web
_ document.querySelectorAll()
_ Object.observe()
_ MutationObserver
_ CSS variables, calc()
http://wiki.ecmascript.org/doku.php?id=harmony:observe

..YYoouurr t tuurnr…nD…is Dcoisvecro!ver!

.Useful links
_ http://www.w3.org/wiki/WebComponents/
_ http://webcomponents.org/
_ http://habrahabr.ru/post/210058/
_ http://css-tricks.com/modular-future-web-components/
_ http://webcomponents.org/presentations/accessibility-of-web-components-
at-jsconf-us/
_ https://www.youtube.com/watch?v=2txPYQOWBtg
_ http://www.youtube.com/watch?v=eJZx9c6YL8k
_ http://jonrimmer.github.io/are-we-componentized-yet/
_ http://w3c.github.io/webcomponents/spec/custom/#es6

Web Components: back to the future

Recommended

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Web Components: back to the future (20)

More from DA-14 (11)

Recently uploaded (20)

Web Components: back to the future

Editor's Notes