Overview of WebComponents before diving into Polymer codelab @GDG DevFair 2014

1. Lightning
Overview

2. +Changwook.Doh
cwdoh.com

3. Web Components: Overview

4. What problems are we solving?

5. Tab UI를 만드는 5가지 방법

6. G-Mail 팀도 힘들어 하는 것?
TAG SOUP!!!

7. @polyme
r
#itshackademic

8. http://drbl.in/esYL
Tab UI 정도는
좀 쉽게!

9. What do we need?

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

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

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

13. Web Component?

14. Custom Element
● 새로운 엘리먼트의 정의. 기존 엘리먼트의 확장
HTML Imports
● HTML, CSS, JS를 로딩하고 싶다면?
Shadow DOM
● 캡슐화된 DOM, CSS의 스코프 분리
Template
● 드디어 등장한 네이티브로 지원되는 템플릿
Web Component를 지탱하는 4가지 규격!

15. Custom Elements
define new HTML/DOM elements

17. <paper-tabs selected=“1”>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
Custom Elements
새 HTML 엘리먼트의 정의
선언적, 가독성
직관적인 HTML
확장 방법의 일반화 → 재사용성
@polyme
r
#itshackademic

18. Shadow DOM
DOM/CSS scoping

19. <video src=“foo.webm” controls></video>
@polyme
r
#itshackademic

20. 실제로 Shadow DOM
<video src=“foo.webm” controls></video>
@polyme
r
#itshackademic

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

22. Templates
native client-side templating

23. var
compiled
=
_.template("hello:
<%=
name
%>");
compiled({name:
'moe'});
=>
"hello:
moe"
<script type="text/template">
// ...
</script>
Templating
HTML Templates 이전
Text Templating
Script Overloading
Offline DOM
<div id="mytemplate" hidden>
<img src="logo.png">
<div class="comment"></div>
</div>

24. <template>
<div class=“comment”>
<img src=“image.png”>
</div>
<script>...</script>
</template>
HTML Templates
네이티브로 구현된 클라이언트 기반의 템플릿
DOM 구조를 위해 DOM 사용 → no
XSS
파싱되나, 렌더링되지 않음
복제/사용 전까지 콘텐츠는 비활성
doc fragment → 페이지와 분리됨
1. 렌더링되지 않음
2. 스크립트는 실행되지 않음
3. 리소스(이미지, 오디오 등)는 로딩되지 않음
4. 문서 내에서 통상적인 DOM으로 액세스 불가

25. HTML Imports
loading web components

26. <script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '...', true);
xhr.responseType = 'document';
xhr.onload = function(e) {};
xhr.send();
</script>
Importing
HTML Imports 이전
<iframe>
Ajax
Script HACK!
<script type="text/html" src="..."></script>

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

30. Polyfills Web Components
with webcomponents.js

31. Adds syntactic “sugar”
with polymer.js

32. Browser support
Summer 2014 (with Polymer)

33. Browser support
Summer 2014 (with Polymer)

34. 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의 새로운 템플릿 태그

35. ROCK You!