Web component

Web Components
전용우

12년 7월 19일 목요일

Google I/O 2012
The Web Platform's Cutting Edge.


UI Component


Widget


Resource

<link rel="stylesheet" href="../assets/scrollview/horizontal.css"
type="text/css" charset="utf-8">

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-
min.js"></script>


HTML
<div id="scrollview-container">
<div id="scrollview-header">
<h1>Paged ScrollView</h1>
</div>

<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</ul>
</div>

<div id="scrollview-pager">
<button id="scrollview-prev">Prev</button>
<button id="scrollview-next">Next</button>
</div>
</div>

<div id="additional-content">
<p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
<p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
</div>

JavaScript
YUI().use('scrollview', 'scrollview-paginator', function(Y) {

var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode : '#scrollview-content',
width : 320,
flick: {
minDistance:10,
minVelocity:0.3,
axis: "x"
}
});

scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
});

scrollView.render();
});


http://www.ﬂickr.com/photos/exalthim/2150224411/


Complexity


Performance


Resource


Rendering


Web Components


• Shadow DOM
• Custom Element
• Template
• Decorator


Shadow DOM


</div>

<ul>
</ul>
</div>

</div>
</div>

</div>


<x-slide>
<li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li>
</x-slide>


<x-slide>
</x-slide>

</div>

<ul>
</ul>
</div>

</div>
</div>

</div>


Encapsulation


<x-slide>
</x-slide>

Rendered


<x-slide>
</x-slide>


Rendered <div id="scrollview-header">
</div>

<ul>
</ul>
</div>

</div>
</div>

</div>


<x-slide>
</x-slide>

<div id="scrollview-container"> Shadow DOM
Rendered <div id="scrollview-header">
</div>

<ul>
</ul>
</div>

</div>
</div>

</div>


video tag?


Custom Element


slide-component.html
<element name="x-slide" extends="ul" constructor="SlideControl">
<template>
<style></style>
<div class="slide">
<ul>
<content select="li"></content>
</ul>
</div>
</template>

<script>
this.lifecycle({
"created":function(){}
});

SlideControl.prototype={};
</script>
</element>


Template
<template>
<style>

.slide{
overﬂow:hidden;
width : 500px;
}

</style>
<div class="slide">
<ul>
</ul>
</div>
</template>


<x-slide is="x-slide">
</x-slide>

<div class="slide">
<ul>
</ul>
</div>


HTMLElement
<element name="x-slide" extends="ul" constructor="SlideControl">

---

function SlideControl(){};

SlideControl.prototype {
"currentNum" : function(){},
"lastNum" : function(){}
};

var slide = new SlideControl();
// var slide = document.createElement("x-slide");

document.body.appendChild(slide);
slide.addEventListener("click", function (event) {
event.target.currentNum();
});
side.lastNum();

silde instanceof HTMLElement //==> true
silde instanceof HTMLULElement //==> true


lifecycle
this.lifecycle({

"created": function() {},

"attributeChanged": function() {},

"inserted": function() {},

"removed": function() {}

});


Web Components

• Easy-to-Use
• Semantic
• High Performance


Future?


감사합니다.


Web component

More Related Content

More from yongwoo Jeon (11)

Web component