OKKY 자바스크립트 컨퍼런스 2회 발표자료 참고 URL : http://jscon.ebrain.kr/

1. Polymer, LEGO같이 만드는
웹어플리케이션
재사용 가능한 UI, Polymer와 WebComponents

2. +jeado.ko
haibane84@gmail.com
about:me

3. 목차
• 배경
• 폴리머와 웹컴포넌트 사용하기
• 폴리머 실전 개발

4. 배경

5. Dimitri Glazkov
2010년

6. 2015년 지금 우리는…

7. 탭을 사용하려면?

8. Tab UI를 만드는 5가지 방법.. 사실 더 많죠.

9. <paper-tabs>
<paper-tab>KNOWLEDGE</paper-tab>
<paper-tab>HISTORY</paper-tab>
<paper-tab>FOOD</paper-tab>
</paper-tabs>
더 적은 코드. 덜 혼란스럽게.
Web Components

10. Custom Elements
컴포넌트가 인터페이스를 가진 DOM Element 형태로 사용될 수 있도록...
Templates
컴포넌트의 골격이 사용하기 전까지 비활성화된 상태로 관리되도록...
Shadow DOM
컴포넌트의 스타일, DOM의 표현을 캡슐화하여 처리할 수 있도록...
HTML Imports
위의 요소들을 포함한 리소스(Markup, JS, CSS)를 로딩할 수 있도록...
웹 컴포넌트의 구성과 배포에 적합한 4가지 규격

12. 하지만 적은 브라우저 지원…

13. Custom Elements HTML Imports
Shadow DOMTemplates

14. webcomponents.js
• webcomponents.js 모든 스펙이 대한 polyfills 제공
• webcomponents-lite.js Shadow DOM을 제외한 polyfills 제공

15. 폴리머와 웹 컴포넌트 사용하기

17. polymer는 라이브러리.
웹 컴포넌트 기반 어플리케이션을
쉽고, 빠르게 만들게 해준다.

18. polymer.js
= 더 편리하게sugaring

19. Custom Elements
새로운 HTML/DOM 요소를 정의

20. Custom Elements
사용자정의 엘리먼트의 등록
var PatternProto = Object.create(HTMLElement.prototype);
PatternProto.createdCallback = function() {
this.innerHTML = "...";
};
var Widget = document.registerElement('x-pattern', {
prototype: ScaffoldProto
});
웹컴포너트 API

21. polymer
Custom Elements
사용자정의 엘리먼트의 등록
<polymer-element name="x-pattern">
<script>
Polymer({
});
</script>
</polymer-element>

22. <x-pattern></x-pattern>
Custom Elements
사용자정의 엘리먼트의 사용

23. Templates
클라이언트 쪽 네이티브 템플릿화

24. polymer
<polymer-element name=“user-list” noscript>
<template>
<ul>
<template repeat=“{{user, i in users}}”>
<li>{{user.name}}</li>
</template>
</ul>
</template>
</polymer-element>
<template>
…
</template>
Templates
템플릿 처리

25. Shadow DOM
DOM/CSS 스콥핑

26. 출처: https://docs.google.com/presentation/d/1SZ05jFRF9Rfsrn39z5-
vdyLbY37XZGEgQfZ1uIOaEEo/edit#slide=id.g6352514f4_423

27. <div><h3>Light DOM</h3></div>
<script>
var root =
document.querySelector('div').createShadowRoot();
root.innerHTML = '<style>h3{ color: red; }</style>' +
'<h3>Shadow DOM</h3>';
</script>
Shadow
DOM
Shadow DOM
지정된 DOM을 정의한 DOM 트리로 렌더링

28. <div>Content new Shadow DOM</div>
<script>
var root =
document.querySelector('div').createShadowRoot();
root.innerHTML = '<style>h3{ color: red; }</style>' +
'<h3><content></content></h3>';
</script>
Shadow DOM
콘텐츠와 프레젠테이션의 분리
o <content></content>

29. <div>Content new Shadow DOM<h3>Im the one</h3></div>
<script>
var root = document.querySelector('div').createShadowRoot();
root.innerHTML = '<style>h3{ color: red; }</style>' +
'<h3><content select=”.the-one”></content></h3>';
</script>
Shadow DOM
콘텐츠와 프레젠테이션의 분리
o <content></content>
o <content select=”<SELECTOR>”></content>

30. var shadow = el.createShadowRoot();
shadow.innerHTML = “<style>h2 { color: red; }</style>” +
“<h2>I’m a profile-card</h2>”;
<polymer-element name=“profile-card” noscript>
<template>
<link rel=“stylesheet” href=“styles.css”>
<h2>I’m a profile-card</h2>
</template>
</polymer-element>
polymer
Shadow DOM
Custom Element 등록 시 자동 적용
웹컴포넌트
API

31. HTML Imports
web components 로딩

32. HTML import
웹 컴포넌트 로딩
<script src="bower_components/webcomponentsjs/webcomponents.js"></
script>
<link rel="import" href="elements/x-element.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-scaffold/core-
scaffold.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-
panel.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
index.html
x-element.html
polymer=웹컴포넌트 API

33. 만들어 가면서
알아봅시다.
폴리머 실전개발

34. 자주 사용되는 화면 패턴
목록형으로 데이터를 보여주는 화면
타이틀 타이틀

35. 자주 사용되는 화면 패턴
목록형으로 데이터를 보여주는 화면
타이틀
<x-pattern>

36. 자주 사용되는 화면 패턴
목록형으로 데이터를 보여주는 화면
타이틀
????
????
????
????
????

37. core-elements

39. Layout Elements
자식 요소의 위치를 배치하는 요소

40. <core-drawer-panel>
왼쪽/오른쪽 드로우어 패널이 있는 레이아웃
<polymer-element name="x-pattern">
<template>
<core-drawer-panel>
<core-header-panel drawer mode="seamed"></core-header-panel>
<core-header-panel main>
<core-toolbar>
<core-icon icon="menu" core-drawer-toggle></core-icon>
<div flex>title</div>
</core-toolbar>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
Polymer(‘x-pattern’,{
});
</script>
</polymer-element>
core-drawer-panel
core-header-panel
core-header-panel
core-toolbar
1
2
4
5
3

41. <polymer-element name="x-pattern">
<template>
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
</core-header-panel>
<div tool>
<div>title</div>
</div>
<div class="content">
</div>
</core-scaffold>
</template>
<script>
Polymer(‘x-pattern’,{
});
</script>
</polymer-element>
core-scaffold
core-toolbar
core-header-panel
<core-scaffold>
반응형 앱을 위한 퀵스타트 레이아웃
1
2
3
4

42. 그 외에 다른 <core-elements>
…….

43. 이제
안쪽 컴포넌트들을
채워볼가요?

45. paper-elements

46. 타이틀
<x-pattern-item>

47. <!-- ... 생략 ... -->
<link rel="import" href="x-pattern-item.html">
<polymer-element name="x-pattern" attributes="items">
<template>
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
</core-header-panel>
<div tool layout horizontal flex>
<div>title</div>
</div>
<div class="content">
<div class="item-list">
<x-pattern-item></x-pattern-item>
<x-pattern-item></x-pattern-item>
<x-pattern-item></x-pattern-item>
<x-pattern-item></x-pattern-item>
</div>
</div>
</core-scaffold>
<style>
/* ... 생략 ... */
</style>
</template>
<script>
Polymer('x-pattern',{
});
</script>
</polymer-element>
<x-pettern>에서 새로 정의한 <x-pattern-item> 사용

48. z축의 깊이와 공간적 관계를 변경하는 동적 쉐도우dynamic shadow
<paper-shadow>
<polymer-element name="x-pattern-item">
<template>
<paper-shadow z="1">
</paper-shadow>
<style>
paper-shadow {
margin: 10px;
padding: 10px;
background: #fff;
min-height: 50px;
}
</style>
</template>
<script>
Polymer("x-pattern-item",{
});
</script>
</polymer-element>
paper-shadow
1

49. 터치와 마우스 엑션을 나타내는 반응적 잉크 효과reactive ink effect
<paper-ripple>
<polymer-element name="x-pattern-item">
<template>
<paper-shadow z="1">
<paper-ripple fit></paper-ripple>
</paper-shadow>
<style>
paper-shadow {
margin: 10px;
padding: 10px;
background: #fff;
min-height: 50px;
}
</style>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
1

50. 타이틀
????

51. <paper-input>
사용자 입력을 위한 한 줄 입력 필드
<!-- ... 생략 ... -->
<link rel="import" href="x-pattern-item.html">
<polymer-element name="x-pattern" attributes="items">
<template>
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
</core-header-panel>
<div tool layout horizontal flex>
<div>title</div>
</div>
<div class="content">
<div class="item-list">
<x-pattern-item></x-pattern-item>
</div>
<div class="input-box" layout horizontal>
<paper-input flex label="입력하세요..." id="input"></paper-input>
</div>
</div>
</core-scaffold>
/* ... 이하 생략 ... */
1

52. <!-- ... 생략 ... -->
<link rel="import" href="x-pattern-item.html">
<polymer-element name="x-pattern" attributes="items">
<template>
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
</core-header-panel>
<div tool layout horizontal flex>
<div>title</div>
</div>
<div class="content">
<div class="item-list">
<x-pattern-item></x-pattern-item>
</div>
<div class="input-box" layout horizontal>
<paper-input flex label="입력하세요..." id="input"></paper-input>
<paper-fab icon="polymer" self-center mini></paper-fab>
</div>
</div>
</core-scaffold>
/* ... 이하 생략 ... */
<paper-fab>
fab는 floating action button을 의미하고 기본적으로 반응적 잉크 효과가 적용됨
1

53. 다른 paper-elements

54. 정적 동적

56. data binding

57. <polymer-element>로 정의한 요소는 모델 그 자체이다.

58. <polymer-element name="x-pattern">
<template>
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
</core-header-panel>
<div tool layout horizontal flex>
<div title>{{patternName}}</div>
</div>
<div class="content" layout vertical fit>
<div class="item-list" flex>
<x-pattern-item></x-pattern-item>
</div>
<!-- 생략 -->
</core-scaffold>
</template>
<script>
Polymer("x-pattern",{
patternName : "pattern-x"
});
</script>
</polymer-element>
템플릿 안에서 이중 중갈호({{ }})를 이용하여 컴포넌트와 속성값을 바인딩
Data Binding
1
2

59. <polymer-element name="x-pattern">
<template>
<core-scaffold>
<!—- 생략 … —->
<div class="content" layout vertical fit>
<div class="item-list" flex>
<template repeat="{{items}}" class="item-list" flex>
<x-pattern-item>
</x-pattern-item>
</template>
</div>
<div class="input-box" layout horizontal>
<paper-input flex label="입력하세요..." id="input"></paper-input>
<paper-fab icon="polymer" self-center mini></paper-fab>
</div>
</div>
</core-scaffold>
</template>
<script>
(function() {
var items = [{text:"hello"},{text:"hello"},{text:"hello"}];
Polymer({
patternName : "pattern-x",
ready: function() {
this.items = items;
}
});
})();
</script>
</polymer-element>
반복적인 데이터 표현
Data Binding
3
1
2

60. <polymer-element name="x-pattern">
<template>
<core-scaffold>
<!-- 생략 ... -->
<div class="content" layout vertical fit>
<div class="item-list" flex>
<template repeat="{{items}}" class="item-list" flex>
<x-pattern-item></x-pattern-item>
</template>
</div>
<div class="input-box" layout horizontal>
<paper-input flex label="입력하세요..." id="input" value="{{input}}"></paper-input>
<paper-fab icon="polymer" self-center mini on-tap="{{addItem}}"></paper-fab>
</div>
</div>
</core-scaffold>
</template>
<script>
(function() {
var items = [{text:"hello"},{text:"hello"},{text:"hello"}];
Polymer({
patternName : "pattern-x",
ready: function() { this.items = items; },
addItem : function () {
this.items.push({
text : this.input
});
this.input = '';
}
});
})();
이벤트 바인딩 & Dom 노드의 값과 모델 데이터 양방향 바인딩
Data Binding
3
1
2

61. 공개 속성 데이터 바인딩
Data Binding
<polymer-element name="x-pattern-item" attributes="item">
<template>
<paper-shadow z="1" animated layout horizontal center>
<div flex>{{item.text}}</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
<style>
paper-shadow {
margin: 10px;
padding: 10px;
background: #fff;
min-height: 50px;
}
</style>
</template>
<script>
Polymer("x-pattern-item",{
});
</script>
</polymer-element>
1
2
x-pattern-item.html

62. 공개 속성 데이터 바인딩
Data Binding
x-pattern.html
<polymer-element name="x-pattern">
<template>
<core-scaffold>
<!-- 생략 -->
<div class="content" layout vertical fit>
<div class="item-list" flex>
<template repeat="{{textItem in items}}" class="item-list" flex>
<x-pattern-item item="{{textItem}}">
</x-pattern-item>
</template>
</div>
<!-- 생략 -->
</div>
</core-scaffold>
</template>
<script>
//생략..
</script>
</polymer-element>
1
2

63. 정의한 패턴 컴포넌트를
활용하여 TODO 앱 만들어 보기

65. customelements.io

66. <app-router>github.com/erikringsmuth/app-router
my-site.com/order/:id
<app-router>
<!-- matches an exact path -->
<app-route path="/home" import="/pages/home-page.html"></app-route>
<!-- matches using a path variable -->
<app-route path="/order/:id" import=“/pages/order-page.html"></app-route>
</app-router>

67. <page-er>github.com/addyosmani/page-er
<page-er perpage="5" previous=“<< Previous" next=“Next >>"></page-er>
var pager = document.querySelector("page-er");
document.addEventListener("polymer-ready", function() {
pager.data = model.items;
});

68. <ajax-form>github.com/garstasio/ajax-form
Full Name
Country City
Join newsletter
<form is="ajax-form" action="my/form/handler">
<label>Full Name
<input type="text" name=“full_name">
</label>
…
</form>
√

69. EXPLORE

70. <thank-you>
+jeado.ko
haibane84@gmail.com