polymer codelab: before diving into polymer

Lightning Overview

+Changwook.Doh cwdoh.com

Web Components: Overview

What problems are we solving?

Tab UI를 만드는 5가지 방법

G-Mail 팀도 힘들어 하는 것?

TAG SOUP!!!

@polymer

#itshackademic

http://drbl.in/esYL

Tab UI 정도는 좀 쉽게!

What do we need?

“자주 사용되거나 구조적 분리가 필요한 요소를 다른 요소들과 충돌하지 않는 재활용 가능한 방법이 필요해요.”

“특히 분리되어 있는 HTML, CSS, JS를 하나로 묶어 쉽게 불러들일 수 있으면...”

<paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab> </paper-tabs>

더 적은 코드. 덜 혼란스럽게.

Web Components

Web Component?

HTML Imports ●  HTML, CSS, JS를 로딩하고 싶다면?

Shadow DOM ●  캡슐화된 DOM, CSS의 스코프 분리

Template ●  드디어 등장한 네이티브로 지원되는 템플릿

Custom Element ●  새로운 엘리먼트의 정의. 기존 엘리먼트의 확장

Web Component를 지탱하는 4가지 규격!

Custom Elements define new HTML/DOM elements

<paper-tabs selected=“1”> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs>

선언적, 가독성

직관적인 HTML

확장 방법의 일반화 → 재사용성

Custom Elements 새 HTML 엘리먼트의 정의

@polymer

#itshackademic

Shadow DOM DOM/CSS scoping

<video src=“foo.webm” controls></video>

@polymer

#itshackademic

<video src=“foo.webm” controls></video>

실제로 Shadow DOM

@polymer

#itshackademic

<video src=“foo.webm” controls></video>

Templates native client-side templating

var  compiled  =  _.template("hello:  <%=  name  %>");  

compiled({name:  'moe'});  

=>  "hello:  moe"  

<script type="text/template"> // ...

</script>

Text Templating

Offline DOM

Templating HTML Templates 이전

Script Overloading

<div id="mytemplate" hidden> <img src="logo.png"> <div class="comment"></div> </div>

<template> <div class=“comment”> <img src=“image.png”> </div> <script>...</script> </template>

DOM 구조를 위해 DOM 사용 → no XSS

복제/사용 전까지 콘텐츠는 비활성

doc fragment → 페이지와 분리됨

HTML Templates 네이티브로 구현된 클라이언트 기반의 템플릿

파싱되나, 렌더링되지 않음

1.  렌더링되지 않음 2.  스크립트는 실행되지 않음 3.  리소스(이미지, 오디오 등)는 로딩되지 않음 4.  문서 내에서 통상적인 DOM으로 액세스 불가

HTML Imports loading web components

<script> var xhr = new XMLHttpRequest(); xhr.open('GET', '...', true); xhr.responseType = 'document'; xhr.onload = function(e) {}; xhr.send();

</script>

<iframe>

Script HACK!

Importing HTML Imports 이전

Ajax

<script type="text/html" src="..."></script>

Custom Elements 컴포넌트가 인터페이스를 가진 DOM Element 형태로 사용될 수 있도록...

Templates 컴포넌트의 골격이 사용하기 전까지 비활성화된 상태로 관리되도록...

Shadow DOM 컴포넌트의 스타일, DOM의 표현을 캡슐화하여 처리할 수 있도록...

HTML Imports 위의 요소들을 포함한 리소스(Markup, JS, CSS)를 로딩할 수 있도록...

웹 컴포넌트의 구성과 배포에 적합한 4가지 규격

Polyfills Web Components with webcomponents.js

Adds syntactic “sugar” with polymer.js

Browser support Summer 2014 (with Polymer)

Browser support Summer 2014 (with Polymer)

Further readings... It’s hackademic with Polymer 알아봅시다, Polymer: Web Components & Web Animations Chrome Enchanted: 2014년 주목할만한 HTML5 규격 4종 웹 컴포넌트: 차세대 프론트엔드 웹 개발로 가는 관문 Introduction to Web Components Shadow DOM 101: 기초 Shadow DOM 201: CSS와 스타일링 Shadow DOM 301: 고급 개념과 DOM API HTML Imports: 웹을 위한 #include Custom Element: HTML에 새로운 엘리먼트를 정의하기 HTML의 새로운 템플릿 태그

ROCK You!