Lightning
Overview
+Changwook.Doh
cwdoh.com
Web Components: Overview
What problems are we solving?
Tab UI를 만드는 5가지 방법
G-Mail 팀도 힘들어 하는 것?
TAG SOUP!!!
@polyme
r
#itshackademic
http://drbl.in/esYL
Tab UI 정도는
좀 쉽게!
What do we need?
“자주 사용되거나 구조적 분리가 필요한 요소를
다른 요소들과 충돌하지 않는
재활용 가능한 방법이 필요해요.”
“특히 분리되어 있는 HTML, CSS, JS를
하나로 묶어 쉽게 불러들일 수 있으면...”
Web
Components
더 적은 코드. 덜 혼란스럽게.
<paper-tabs>
<paper-tab>KNOWLEDGE</paper-tab>
<paper-tab>HISTORY</paper-tab>
<paper...
Web Component?
Custom Element
● 새로운 엘리먼트의 정의. 기존 엘리먼트의 확장
HTML Imports
● HTML, CSS, JS를 로딩하고 싶다면?
Shadow DOM
● 캡슐화된 DOM, CSS의 스코프 분리...
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>
</pap...
Shadow DOM
DOM/CSS scoping
<video src=“foo.webm” controls></video>
@polyme
r
#itshackademic
실제로 Shadow DOM
<video src=“foo.webm” controls></video>
@polyme
r
#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/t...
<template>
<div class=“comment”>
<img src=“image.png”>
</div>
<script>...</script>
</template>
HTML Templates
네이티브로...
HTML Imports
loading web components
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '...', true);
xhr.responseType = 'document';
xhr.onload = fun...
Custom Elements
컴포넌트가 인터페이스를 가진 DOM Element 형태로 사용될 수 있도록...
Templates
컴포넌트의 골격이 사용하기 전까지 비활성화된 상태로 관리되도록...
Shadow DO...
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...
ROCK You!
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
of 35

Polymer Codelab: Before diving into polymer

Overview of WebComponents before diving into Polymer codelab @GDG DevFair 2014
Published on: Mar 4, 2016
Published in: Engineering      
Source: www.slideshare.net


Transcripts - Polymer Codelab: Before diving into polymer

  • 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
  • 16. <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
  • 17. Shadow DOM DOM/CSS scoping
  • 18. <video src=“foo.webm” controls></video> @polyme r #itshackademic
  • 19. 실제로 Shadow DOM <video src=“foo.webm” controls></video> @polyme r #itshackademic
  • 20. <video src=“foo.webm” controls></video>
  • 21. Templates native client-side templating
  • 22. 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>
  • 23. <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으로 액세스 불가
  • 24. HTML Imports loading web components
  • 25. <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>
  • 26. Custom Elements 컴포넌트가 인터페이스를 가진 DOM Element 형태로 사용될 수 있도록... Templates 컴포넌트의 골격이 사용하기 전까지 비활성화된 상태로 관리되도록... Shadow DOM 컴포넌트의 스타일, DOM의 표현을 캡슐화하여 처리할 수 있도록... HTML Imports 위의 요소들을 포함한 리소스(Markup, JS, CSS)를 로딩할 수 있도록... 웹 컴포넌트의 구성과 배포에 적합한 4가지 규격
  • 27. Polyfills Web Components with webcomponents.js
  • 28. Adds syntactic “sugar” with polymer.js
  • 29. Browser support Summer 2014 (with Polymer)
  • 30. Browser support Summer 2014 (with Polymer)
  • 31. 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의 새로운 템플릿 태그
  • 32. ROCK You!

Related Documents