Web Components 개요

Web Components 개요

Agenda

Web Components 란 무엇인가 ? Web Components 의 구성요소

› 템플릿› 데코레이터› 커스텀 요소› Shadow DOM

Web Components 는 Web 을 어떻게 바꿀 것인가 ?

Web Components 란 무엇인가 ?

→Web 의 UI 를「컴포넌트화」하기 위한 스펙군

Web 에는컴포넌트화가필요하다 .

유지 , 보수성

재이용성

개발효율

Web 에는컴포넌트화가필요하다 .

Web Components 개요

Google 에 의해 스펙 제안 2012/10 현재 , Google Chrome 이 일부를

이미 구현함 일부 스펙이 공식 초안으로써 공개

› 일반적으로 사용 가능하게끔 하기 위해서는 아직 시간이 걸릴 듯 하다

Web Components 의 구성요소

Web Components 를 구성하는 4 개의 요소

템플릿 데코레이터

커스텀 요소 Shadow DOM

HTML 템플릿

HTML 템플릿

현재 JavaScript 로 UI 를 주무르는 방법은 두가지가 있다 .› 문자열 템플릿› DOM 조작

현재 JavaScript 로 UI 를 주무르는 방법은 두가지가 있다 .› 문자열 템플릿

DOM 을 고려하지 않음 비표준

› DOM 조작

<script id="tmpl1" type="text/x-handlebars-template"> <div>...</div></script>

HTML 템플릿


코드를 작성하기 힘들다 결과를 예측하기 어렵다

var div = document.getElementById('...');div.setAttribute('key', 'value');var p = document.createElement('p');p.innerHTML = '...';div.appendChild(p);

HTML 템플릿


코드를 작성하기 힘들다 결과를 예측하기 어렵다

HTML 템플릿으로해결 !

HTML 템플릿

HTML 템플릿 정의방법

<template> 요소를 사용한다 .› <template> 안에 평소대로 HTML 를

기술한다› <template> 은 랜더링되지 않는다 .› <body>, <head> 에 정의<html>

<head> <template id="t"> <div id="message"></div> </template></head><body></body></html>

HTML 템플릿을 사용한다

Content 설정으로부터 내부 DOM 을 취득한다 .

<template id="t"> <div id="message"></div></template>

var tmplElem = document.getElementById('t');var tmpl = tmplElem.content.cloneNode();

…

elem.appendChild(tmpl);

HTML 템플릿

솔직히 , 이것만으로는 전혀 편리하지 않다 . 데코레이터 , 커스텀 요소에서 사용되는

범용요소라고 이해해야한다 . 「템플릿이다」라는 시맨틱을 부여할 수

있다는 것이 장점 .› 지금까지의 <script> 요소보다 보기좋다 .

<script type="text/x-handlbars-template"></script>

데코레이터

CSS 의 한계를 뛰어넘는다

CSS 의 한계는 ?

DOM 조작이 불가능하다

<ul> <li> <i> 아이콘 </i> <span> 앱 센터 </span> <span>2</span> </li> …</ul>

… 대충 요정도로 끝날것 같은 부분이지만… 쩜쩜쩜

데코레이터

요소를 「데코레이션」하기위한 구조 HTML 안에서 정의하고 , CSS 안에서

사용한다

데코레이터의 정의

<decorator> 요소와 <template> 요소를 사용하여 정의한다 .

<decorator id="labelDecorator"> <template> 라벨： </template></decorator>

데코레이터의 사용

CSS 안에서 decorator 설정을 사용하여 요소에 지정한다 .

/* 모든 label 요소를 「라벨 : 」 로 변경 */label { decorator: url(#labelDecorator); }

<label for="name"> 이름</label><input id="name">

템플릿 안에서 <content> 요소를 사용하여 요소내용을 투입할 장소 지정이 가능하다 .

<decorator id="labelDecorator"> <template>  <content></content> ： </template></decorator>

<label for="name"> 이름</label><input id="name">

데코레이터의 사용

여러 개의 <content> 요소 지정하기

<content> 는 복수지정이 가능하다 . Select 속성을 적용하여 요소내용의 일부를

추출하여 투입할 수 있다 .

<decorator id="fieldRowDecorator"> <template> <div> <!– 여기에 요소 내용이 투입됨 --> <content select="label"></content> ： </div> <!– 남은 요소는 여기에 투입됨 --> <div id="field"><content></content></div> </template></decorator>

/* 라벨과 필드의 조합 */.fieldRow { decorator: url(#fieldDecorator); }

<div class="fieldRow"><label for="name"> 이름</label><input id="name"></div>

여러 개의 <content> 요소 지정하기

Advanced:데코레이터의 스타일링

scope 속성이 부여된 style 요소를 사용

<decorator id="fieldRowDecorator"> <template> <style scoped>...</style> … </template></decorator>

데코레이터는 listen() 이라는 메소드를 사용하여 이벤트 핸들러를 등록한다 .

데코레이터의 코드가 실행되는것은 , 로드될때 딱 한 번 .

<decorator id="decorator-event-demo"> <script> function h(event) { alert(event.target); } this.listen( {selector: "#b", type: "click", handler: h}); </script> <template> <content></content> <button id="b">Bar</button> </template></decorator>

Advanced:데코레이터 내의 이벤트 처리

데코레이터

어디까지나 “표시”를 목적으로 하는 기능이다 .› Shadow DOM( 나중에 설명 ) 은 지니지 않는다 .› 데코레이터로 정의된 DOM 에는 접근할 방법이

없다 . 스타일링 목적의 필요없는 마크업을

극적으로 줄일 수 있기 때문에 꽤 강력하다 .

커스텀 요소

커스텀 요소란 ?

요소를

내가 직접 만들수 있어요 !!!!

커스텀 요소의 정의

<element> 요소를 사용한다 . name 속성에 요소명을 지정한다 .

› 새로 만드는 요소에는 「 x- 」라는 접두어를 반드시 붙여야한다 .

extends 속성에 미지원 브라우저에서 보일 요소를 지정해 준다 .

<element name="x-fancybutton” extends="button"> <template> <!–- 데코레이터와 동일 --> … </template></element>

요소에 is 속성을 지정하여 커스텀 요소의 명칭을 지정한다 .

대상이 되는 요소는 커스텀 요소의 extends와 일치해야할 필요가 있다 .

<button is="x-fancybutton"> <span> 버튼입니당 </span></button>

커스텀 요소의 사용

Advanced:커스텀 요소의 인스턴스화

커스텀 요소는 통상적인 요소와 동일하게 document.createEle-ment() 로 인스턴스화가 가능하다 .

constructor 속성으로 생성자를 생성할 수도 있다 .

var e = document.createElement('x-fancybutton');

<element name="x-fancybutton" extends="button" constructor="FancyButton">...</element>

var fancyButton = new FancyButton();

생성자의 프로토 타입을 변경하여 요소의 독자적인 퍼포먼스를 추가한다 .

<element ... constructor="FancyButton"> <script> FancyButton.prototype.razzle = ... // constructor 속성을 사용하지 않은 경우에는 // 아래 코드로 생성자에 접근 // var FancyButton = this.generatedConstructor; </script> ...</element>

Advanced:커스텀 요소의 클래스 정의

커스텀 요소는 아래와 같은 라이프 사이클 이벤트를 잡고 처리를 행한다 .› created› attributeChanged› inserted› removed

<element extends="time" name="x-clock"><script>this.lifecycle({ inserted: function(){ this.startUpdatingClock(); }, removed: function() { this.stopUpdatingClock(); }});</script></element>

Advanced:커스텀 요소의 라이프 사이클

Shadow DOM

Shadow DOM 이란 ?

개발자의 시선에서 숨겨진 DOM 트리 복잡한 내부구조를 은폐하고 심플한 DOM

으로 보이게 할 수 있다 .(= 캡슐화 )

Shadow DOM 의 구현상황

Google Chrome に은 Shadow DOM 이 구현되어 있다 .

표준적인 요소의 대부분이 Shadow DOM으로 구현되어 있다 .› video/audio/textarea/details/input...

Shadow DOM 을 “보자”

chrome://flags 에서 다음의 설정을 ON으로 한다 .› Shadow DOM 을 체크› <style scoped> 을 체크

Shadow DOM 을 사용하기 위해서 필요› 개발자 툴의 테스트를 사용하기로 설정한다 .

Shadow DOM 내용을 개발자툴에서 보기 위해서 필요

표준적인 요소가 Shadow DOM 에 의해 구축되어있는것을 확인한다 .

Shadow DOM 을 “보자”

Advanced:Shadow DOM 의 동작 이해하기

Shadow DOM 을 사용한 요소 (Shadow Host) 의 “안쪽”에는 2 개의 DOM 트리가 있다 .

<element name="x-fancybutton" extends="button"> <template> <content></content> <div>...</div> </template></element>

<button is="x-fancybutton"> <span> 버튼 </span></button>

커스텀 요소의 정의에 포함되는 DOM 트리 .이 트리는 개발자의 눈에 보이지 않는다 . （ Shadow DOM ）

커스텀 요소 내에 중첩되어있는 DOM트리 .이 트리는 Shadow DOM 으로 대체된다 .

두 종류의 DOM 트리


Shadow DOM 으로 대체된다 .


본래의 DOM 트리는 <content> 요소 위치에 투입된다 .

<element name="x-fancybutton" extends="button"> <template> <content></content> <div>...</div> </template></element>

<button is="x-fancybutton"> <span> 버튼 </span></button>

<button is="x-fancybutton"> <span> 버튼 </span> <div>...</div></button>


Chrome 에서는 이미 Shadow DOM API 를 이용 가능도록 되어있다 .

WebKitShadowRoot 를 적용하여 임의의 요소를 Shadow Host 로 할 수 있다 .

Advanced:Shadow DOM 사용

아래의 코드를 Shadow DOM API 를 사용하여 형성한다 .

<!DOCTYPE html><div id="shadowHost"> 본래 있던 DOM 트리</div><div id="shadowSubtree"> <style scoped> #origTree { color: red; } </style> <h1>Shadow DOM Subtree</h1> <div id="origTree"> <content></content> </div></div>


// Shadow Host 가 되는 요소를 취득var shadowHost = document.getElementById('shadowHost');// Shadow Host 로 변환// 이 시점에서 본래의 DOM 트리는 일단 비표시됨var shadowRoot = new WebKitShadowRoot(shadowHost);// Shadow DOM 서브트리가 되는 요소var shadowSubtree = document.getElementById('shadowSubtree');// Shadow DOM 서브트리로 지정// 표시되는것은 이 요소가 된다 .// <content> 요소 부분에 본래의 DOM 트리가 표시된다 . shadowRoot.appendChild(shadowSubtree);


Web Components 는 Web 을 어떻게 바꿀 수 있을까 ?

UI 프레임워크의이용방법이 통일됨

$('#list').somelist();

<ul data-role="listview"></ul>

<ul dojoType="x.y.SomeList"></ul>

<ul is="x-somelist"></ul>

외부 컴포넌트를 불러옴

link 엘리먼트를 사용하여 외부 컴포넌트를 불러올 수 있다 .

<link rel="components" href="URL">

CDN 에 의한 컴포넌트 배포등을 기대할 수 있다

Web UI 개발의 분업이 가능해짐

컴포넌트 개발자(high skill)

HTML/CSS/JS 를 구사한 컴포넌트 개발개발 표준 책정

타사 컴포넌트의 선정 등

컴포넌트 이용자(Low skill)

HTML 마크업CSS 스타일링

보다 시맨틱한 마크업으로

복잡한 마크업을 캡슐화 함으로써 보다 심플하고 시맨틱한 마크업을 기대할 수 있다 .

<textarea is=“x-tweetbox” placeholder=“ 새 트윗 작성 "></textarea>

WebComponents 를 주목 !

수년후 HTML 마크업은 지금과 판이하게 달라질 수도 있습니다 .

지루했던 HTML 프론트앤드 개발을 세련되게 .

관련 자료 url

원문 및 관련 블로그 포스트› http://blog.shumpei.net/2012/12/webweb-components.html(jp)

› http://bodul2nd.tistory.com/37( 번역 )

제가 번역한것을 올려두었으며 공식적인것은 아닙니다

› http://helloworld.naver.com/helloworld/188655

NHN 개발자 블로그에도 대부분 비슷한 내용으로 포스팅 되어 있네요 .

내용 관련 문의 ( 번역관련해서요… ;)› 요 포스트 비밀댓글에 남겨주세요 ~

감사합니다

버들애기

Documents

Web Components 개요