PowerPoint

Web back to future

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

3

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

4

.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

4 ,

6

Templates: Standardizing client-side templating

_ http://www.html5rocks.com/en/tutorials/webcomponents/template

_ Why? : Maximize code reusability and maintainability.

_ How? : Declare inert chunks of cloneable DOM with .

, - .

7

Templates

_ Inert markup

Some content!

_ Activate template

var t = document.querySelector('template').content;

var clone = document.importNode(t, true);

document.body.appendChild(clone);

, querySelector() getElementById()

, , or