더 나은 웹표준을 위한 Web Components

광고네트워크플랫폼개발팀
젂 정호
더 나은 웹 표준을 위핚
web Components
Polymer.js

Polymer? Web Components?
• New type of library
• 기존 짂도, jQuery 컴포넌트와 기능상 비슷
• 컴포넌트를 만들어주는 기술

In 1990’s <Input>
<input type=“submit"></input>
<input type=“file"></input>
<input type=“password"></input>
<input type=“checkbox"></input>
<input type=“radio"></input>

In 1990’s <Select>
<select>
...
<option disabled>Medium</option>
<option disabled>Large</option>
<option selected>XX-large</option>
</select>

<select>
<optgroup label="German Cars">
<option>Mercedes</option>
<option>Audi</option>
</optgroup>
...
</select>

탭 이동 모듈을 구현해보자
그럼 지금은?
개별 라이브러리 개발 적용 시 학습 비용 증가

게다가 점점 복잡해지는 마크업 구조

이게 우리가 개발하는 방식인거죠

<select></select> 처럼
쉽고 간단하고 의미있고
이해하기 쉬운
엘레먼트로 표현하자
Web Components

Web Component의 구성
• Custom Elements
• Shadow DOM
• Template Tag
• HTML Import

Custom Elements
• 개발자가 직접 태그를 지정해 만들 수 있음
• 만들어짂 태그는 Native 태그처럼 동일하게 사용
• 기존 Native Tag를 확장해 사용핛 수 있음
• 이벤트 / 속성 추가

Custom Elements
[Element registration]
var XFooPrototype = Object.create(HTMLElement.prototype);
XFooPrototype.createdCallback = function() {
this.textContent = "I'm an x-foo!";
};
XFooPrototype.foo = function() {
console.log('foo() called');
};
var XFoo = document.registerElement(“x-foo”, { prototype:
XFooPrototype });
[Using a custom element]
1. <x-foo></x-foo>
2. var xFoo = new XFoo();
3. var xFoo = document.createElement(‘x-foo');
xFoo.foo(); // "foo() called"

Shadow DOM
• 대상 노드 하위에 숨겨져 있는 DOM subtree
• 일반적인 방법으로 내부 접근 불가
• Encapsulation

Shadow DOM
[Basic Usage]
<button>Hello, world!</button>
<script>
var elButton = document.querySelector(‚button‛);
var elShadowRoot = elButton.createShadowRoot();
elShadowRoot.textContent = ‚안녕하세요!‛;
</script>

<template></template>
• 마크업에서 템플릿을 표현
• 초기 페이지 로드 시 영향을 주지 않음
• 비 활성화된 재사용 가능핚 DOM chunk
• 사용되기 젂엔 스크립트, 이미지, 오디오 재생 안됨

<template></template>
<template>
<div>Template Sample</div>
<script>alert('Thanks!')</script>
</template>
<button onclick="useIt()">Use me</button>
<div id="container"></div>
<script>
function useIt() {
var content = document.querySelector('template').content;
document.querySelector('#container')
.appendChild(document.importNode(content.querySelector(‘sc
ript’), true)); }
</script>

HTML Import
• 다른 문서를 현재 문서에 포함시켜 재사용하는 방법
• 실제로 페이지 DOM에 포함되지 않음
• 페이지 자체를 다른 영역에 두고 관리
• HTML외에 CSS,JS도 가져올 수 있음

HTML Import
[main.html]
<head><link rel="import" href="warnings.html"></head>
<body><script>
var link = document.querySelector(‚link[rel="import"]‛);
var content = link.import; // Grab DOM from warning.html's
document.
var el = content.querySelector(“.warning”);
document.body.appendChild(el.cloneNode(true));
</script></body>
[warnings.html]
<div class="warning">
<style scoped> h3 { color: red; } </style>
<h3>Warning!</h3> <p>This page is under construction</p></div>
<div class="outdated"><h3>Heads up!</h3>
<p>This content may be out of date</p></div>

Web Component 예제
Custom Elements, Shadow DOM, Template Tag,
Lifecycle Callback을 활용핚 Web Component 예제
(DEMO)

하지만..
• Custom Elements
• Shadow DOM
• Template Tag
• HTML Import
=> (All X)
=> (Chrome,Opera O)
=> (IE X)
=> (All X)

Polymer.js
• Google 에서 개발핚 라이브러리
• Polyfill을 통핚 모든 브라우저에 사용 가능하도록 대응
• Web Component를 쉽게 사용하고 만들도록 도와줌

EveryThing is an Element!
HTML is cool. DOM feels good.
- Polymer Elements
- Polymer UI Elements

Polymer Elements
• UI 렌더링을 하지 않는 유틸리티 엘레먼트
• 기능적인 요소를 담당
• ajax, jsonp, cookie, file, meta..

<polymer-ajax>
[HTML]
<polymer-ajax
url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
[JS]
var ajax = document.querySelector('polymer-ajax');
ajax.addEventListener('polymer-response',
function(e) {
console.log(JSON.parse(this.response).feed.entry);
});
ajax.go();

Polymer UI Elements
• 기본적인 UI 컴포넌트
• UI widget 등이 포함
• accordion, breadcrumbs, card, clock, dropdown..

Polymer UI Elements
• <polymer-ui-clock> (데모보기)
• <polymer-ui-card> (데모보기)
• <polymer-ui-accordion> (데모보기)

Custom elements with Polymer
<polymer-element name=“naver-search” attributes=“width
height”>
<template>
<input type=‚text‛
style=‚width:{{width}}px;height:{{height}}px‛ />
<button on-click=‚{{searchBtnClick}}‛>검색</button>
</template>
<script>
Polymer(‚naver-search‛, { width:150, height:30,
searchBtnClick: function(e) {…} });
</script>
</polymer-element>
<naver-search width=‚100‛></naver-search>

Why Polymer?
• 웹 페이지가 시멘틱해지고 단순해짐
• 모듈화가 잘 되어 있어 사용하기 쉽고 재사용의 이점
• 동작하는 영역이 분리되어 성능 좋음
• Light DOM을 이용, 웹 접근성이 좋음
• 근 미래에 컴포넌트의 표준이 될 가능성 높음

• Angular.js, Ember.js, Dart 에 차용될 예정
• 더 나은 웹 생태계를 위해 W3C 표준안으로 채택되도록
끊임없이 연구하고 푸시하는 중
• Experimental? But Web Evolution!!
• http://polymer-project.org
Future of Polymer.js

더 나은 웹표준을 위한 Web Components

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to 더 나은 웹표준을 위한 Web Components

Similar to 더 나은 웹표준을 위한 Web Components (20)

더 나은 웹표준을 위한 Web Components

Editor's Notes