Upload
globallogic-ukraine
View
802
Download
0
Embed Size (px)
DESCRIPTION
Meet web components - a new draft spec proposed by Google and used to write reusable and encapsulated widgets that can be attached to DOM isolated. by Anna Khabibullina, Co-Founder at DA-14 for Kharkiv JS&UI Meetup #1
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