더 나은 웹표준을 위한 web components
TRANSCRIPT
광고네트워크플랫폼개발팀전 정호
더 나은 웹 표준을 위한web Components
Polymer.js
Polymer? Web Compo-nents?
• 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>
In 1990’s <Select>
<select size=“4” multiple> <option>Do</option><option>Re</option><option>Mi</option>…</select>
In 1990’s <Select>
<select><optgroup label="German Cars"><option>Mercedes</option><option>Audi</option></optgroup>...</select>
HTML SelectElement Spec
탭 이동 모듈을 구현해보자
그럼 지금은 ?
개별 라이브러리 개발 적용 시 학습 비용 증가
게다가 점점 복잡해지는 마크업 구조
이게 우리가 개발하는 방식인거죠
<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(‘script’), 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 doc-ument.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 를 쉽게 사용하고
만들도록 도와줌
Polymer.js
EveryThing is an Ele-ment!
HTML is cool. DOM feels good.- Polymer Elements- Polymer UI Ele-
ments
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-re-sponse', 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 Evolu-
tion!!• http://polymer-project.org
Future of Polymer.js
감사합니다 !