Kig 30th web components

50 %
50 %
Information about Kig 30th web components
Technology

Published on March 20, 2014

Author: cwdoh

Source: slideshare.net

Description

Quick overview of Web Component, HTML5Rocks/KO
1. Shadow DOM
2. Custom Elements
3. HTML Templates
4. HTML Imports

Web Components part - I Chang W. Doh KIG 31st

Chang W. Doh HTML5Rocks/KO Blogger

“태양 아래 새로운 것은 없다.”

컴포넌트의 주요 개념 1. 재사용성 2. 조합성 3. 모듈화

Why?

웹에서 컴포넌트를 구현하는 다양한 방 법

YUI

jQuery

KENDO UI

Angular

Sencha

“우리 구현을 조금 바꾸어야겠는데?”

Tag soup Do you love this?

무엇이 필요한가?

“자주 사용되는 유용한 것들 혹은 구조 상 분리가 필요한 것 들을 개발의 다른 요소들과 충돌하지 않는 형태로 재활용이 가능하도록 만들어 주는 일관적인 방법”

조금 더 나아가서... ● 특히, UI 요소들이 많은 프론트엔드 개발에서는 ○ “리소스 관점에서 분리되어 있는 HTML, CSS, 자바 스크립트를 하나로 묶어 재활용할 수 있으면 좋겠 다.”

웹 컴포넌트!

프론트엔드 웹을 위한 컴포넌트 시스템

웹 컴포넌트를 지탱하는 4가지 기둥 1. Shadow DOM 2. Custom Elements 3. HTML Templates 4. HTML Imports

Quick Overview ● Shadow DOM ○ 컴포넌트를 구성하는 DOM, CSS, JS 캡슐화 및 외부 로부터의 간섭을 제어할 수 있도록 스코프 분리 ● HTML Template ○ 정의된 마크업을 비활성화된 상태로 로딩 및 런타임 사용 ● Custom Element ○ 웹 문서에서 사용할 엘리먼트의 동적인 등록 및 확장 ● HTML Imports ○ 외부로부터 웹 문서 내에 문서의 일부/전체를 포함하 기 위한 방법 제공

Shadow DOM

● 하나의 페이지 = 하나의 문서 ○ 다만 브라우저가 하나의 문서로 통합하여 제어 ○ 개발 시 다른 요소들과의 구조적인 이슈들이 발생 왜 Shadow DOM인가?

Shadow DOM 101 ● 특정한 DOM을 서브 DOM 트리로 렌더링 ○ 즉, 컨텐츠를 표현과 분리 ● Shadow Host vs. Shadow Root ○ root = hostNode.createShadowRoot() ○ <content select=’query’></content> ○ DOM Visualizer

Shadow DOM 201 ● Shadow DOM의 스타일링 ○ 섀도 경계(Shadow Boundary) <div><h3>Light DOM</h3></div> <script> var root = document.querySelector('div').createShadowRoot(); root.innerHTML = '<style>h3{ color: red; }</style>' + '<h3>Shadow DOM</h3>'; </script> Shadow DOM

Shadow DOM 201 ● host: 셀렉터 ○ hostNode에 대한 셀렉터 <style> :host { opacity: 0.4; transition: opacity 420ms ease-in-out; } :host:hover { opacity: 1; } :host:active { position: relative; top: 3px; left: 3px; } </style>

Shadow DOM 201 ● 함수형 :host() :host(x-foo:host) { /* Applies if the host is a <x-foo> element.*/ } :host(x-bar:host) { /* Applies if the host is a <x-bar> element. */ } :host(div) { { /* Applies if the host element or an ancestor is a <div>. */ }

Shadow DOM 201 ● hat - ^ <style> #host ^ span { color: red; } </style> <div id="host"> <span>Light DOM</span> </div> <script> var host = document.querySelector('div'); var root = host.createShadowRoot(); root.innerHTML = "<span>Shadow DOM</span>" + "<content></content>"; </script>

Shadow DOM 201 ● hat - cont’d ● cat - ^^ // No fun. document.querySelector('x-tabs').shadowRoot .querySelector('x-panel').shadowRoot .querySelector('#foo'); // Fun. document.querySelector('x-tabs ^ x-panel ^ #foo'); x-tabs ^^ x-panel { ... }

Shadow DOM 201 ● .resetStyleInheritance ○ true - 상속가능한 속성들을 initial으로 재설정합니다. ○ false - 상속 가능한 CSS 속성들이 상속을 유지합니 다. ● .applyAuthorStyles ○ true - 저작자의 문서 내에 정의된 속성을 적용합니다. ○ false - 디폴트. 스타일은 섀도 트리에 적용되지 않습 니다.

Shadow DOM 201 ● Cheat Sheet 시나리오 applyAuthorStyles resetStyleInheritance 자체적인 테마를 가지고 있 으나 기본 상속 속성은 유지 false false 자체적인 스타일 테마 유지 false true 페이지로부터 스타일 테마 만 true true 최재한 페이지에 가깝게 true false

Shadow DOM 201 ● ::content - 호스트 노드의 엘리먼트들을 한정 <script> var div = document.querySelector('div'); var root = div.createShadowRoot(); root.innerHTML = ' <style> h3 { color: red; } content[select="h3"]::content > h3 { color: green; } ::content section p { text-decoration: underline; } </style> <h3>Shadow DOM</h3> <content select="h3"></content> <content select="section"></content>'; </script>

Custom elements

Custom Elements ● 무엇을 할 수 있을까? ○ 새로운 엘리먼트의 등록 ○ 기존 엘리먼트를 상속한 새로운 엘리먼트 확장 ○ Tag에 대한 사용자 기능 지정/추가 ○ 기존 엘리먼트의 메소드/이벤트 확장

Custom Elements ● 새로운 엘리먼트의 등록 ● 기존 엘리먼트의 확장 var XFoo = document.registerElement('x-foo'); document.body.appendChild(new XFoo()); var MegaButton = document.registerElement('mega-button', { prototype: Object.create(HTMLButtonElement.prototype) });

Custom Elements ● 프로퍼티 및 메소드 추가 var XFooProto = Object.create(HTMLElement.prototype); // 1. x-foo에 foo() 메서드 주기. XFooProto.foo = function() { alert('foo() called'); }; // 2. read-only 속성의 "bar" 프로퍼티 정의. Object.defineProperty(XFooProto, "bar", {value: 5}); // 3. x-foo의 정의를 등록하기. var XFoo = document.registerElement('x-foo', {prototype: XFooProto}); // 4. x-foo 인스턴스화. var xfoo = document.createElement('x-foo'); // 5. xfoo 인스턴스를 페이지에 추가. document.body.appendChild(xfoo);

Custom Elements ● 몇가지 콜백 Callback Description createdCallback 엘리먼트의 인스턴스가 새로 생성되었을 때 attachedCallback 엘리먼트의 인스턴스가 document에 삽입되었을 때 detachedCallback 엘리먼트의 인스턴스가 document에서 삭제되었을 때 attributeChangedCallback 속성의 추가/삭제/갱신이 일어났을 때 var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() {...}; proto.attachedCallback = function() {...}; var XFoo = document.registerElement('x-foo', {prototype: proto});

HTML Template

HTML Template ● HTML Template 이전 ○ Text Templating ○ Script Overloading ■ <script type=”text/template></script> ○ Offline DOM ■ 보이지 않는 DOM

HTML Template ● HTML Template 이전 ○ Text Templating ○ Script Overloading ■ <script type=”text/template></script> ○ Offline DOM ■ 보이지 않는 DOM

HTML Template ● 지원 여부 검사 function supportsTemplate() { return 'content' in document.createElement('template'); } if (supportsTemplate()) { // Good to go! } else { // Use old templating techniques or libraries. }

● 템플릿의 선언 HTML Template <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template>

● 주요 특징 ○ 비활성화 ■ 렌더링되지 않고 ■ 스크립트는 실행되지 않으며 ■ 리소스(이미지, 오디오 등)는 로딩되지 않고 ■ 문서 내에서 정상적인 방법으로 액세스되지 않음 ○ 모든 위치에서 활용 가능 HTML Template <table> <tr> <template id="cells-to-repeat"> <td>some content</td> </template> </tr> </table>

● 템플릿의 사용 HTML Template <button onclick="useIt()">Use me</button> <div id="container"></div> <script> function useIt() { var content = document.querySelector('template').content; // 템플릿 DOM에서 뭔가를 갱신합니다. var span = content.querySelector('span'); span.textContent = parseInt(span.textContent) + 1; document.querySelector('#container').appendChild( document.importNode(content, true)); } </script> <template> <div>Template used: <span>0</span></div> <script>alert('Thanks!')</script> </template>

HTML Imports

HTML Imports ● Imports 이전 ○ <iframe> ○ Ajax ○ Script hack!

HTML Imports ● 무엇이던지 불러올 수 있는 마법의 도구! <head> <link rel="import" href="/path/to/imports/stuff.html"> </head>

HTML Imports ● 지원 여부 function supportsImports() { return 'import' in document.createElement('link'); } if (supportsImports()) { // 지원하므로 그대로 진행합니다. } else { // 파일을 로딩하기 위한 다른 라이브러리나 require 시스템들을 사용하세요. }

HTML Imports ● Import 이벤트 핸들링 <script async> function handleLoad(e) { console.log('Loaded import: ' + e.target.href); } function handleError(e) { console.log('Error loading import: ' + e.target.href); } </script> <link rel="import" href="file.html" onload="handleLoad(event)" onerror="handleError(event)">

HTML Imports ● Scripting HTML Imports var link = document.createElement('link'); link.rel = 'import'; link.href = 'file.html' link.onload = function(e) {...}; link.onerror = function(e) {...}; document.head.appendChild(link);

HTML Imports ● link.import ● 단, 아래의 경우에는 null ○ 브라우저가 HTML Imports를 지원하지 않을 경우 ○ <link>가 rel="import"를 가지지 않을 경우 <link>가 DOM에 추가되지 않은 경우 ○ <link>가 DOM으로부터 제거된 경우 ○ 리소스가 'CORS가 가능한 상태'가 아닐 경우. var content = document.querySelector('link[rel="import"]').import;

HTML Imports ● 삽입자 <head> <link rel="import" href="warnings.html"> </head> <body> ... <script> var link = document.querySelector('link[rel="import"]'); var content = link.import; // Grab DOM from warning.html's document. var el = content.querySelector('.warning'); document.body.appendChild(el.cloneNode(true)); </script> </body>

HTML Imports ● Scripting in importer <link rel="stylesheet" href="http://www.example.com/styles.css"> <link rel="stylesheet" href="http://www.example.com/styles2.css"> ... <script> // importDoc은 import의 문서를 참조합니다. var importDoc = document.currentScript.ownerDocument; // mainDoc 메인 도큐먼트(우리가 import한 페이지)를 참조합니다. var mainDoc = document; // 첫번째 스타일시트를 이 import로부터 붙잡아 복제하고, // import된 문서에 추가합니다. var styles = importDoc.querySelector('link[rel="stylesheet"]'); mainDoc.head.appendChild(styles.cloneNode(true)); </script>

HTML Imports ● 웹 컴포넌트의 배포에 적합 ○ HTML Template ■ 위젯의 마크업을 구축 ○ Shadow DOM ■ 문서와 분리된 캡슐화된 HTML, JS, CSS 정의 ○ Custom Element ■ 컴포넌트를 엘리먼트로 등록/확장 ○ HTML Import 규격 ■ HTML, CSS, 자바스크립트를 묶어서 로딩하도록 Importer 구성

Tools

Tools ● Yeoman ○ Yo - 작업 흐름 관리 도구 ○ Grunt - 빌드/테스팅 등의 태스크 러너 ○ Bower - 컴포넌트 배포 및 의존성 관리 ● Polymer ○ 웹 컴포넌트를 위한 Polyfill 라이브러리 프로젝트 ● Bricks ○ x-tag 기반의 웹 컴포넌트 Polyfill 라이브러리

Conclusion

Conclusion 생산성, 배포 및 관리 측면에서 피할 수 없는 흐 름 ● “자주 사용되는 유용한 것들 혹은 구조 상 분리가 필요한 것들을 개발의 다른 요소들과 충돌하지 않는 형태로 재 활용이 가능하도록 만들어 주는 일관적인 방법” 미래를 예상해보자면... ● 프레임워크와 도구의 변화가 예상 ● 웹 개발 도구 시장에서 컴포넌트의 위치 변화

Resources

HTML5Rocks: Web Component Tutorials ● Shadow DOM 101 ● Shadow DOM 201: CSS & Styling ● Shadow DOM 301: Advanced Concepts & DOM API ● HTML Imports: #include for Web ● Custom Element: Defining new elements in HTML ● HTML’s new Template Tag: Standarizing client-side templating Further readings...

Resources ● Introduction to Web Components ● webcomponents.github.io ● Polymer Project ● Mozilla Brick ● Yeoman.io

Q&A

Thank you! 프리젠테이션 자료에서 사용된 이미지와 소스 등은 HTML5Rocks.com의 튜토리얼에서 인용되었 습니다.

#host presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...