혁신적인 웹컴포넌트 라이브러리 - Polymer

Polymer is a library that makes
building applications easier.
Is built on Web Components.
”
“

재사용 가능한 컴포넌트를 만들 수 있는 표준 기술들의 모
음
Custom Elements – 커스텀 태그를 통한 요소 생성
HTML Imports – HTML 페이지 로딩
HTML Templates - 템플릿
Shadow DOM – DOM과 스타일의 캡슐화

커스텀 태그를 통한 요소 생성
▪ 새로운 HTML 요소를 생성
▪ 다른 요소를 확장해 생성가능
▪ 단일 태그에 커스텀 기능의 묶음 가능
▪ 기존 DOM 요소의 API를 확장
// 1. HTML 객체 생성
var XFooProto = Object.create(HTMLElement.prototype);
// 2. ‘hi’ 메서드 추가
XFooProto.hi = function() { alert('foo() called'); };
// 3. 읽기 전용 ‘bar’ 속성 설정
Object.defineProperty(XFooProto, "bar", {value: 5});
// 4. <x-foo> 태그 등록
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

HTML Imports – HTML 페이지를 로딩
▪ JS/HTML/CSS를 묶음 형태로 사용  단일 URL 호출
▪ HTML import를 통한 추가되는 컴포넌트들은 중복되는 경우라도 호출,
파싱 및 실행은 단 한 번만 수행
▪ 다른 도메인의 리소스를 로딩하기 위해선 CORS 활성화 필요
▪ Import 내의 스크립트는 메인 문서의 파싱을 블럭하지 않음
▪ 스크립트는 import 시 실행되나, 다른 요소(마크업, CSS 등)들은
메인 페이지에 추가되는 시점에 활성화

HTML Imports – HTML 페이지를 로딩
some.html
main.html
<head><link rel="import" href="some.html"></head>
<body>
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>
</body>
<script> console.log(123);</script>
<div class="warning">
<style> h3 { color: red; } </style>
<h3>Warning!</h3>
<p>This page is under construction</p>
</div>

▪ 비활성화 상태의 복제 가능한 DOM chunk
▪ 새로운 태그 : <template> … </template>
▪ 태그 내의 태그들은 사용되기 전까진 파싱은 되나 렌더링되지 않음
▪ 컨텐츠는 클론/사용 되기전까진 비활성
▪ 페이지의 일부분이 아님
재사용을 위한 템플릿

재사용을 위한 템플릿
// 1. 템플릿 컨텐츠를 얻어온다.
var content = document.getElementById("count").content;
// 2. 템플릿내의 DOM에 대한 작업을 한다.
var span = content.querySelector('span');
span.textContent = parseInt(span.textContent) + 1;
// 3. 메인 DOM에 추가한다.
document.body.appendChild(document.importNode(content, true));
<template id="count">
<div>Template used: <span>0</span></div>
<script>alert('클릭하셨네요!');</script>
</template>

▪ 별도의 스코프를 갖는 DOM
▪ 폴리머에서 생성하는 모든 요소들은 shadow DOM으로 처리
DOM과 스타일의 캡슐화

<h3>제목</h3>
<div id="scoped"><h3>Light DOM</h3></div>
<script>
var el = document.getElementById('scoped');
var root = el.createShadowRoot();
root.innerHTML = '<style>h3{ color: red; }</style><h3>Shadow DOM</h3>';
</script>
DOM과 스타일의 캡슐화
<button id="btn" onclick="shadow()">Hello, world!</button>
<script>
function shadow() {
var host = document.getElementById("btn");
// 1. shadow root 생성
var root = host.createShadowRoot();
// 2. shadow DOM의 내용 변경
root.textContent = '안녕하세요!';
}
</script>
document.
getElementById("btn").
innerHTML?

태그 형태로 특정 기능을 갖는 UI 컴포넌트들을 손쉽게 삽입할 수 있으며,
재사용이 가능해 진다.
<body>
<google-map
latitude="37.3596274“
longitude="127.105464“
zoom="17“
fitToMarkers="true">
<google-map-marker
latitude="37.3596274“
longitude="127.105464“
title="그린팩토리"></google-map-marker>
</google-map>
</body>

<paper-input label="Your Name"></paper-input><br>
<paper-input multiline label="Enter multiple lines here"></paper-input>
<paper-tabs id="tabs" valueattr="name" selected="all" self-end>
<paper-tab name="all">All</paper-tab>
<paper-tab name="favorites">Favorites</paper-tab>
</paper-tabs>
<paper-toggle-button></paper-toggle-button>
<paper-checkbox id="chkitem"></paper-checkbox>

 platform.js
 polymer.js
▪ Core Elements
▪ Paper Elements

브라우저가 네이티브 하게 지원하지 않는 기능을 사용 가능하도록 만들어
주는 코드 모음
Web Components polyfill :
▪ Mozilla X-Tag : http://www.x-tags.org/
▪ Google Polymer : http://www.polymer-project.org/
 http://remysharp.com/2010/10/08/what-is-a-polyfill/

Chrome Firefox IE Android iOS
HTML Templates 26+ 22+ N/A 4.4+ 8+
HTML Imports 36+ N/A N/A N/A N/A
Custom Elements 33+ N/A N/A N/A N/A
Shadow DOM 25+ 32+ N/A 4.4+ N/A

▪ Polymer는 Evergreen Browser*에서 문제없는 실행을 목표
http://www.polymer-project.org/resources/compatibility.html
*Evergreen Web Browser is a web browser that automatically updates itself on startup.

유틸리티 요소와 공통적 UI 요소들의 모음
Ajax, 애니메이션, 드래그&드롭, 아이콘 모음, 툴팁, etc.
http://www.polymer-project.org/docs/elements/core-elements.html
Material design*이 적용된 UI 요소들의 모음
버튼, 체크박스, 다이얼로그, 입력요소, 탭, 토스트, etc.
http://www.polymer-project.org/docs/elements/paper-elements.html
http://www.polymer-
project.org/docs/elements/paper-elements.html

▪ 이미 만들어진 요소들을 사용하는 방법
1. 사용할 요소를 페이지에 삽입
2. 새로 추가된 요소를 태그로 선언
$ bower install Polymer/paper-checkbox
 현재 폴더의 ./components/paper-checkbox/
<link rel="import" href="components/paper-checkbox/paper-checkbox.html">
<paper-checkbox></paper-checkbox>

▪ 직접 요소를 생성하는 방법
1. 요소에 해당되는 페이지 작성
a) Polymer core를 페이지에 삽입
b) <polymer-element>를 사용해 새로운 태그 등록
<link rel="import" href="../components/polymer/polymer.html">
<polymer-element name="사용자정의-태그" noscript>
<template>
<span>내용</span>
</template>
</polymer-element>

2. 사용될 페이지에서 요소 페이지 삽입 후, 태그로 선언
<head>
<script src="../components/platform/platform.js"></script>
<link rel="import" href="./파일.html">
</head>
<body>
<사용자정의-태그></사용자정의-태그>
</body>

▪ 사용되는 웹 컴포넌트 파일들을 병합해 HTTP request를 줄일 수 있도록
해주는 도구
$ vulcanize 대상파일.html --inline --strip -o 결과파일.html
https://github.com/Polymer/vulcanize

http://component.kitchen/
http://customelements.io/
http://googlewebcomponents.github.io/

▪ WebComponents.org
http://webcomponents.org/
▪ Google I/O 2014 - Polymer and Web Components change everything you know about Web
development
https://www.youtube.com/watch?v=8OJ7ih8EE7
▪ Google I/O 2014 - Polymer and the Web Components revolution
https://www.youtube.com/watch?v=yRbOSdAe_JU
▪ Google I/O 2014 - Unlock the next era of UI development with Polymer
https://www.youtube.com/watch?v=HKrYfrAzqFA
▪ Custom Elements
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
▪ HTML Imports
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
▪ HTML's New Template Tag
http://www.html5rocks.com/en/tutorials/webcomponents/template/
▪ Shadow DOM
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

혁신적인 웹컴포넌트 라이브러리 - Polymer

혁신적인 웹컴포넌트 라이브러리 - Polymer

More Related Content

What's hot

Viewers also liked

Similar to 혁신적인 웹컴포넌트 라이브러리 - Polymer

More from Jae Sung Park

혁신적인 웹컴포넌트 라이브러리 - Polymer