Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

23,031 views

Published on

Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.

Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.

Published in: Software
  • Be the first to comment

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

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

×