WebComponents

Plus de détails

이대리 Project

par p p

아이디어

par Eom JeongHo

AWS 이전 중간점검

par 준희 이

ecommerce echo system

par bacchus 변돈우

Web component

코멘트를 여기에 남길 수 있습니다.

Use Cases

어떻게 만들고 싶은지?

Single Page Application

간결한 페이지 구성

사용자별

디자이너

퍼블리셔

무엇을 하고 싶은지?

재사용 가능한 컴포넌트로 빠른 페이지 개발

Users

우리들

개발자의 러닝커브를 최소화

Angular, React 등과 함께 사용예 확보

HTML 기본 element

계층구조에 대한 View가 없음

계층 구조를 미리 판단해서 구현할 수 있는지?

CX 디자이너

디자인/기획

OPUS 기획 디자인 최대한 활용

퍼블리싱

Theme 적용 Superset 등이 있으면 좋을 듯

재사용성이 떨어짐

Style 을 외부로 빼서 관리하여 추후 사용자의 수정을 유연히 간다.

element마다 Style 계층구조를 미리 숙지해야 함

다만, inheritable style 이 문제임

Shadow DOM 기반이면 Style 이 독립적이라 굳이 계층구조 파악은 필요 없을 듯.

Style 적용 위치가 여러개가 될 듯

End-User

Chrome 이 아닌 경우, Pollyfill 이 필요한경우 느릴 수 있음

사용에는 변화없음

개발자

사용성

브라우저 호환성 감안

Custom-element 확장

Custom-element 관련 Doc

기본 Element 와 동일하게 사용

Limitations

스펙

HTML Template 이외 지원여부 불투명

Pollyfill 에 의존적 (?)

Chrome 이 아닌 환경의 경우

성능

성능 검증된 바 없음

polyfill

ponyfill

Shadow Dom

Shady Dom Css

Shady Dom

Shady Dom 보다 shadow Dom을 쓸 경우 더 나은 성능 효과가 있음

브라우저 지원

WEB

나머지는 불명확

edge(ie) 이외엔 html import를 제외하고 개발 중

html import 를 잘 대체하면 호환성 문제는 크게 없지 않을지..

Opera(100%)

Chrome(100%)

Mobile

iOS Chrome 에서 동작하지 않음

Chrome for 안드로이드는 OK

기타 관련지식

Trend

Other Widgets

HTML 'vanilla' Elements

Span

Select

Button

Input

other attributes

week

url

time

text

tel

submit

search

reset

range

radio

possword

number

month

image

hidden

file

email

date

datetime-local

checkbox

color

button

Material Design Frameworks

AUI Widgets

React

Virtual Dom 사용

Dropdown List Combobox Number Picker Multiselect Select List Calendar Date & Time Picker

이것도 위젯으로 봐야하나..?

독립적으로 사용할 수 없음

제공하는 위젯이 적음

JQWidget

사용한곳

포트폴리오

ㄴ

Home Assistant

https://home-assistant.io/blog/2016/05/18/why-we-use-polymer/

https://frankiefu.github.io/pica/#

github time element

https://github.com/github/time-elements

아무데도 없나?

Wrappers

X-Tags

IE9+

Microsoft

Skate.js

vs.

Polymer는 HTML Import 를 사용하므로 느리다. HTML Import 는 Google 만 밀고 있는 기능으로 논란이 많다.

Polymer 보다 가볍다.

SkateJS 는 incremental DOM 에 기반을 두고 변화에 유연하게 대처할 수 있지만, Polymer 는 정해진 template 기반에서 DOM 의 직접적인 변화에만 대응한다.

표준 Web components 스펙 기반의 추상화 라이브러리라는 점은 비슷하다.

특징

skate 의 다른 버전들을 한 페이지에서 함께 사용 가능

react 등 다른 framework 와 함께 사용가능

very fast

Incremental DOM (IDOM) 기반

메모리 점유율을 줄이고 성능을 향상시킬수 있음

reactJS 등의 virual DOM 과는 다르다

Incremental DOM 은 real DOM 을 활용한다.

reactJS 는 in-memory 상에서 virtual DOM 활용한다.

DOM 트리를 생성하고, DOM 데이터의 변화를 감지하여 변화시키는 라이브러리

ES6

호환성

Firefox 49 이상

Chrome 54 이상

Safari 10 이상

IE 11 이상

Polymer

Weak Point

Behavior 를 만들때 매우 엄격하고 분명한 원칙이 필요

행위 툴셋 리스트를 제공?

특정 프로젝트별로 개발?

도메인을 따라가볼까?

타겟 베이스가 필요할지?

Style 적용

HTML -> Polymer 문법

dash-cash Attribute -> CamelCase

CamelCase Attribute -> lowercase

Html 파싱 부족?

Test

Selenuim 으로 elements 및 shadow DOM 테스트가 가능한가??

https://www.polymer-project.org/1.0/docs/tools/tests

기능

comment here

useful api

event handle / fire

local dom handling

shadow dom 내에 선언한 dom id는 다른 shadow dom에서 또 사용되어도 browser render에 문제가 없을까?

속도는 테스트 필요

에러 없이 정상동작

child dom add/remove/...

dom selecting(node finding)

Style 상속

@apply

style theme

include

data system

Helper Element

Polymer dom-xxx들

template extends

dom-if

dom-template

dom-repeat

custom-style

array-selector

Data flow

Data bind

Data Path

Observe properties

complex properties

All subproperty : person.*

Mutations on a specific array : person.children[]

A specific subproperty : person.name

a property : first-name

Extends

HTML native

Behaviors

미리 만들어둔 (공통적인) 속성/기능을 재사용

properties

observer

computed

notify

true일 경우 property-change-event 발생

readOnly

읽기 전용, private setter method(_setProperty)를 써서 변경 가능

Subtopic

reflectToAttribute

property가 변경 되어도 attribute가 반영되지 않음. reflectToAttribute : true 설정하면 sync 하게 반영됨

value

default value

type

Object

Array

Number

Date

Boolean

String

Google

Uniflow-Polymer: A straightforward way to architect Polymer application

완전 초기단계임

Google 내부프로젝트로 Polymer 프로젝트와 제휴되지 않음

polymer 구현에 있어 element 간의 관계나 디버그등 복잡해질수도 있는 구조를 관리하기 위한 라이브러리

W3C Web Components 스펙에 영향을 주나?

Polymer WISYWIG Editor 도 있었음(지금은 어디로?)

Polymer App Toolbox

vs Angular2

vs React

Progressive Web App

Polymer Library

Paper Elements

Iron Elements

벤치마킹의 대상

Polymer App Toolbox 에서 거의 필수적으로 쓰인다.

가장 기본이 되는 element

Feature Layering

Polymer.html : All other features

Polymer-mini.html : Template stamped into "local DOM" and tree lifecycle

Polymer-micro.html : Bare-minimum Custom Element sugaring

Polymer 2.0

JQuery 같은 포지션으로 갈지?

웹개발의 Base 와 같은 역할

"Vanilla" HTML

Vaadin

Charts

Date Picker

Combo Box

Grid