2014.07.31 / 박재성
Polymer is a library that makes
building applications easier.
Is built on Web Components.
”
“
재사용 가능한 컴포넌트를 만들 수 있는 표준 기술들의 모
음
Custom Elements – 커스텀 태그를 통한 요소 생성
HTML Imports – HTML 페이지 로딩
HTML Templates - 템플릿
Shado...
커스텀 태그를 통한 요소 생성
▪ 새로운 HTML 요소를 생성
▪ 다른 요소를 확장해 생성가능
▪ 단일 태그에 커스텀 기능의 묶음 가능
▪ 기존 DOM 요소의 API를 확장
// 1. HTML 객체 생성
var XFoo...
HTML Imports – HTML 페이지를 로딩
▪ JS/HTML/CSS를 묶음 형태로 사용  단일 URL 호출
▪ HTML import를 통한 추가되는 컴포넌트들은 중복되는 경우라도 호출,
파싱 및 실행은 단 한 ...
HTML Imports – HTML 페이지를 로딩
some.html
main.html
<head><link rel="import" href="some.html"></head>
<body>
<script>
var link...
▪ 비활성화 상태의 복제 가능한 DOM chunk
▪ 새로운 태그 : <template> … </template>
▪ 태그 내의 태그들은 사용되기 전까진 파싱은 되나 렌더링되지 않음
▪ 컨텐츠는 클론/사용 되기전까진 비...
재사용을 위한 템플릿
// 1. 템플릿 컨텐츠를 얻어온다.
var content = document.getElementById("count").content;
// 2. 템플릿내의 DOM에 대한 작업을 한다.
var s...
▪ 별도의 스코프를 갖는 DOM
▪ 폴리머에서 생성하는 모든 요소들은 shadow DOM으로 처리
DOM과 스타일의 캡슐화
<h3>제목</h3>
<div id="scoped"><h3>Light DOM</h3></div>
<script>
var el = document.getElementById('scoped');
var root = el.c...
태그 형태로 특정 기능을 갖는 UI 컴포넌트들을 손쉽게 삽입할 수 있으며,
재사용이 가능해 진다.
<body>
<google-map
latitude="37.3596274“
longitude="127.105464“
zoo...
<paper-input label="Your Name"></paper-input><br>
<paper-input multiline label="Enter multiple lines here"></paper-input>
...
 platform.js
 polymer.js
▪ Core Elements
▪ Paper Elements
브라우저가 네이티브 하게 지원하지 않는 기능을 사용 가능하도록 만들어
주는 코드 모음
Web Components polyfill :
▪ Mozilla X-Tag : http://www.x-tags.org/
▪ Googl...
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 ...
▪ Polymer는 Evergreen Browser*에서 문제없는 실행을 목표
http://www.polymer-project.org/resources/compatibility.html
*Evergreen Web Bro...
유틸리티 요소와 공통적 UI 요소들의 모음
Ajax, 애니메이션, 드래그&드롭, 아이콘 모음, 툴팁, etc.
http://www.polymer-project.org/docs/elements/core-elements.h...
▪ 이미 만들어진 요소들을 사용하는 방법
1. 사용할 요소를 페이지에 삽입
2. 새로 추가된 요소를 태그로 선언
$ bower install Polymer/paper-checkbox
 현재 폴더의 ./component...
▪ 직접 요소를 생성하는 방법
1. 요소에 해당되는 페이지 작성
a) Polymer core를 페이지에 삽입
b) <polymer-element>를 사용해 새로운 태그 등록
<link rel="import" href="...
2. 사용될 페이지에서 요소 페이지 삽입 후, 태그로 선언
<head>
<script src="../components/platform/platform.js"></script>
<link rel="import" href...
▪ 사용되는 웹 컴포넌트 파일들을 병합해 HTTP request를 줄일 수 있도록
해주는 도구
$ vulcanize 대상파일.html --inline --strip -o 결과파일.html
https://github.co...
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 ab...
혁신적인 웹컴포넌트 라이브러리 - Polymer
of 24

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

Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다. Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
Published on: Mar 4, 2016
Published in: Software      
Source: www.slideshare.net


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

  • 1. 2014.07.31 / 박재성
  • 2. Polymer is a library that makes building applications easier. Is built on Web Components. ” “
  • 3. 재사용 가능한 컴포넌트를 만들 수 있는 표준 기술들의 모 음 Custom Elements – 커스텀 태그를 통한 요소 생성 HTML Imports – HTML 페이지 로딩 HTML Templates - 템플릿 Shadow DOM – DOM과 스타일의 캡슐화
  • 4. 커스텀 태그를 통한 요소 생성 ▪ 새로운 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});
  • 5. HTML Imports – HTML 페이지를 로딩 ▪ JS/HTML/CSS를 묶음 형태로 사용  단일 URL 호출 ▪ HTML import를 통한 추가되는 컴포넌트들은 중복되는 경우라도 호출, 파싱 및 실행은 단 한 번만 수행 ▪ 다른 도메인의 리소스를 로딩하기 위해선 CORS 활성화 필요 ▪ Import 내의 스크립트는 메인 문서의 파싱을 블럭하지 않음 ▪ 스크립트는 import 시 실행되나, 다른 요소(마크업, CSS 등)들은 메인 페이지에 추가되는 시점에 활성화
  • 6. 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>
  • 7. ▪ 비활성화 상태의 복제 가능한 DOM chunk ▪ 새로운 태그 : <template> … </template> ▪ 태그 내의 태그들은 사용되기 전까진 파싱은 되나 렌더링되지 않음 ▪ 컨텐츠는 클론/사용 되기전까진 비활성 ▪ 페이지의 일부분이 아님 재사용을 위한 템플릿
  • 8. 재사용을 위한 템플릿 // 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>
  • 9. ▪ 별도의 스코프를 갖는 DOM ▪ 폴리머에서 생성하는 모든 요소들은 shadow DOM으로 처리 DOM과 스타일의 캡슐화
  • 10. <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?
  • 11. 태그 형태로 특정 기능을 갖는 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>
  • 12. <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>
  • 13.  platform.js  polymer.js ▪ Core Elements ▪ Paper Elements
  • 14. 브라우저가 네이티브 하게 지원하지 않는 기능을 사용 가능하도록 만들어 주는 코드 모음 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/
  • 15. 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
  • 16. ▪ Polymer는 Evergreen Browser*에서 문제없는 실행을 목표 http://www.polymer-project.org/resources/compatibility.html *Evergreen Web Browser is a web browser that automatically updates itself on startup.
  • 17. 유틸리티 요소와 공통적 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
  • 18. ▪ 이미 만들어진 요소들을 사용하는 방법 1. 사용할 요소를 페이지에 삽입 2. 새로 추가된 요소를 태그로 선언 $ bower install Polymer/paper-checkbox  현재 폴더의 ./components/paper-checkbox/ <link rel="import" href="components/paper-checkbox/paper-checkbox.html"> <paper-checkbox></paper-checkbox>
  • 19. ▪ 직접 요소를 생성하는 방법 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>
  • 20. 2. 사용될 페이지에서 요소 페이지 삽입 후, 태그로 선언 <head> <script src="../components/platform/platform.js"></script> <link rel="import" href="./파일.html"> </head> <body> <사용자정의-태그></사용자정의-태그> </body>
  • 21. ▪ 사용되는 웹 컴포넌트 파일들을 병합해 HTTP request를 줄일 수 있도록 해주는 도구 $ vulcanize 대상파일.html --inline --strip -o 결과파일.html https://github.com/Polymer/vulcanize
  • 22. http://component.kitchen/ http://customelements.io/ http://googlewebcomponents.github.io/
  • 23. ▪ 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/

Related Documents