Web component
Wrappers
Polymer
Vaadin
Grid
Combo Box
Date Picker
Charts
Polymer 2.0
"Vanilla" HTML
JQuery 같은 포지션으로 갈지?
웹개발의 Base 와 같은 역할
Polymer Library
Feature Layering
Polymer-micro.html
: Bare-minimum Custom Element sugaring
Polymer-mini.html
: Template stamped into "local DOM" and tree lifecycle
Polymer.html
: All other features
Iron Elements
가장 기본이 되는 element
Polymer App Toolbox 에서 거의 필수적으로 쓰인다.
벤치마킹의 대상
Paper Elements
Polymer App Toolbox
Progressive Web App
vs React
vs Angular2
Polymer WISYWIG Editor 도 있었음(지금은 어디로?)
W3C Web Components 스펙에 영향을 주나?
Uniflow-Polymer: A straightforward way to architect Polymer application
polymer 구현에 있어 element 간의 관계나 디버그등 복잡해질수도 있는 구조를 관리하기 위한 라이브러리
Google 내부프로젝트로 Polymer 프로젝트와 제휴되지 않음
완전 초기단계임
기능
properties
type
String
Boolean
Date
Number
Array
Object
value
default value
reflectToAttribute
property가 변경 되어도 attribute가 반영되지 않음. reflectToAttribute : true 설정하면 sync 하게 반영됨
readOnly
읽기 전용, private setter method(_setProperty)를 써서 변경 가능
Subtopic
notify
true일 경우 property-change-event 발생
computed
observer
Behaviors
미리 만들어둔 (공통적인) 속성/기능을 재사용
Extends
HTML native
data system
Observe properties
a property : first-name
complex properties
A specific subproperty : person.name
Mutations on a specific array : person.children[]
All subproperty : person.*
Data Path
Object
Array
Data bind
Data flow
Helper Element
Polymer dom-xxx들
array-selector
custom-style
template extends
dom-repeat
dom-template
dom-if
Style 상속
include
style theme
@apply
local dom handling
dom selecting(node finding)
child dom add/remove/...
shadow dom 내에 선언한 dom id는 다른 shadow dom에서 또 사용되어도 browser render에 문제가 없을까?
에러 없이 정상동작
속도는 테스트 필요
event handle / fire
useful api
Test
Selenuim 으로 elements 및 shadow DOM 테스트가 가능한가??
Weak Point
Html 파싱 부족?
HTML -> Polymer 문법
CamelCase Attribute -> lowercase
dash-cash Attribute -> CamelCase
Style 적용
Behavior 를 만들때 매우 엄격하고 분명한 원칙이 필요
타겟 베이스가 필요할지?
도메인을 따라가볼까?
특정 프로젝트별로 개발?
행위 툴셋 리스트를 제공?
Skate.js
호환성
IE 11 이상
Safari 10 이상
Chrome 54 이상
Firefox 49 이상
특징
ES6
Incremental DOM (IDOM) 기반
DOM 트리를 생성하고, DOM 데이터의 변화를 감지하여 변화시키는 라이브러리
reactJS 등의 virual DOM 과는 다르다
reactJS 는 in-memory 상에서 virtual DOM 활용한다.
Incremental DOM 은 real DOM 을 활용한다.
메모리 점유율을 줄이고 성능을 향상시킬수 있음
very fast
react 등 다른 framework 와 함께 사용가능
skate 의 다른 버전들을 한 페이지에서 함께 사용 가능
vs.
Polymer
표준 Web components 스펙 기반의 추상화 라이브러리라는 점은 비슷하다.
SkateJS 는 incremental DOM 에 기반을 두고 변화에 유연하게 대처할 수 있지만, Polymer 는 정해진 template 기반에서 DOM 의 직접적인 변화에만 대응한다.
Polymer 보다 가볍다.
Polymer는 HTML Import 를 사용하므로 느리다. HTML Import 는 Google 만 밀고 있는 기능으로 논란이 많다.
X-Tags
사용한곳
아무데도 없나?
github time element
Home Assistant
포트폴리오
ㄴ
Other Widgets
JQWidget
React
이것도 위젯으로 봐야하나..?
제공하는 위젯이 적음
독립적으로 사용할 수 없음
Dropdown List
Combobox
Number Picker
Multiselect
Select List
Calendar
Date & Time Picker
Virtual Dom 사용
AUI Widgets
Material Design Frameworks
HTML 'vanilla' Elements
Input
type
button
color
checkbox
datetime-local
date
file
hidden
image
month
number
possword
radio
range
Subtopic
reset
search
submit
tel
text
time
url
week
other attributes
Button
type
button
submit
reset
Select
Span
기타 관련지식
Trend
브라우저 지원
Mobile
Chrome for 안드로이드는 OK
iOS Chrome 에서 동작하지 않음
WEB
Chrome(100%)
Opera(100%)
나머지는 불명확
edge(ie) 이외엔 html import를 제외하고 개발 중
html import 를 잘 대체하면 호환성 문제는
크게 없지 않을지..
Limitations
성능
성능 검증된 바 없음
Shadow Dom
Shady Dom
Shady Dom 보다 shadow Dom을 쓸 경우 더 나은 성능 효과가 있음
Shady Dom Css
polyfill
ponyfill
호환성
Pollyfill 에 의존적 (?)
Chrome 이 아닌 환경의 경우
Subtopic
스펙
HTML Template 이외 지원여부 불투명
Users
개발자
기본 Element 와 동일하게 사용
사용성
Custom-element 관련 Doc
Custom-element 확장
브라우저 호환성 감안
End-User
사용에는 변화없음
성능
Chrome 이 아닌 경우, Pollyfill 이 필요한경우 느릴 수 있음
CX 디자이너
퍼블리싱
Style 적용 위치가 여러개가 될 듯
element마다 Style 계층구조를 미리 숙지해야 함
Shadow DOM 기반이면 Style 이 독립적이라 굳이 계층구조 파악은 필요 없을 듯.
다만, inheritable style 이 문제임
Theme 적용 Superset 등이 있으면 좋을 듯
Style 을 외부로 빼서 관리하여 추후 사용자의 수정을 유연히 간다.
재사용성이 떨어짐
디자인/기획
OPUS 기획 디자인 최대한 활용
우리들
계층 구조를 미리 판단해서 구현할 수 있는지?
계층구조에 대한 View가 없음
개발자의 러닝커브를 최소화
JQWidget
HTML 기본 element
Angular, React 등과 함께 사용예 확보
Use Cases
무엇을 하고 싶은지?
재사용 가능한 컴포넌트로 빠른 페이지 개발
사용자별
개발자
퍼블리셔
디자이너
어떻게 만들고 싶은지?
간결한 페이지 구성
Single Page Application