1. Web Components
전용우
12년 7월 19일 목요일

2. Google I/O 2012
The Web Platform's Cutting Edge.
12년 7월 19일 목요일

3. 12년 7월 19일 목요일

4. 12년 7월 19일 목요일

5. 12년 7월 19일 목요일

6. 12년 7월 19일 목요일

7. 12년 7월 19일 목요일

8. UI Component
12년 7월 19일 목요일

9. Widget
12년 7월 19일 목요일

10. 12년 7월 19일 목요일

11. 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일 목요일

12. 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일 목요일

13. 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();
});
12년 7월 19일 목요일

14. http://www.flickr.com/photos/exalthim/2150224411/
12년 7월 19일 목요일

15. Complexity
12년 7월 19일 목요일

16. Performance
12년 7월 19일 목요일

17. Resource
12년 7월 19일 목요일

18. Rendering
12년 7월 19일 목요일

19. Web Components
12년 7월 19일 목요일

20. • Shadow DOM
• Custom Element
• Template
• Decorator
12년 7월 19일 목요일

21. Shadow DOM
12년 7월 19일 목요일

22. 12년 7월 19일 목요일

23. <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일 목요일

24. <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일 목요일

25. <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일 목요일

26. <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>
<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일 목요일

27. Encapsulation
12년 7월 19일 목요일

28. 12년 7월 19일 목요일

29. 12년 7월 19일 목요일

30. 12년 7월 19일 목요일

31. <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일 목요일

32. <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일 목요일

33. <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>
<div id="scrollview-container">
Rendered <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일 목요일

34. <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>
<div id="scrollview-container"> Shadow DOM
Rendered <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일 목요일

35. <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일 목요일

36. 12년 7월 19일 목요일

37. video tag?
12년 7월 19일 목요일

38. Custom Element
12년 7월 19일 목요일

39. 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일 목요일

40. <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일 목요일

41. 12년 7월 19일 목요일

42. Template
<template>
<style>
.slide{
overflow:hidden;
width : 500px;
}
</style>
<div class="slide">
<ul>
<content select="li"></content>
</ul>
</div>
</template>
12년 7월 19일 목요일

43. Template
<template>
<style>
.slide{
overflow:hidden;
width : 500px;
}
</style>
<div class="slide">
<ul>
<content select="li"></content>
</ul>
</div>
</template>
12년 7월 19일 목요일

44. 12년 7월 19일 목요일

45. 12년 7월 19일 목요일

46. 12년 7월 19일 목요일

47. <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일 목요일

48. 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
12년 7월 19일 목요일

49. lifecycle
this.lifecycle({
"created": function() {},
"attributeChanged": function() {},
"inserted": function() {},
"removed": function() {}
});
12년 7월 19일 목요일

50. Web Components
• Easy-to-Use
• Semantic
• High Performance
12년 7월 19일 목요일

51. Future?
12년 7월 19일 목요일

52. 감사합니다.
12년 7월 19일 목요일