Upload
da-14
View
426
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Meet the possible future of Web: web components. 4 parts of web components can be used separately or together and allow us create reusable modules which we call "widgets".
Citation preview
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