web component
TRANSCRIPT
Web Components전용우
12년 7월 19일 목요일
Google I/O 2012
The Web Platform's Cutting Edge.
12년 7월 19일 목요일
12년 7월 19일 목요일
12년 7월 19일 목요일
12년 7월 19일 목요일
12년 7월 19일 목요일
12년 7월 19일 목요일
UI Component
12년 7월 19일 목요일
Widget
12년 7월 19일 목요일
12년 7월 19일 목요일
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>
12년 7월 19일 목요일
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>
12년 7월 19일 목요일
JavaScriptYUI().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();});
12년 7월 19일 목요일
http://www.flickr.com/photos/exalthim/2150224411/
12년 7월 19일 목요일
Complexity
12년 7월 19일 목요일
Performance
12년 7월 19일 목요일
Resource
12년 7월 19일 목요일
Rendering
12년 7월 19일 목요일
Web Components
12년 7월 19일 목요일
• Shadow DOM
• Custom Element
• Template
• Decorator
12년 7월 19일 목요일
Shadow DOM
12년 7월 19일 목요일
12년 7월 19일 목요일
<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>
12년 7월 19일 목요일
<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>
12년 7월 19일 목요일
<x-slide> <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="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li></x-slide>
12년 7월 19일 목요일
<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>
<x-slide> <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="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li></x-slide>
12년 7월 19일 목요일
Encapsulation
12년 7월 19일 목요일
12년 7월 19일 목요일
12년 7월 19일 목요일
12년 7월 19일 목요일
<x-slide> <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="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li></x-slide>
12년 7월 19일 목요일
<x-slide> <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="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li></x-slide>
Rendered
12년 7월 19일 목요일
<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>
<x-slide> <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="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li></x-slide>
Rendered
12년 7월 19일 목요일
<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>
<x-slide> <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="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li></x-slide>
RenderedShadow DOM
12년 7월 19일 목요일
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /></video>
12년 7월 19일 목요일
12년 7월 19일 목요일
video tag?
12년 7월 19일 목요일
Custom Element
12년 7월 19일 목요일
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>
12년 7월 19일 목요일
<link rel="components" href="slide-component.html"/>
<x-slide is="x-slide"> <li><img src="img/1.jpeg" height="333px" width="500px"/></li> <li><img src="img/2.jpeg" height="333px" width="500px"/></li> <li><img src="img/3.jpeg" height="333px" width="500px"/></li> <li><img src="img/4.jpeg" height="333px" width="500px"/></li></x-slide>
12년 7월 19일 목요일
12년 7월 19일 목요일
<template> <style>
.slide{ overflow:hidden; width : 500px; }
</style> <div class="slide"> <ul> <content select="li"></content> </ul> </div></template>
Template
12년 7월 19일 목요일
<template> <style>
.slide{ overflow:hidden; width : 500px; }
</style> <div class="slide"> <ul> <content select="li"></content> </ul> </div></template>
Template
12년 7월 19일 목요일
12년 7월 19일 목요일
12년 7월 19일 목요일
12년 7월 19일 목요일
<x-slide is="x-slide"> <li><img src="img/1.jpeg" height="333px" width="500px"/></li> <li><img src="img/2.jpeg" height="333px" width="500px"/></li> <li><img src="img/3.jpeg" height="333px" width="500px"/></li> <li><img src="img/4.jpeg" height="333px" width="500px"/></li></x-slide>
<div class="slide"> <ul> <content select="li"></content> </ul></div>
12년 7월 19일 목요일
<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 //==> truesilde instanceof HTMLULElement //==> true
HTMLElement
12년 7월 19일 목요일
this.lifecycle({
"created": function() {},
"attributeChanged": function() {},
"inserted": function() {},
"removed": function() {}
});
lifecycle
12년 7월 19일 목요일
Web Components
• Easy-to-Use
• Semantic
• High Performance
12년 7월 19일 목요일
Future?
12년 7월 19일 목요일
감사합니다.
12년 7월 19일 목요일