더 나은 웹표준을 위한 Web Components

1,695 views

Published on

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,695
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
25
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide
  • ----- Meeting Notes (2014. 3. 26. 17:03) -----얘도 마찬가지로 비활성화된 DOM Chunk라 보시면 될 듯 하구요.템플릿과 비슷하게 사용한다고 보시면 될 듯 합니다.
  • 더 나은 웹표준을 위한 Web Components

    1. 1. 광고네트워크플랫폼개발팀 젂 정호 더 나은 웹 표준을 위핚 web Components Polymer.js
    2. 2. Polymer? Web Components? • New type of library • 기존 짂도, jQuery 컴포넌트와 기능상 비슷 • 컴포넌트를 만들어주는 기술
    3. 3. In 1990’s <Input> <input type=“submit"></input> <input type=“file"></input> <input type=“password"></input> <input type=“checkbox"></input> <input type=“radio"></input>
    4. 4. In 1990’s <Select> <select> ... <option disabled>Medium</option> <option disabled>Large</option> <option selected>XX-large</option> </select>
    5. 5. In 1990’s <Select> <select size=“4” multiple> <option>Do</option> <option>Re</option> <option>Mi</option> … </select>
    6. 6. In 1990’s <Select> <select> <optgroup label="German Cars"> <option>Mercedes</option> <option>Audi</option> </optgroup> ... </select>
    7. 7. HTML SelectElement Spec
    8. 8. 탭 이동 모듈을 구현해보자 그럼 지금은? 개별 라이브러리 개발 적용 시 학습 비용 증가
    9. 9. 게다가 점점 복잡해지는 마크업 구조
    10. 10. 이게 우리가 개발하는 방식인거죠
    11. 11. <select></select> 처럼 쉽고 간단하고 의미있고 이해하기 쉬운 엘레먼트로 표현하자 Web Components
    12. 12. Web Component의 구성 • Custom Elements • Shadow DOM • Template Tag • HTML Import
    13. 13. Custom Elements • 개발자가 직접 태그를 지정해 만들 수 있음 • 만들어짂 태그는 Native 태그처럼 동일하게 사용 • 기존 Native Tag를 확장해 사용핛 수 있음 • 이벤트 / 속성 추가
    14. 14. Custom Elements [Element registration] var XFooPrototype = Object.create(HTMLElement.prototype); XFooPrototype.createdCallback = function() { this.textContent = "I'm an x-foo!"; }; XFooPrototype.foo = function() { console.log('foo() called'); }; var XFoo = document.registerElement(“x-foo”, { prototype: XFooPrototype }); [Using a custom element] 1. <x-foo></x-foo> 2. var xFoo = new XFoo(); 3. var xFoo = document.createElement(‘x-foo'); xFoo.foo(); // "foo() called"
    15. 15. Shadow DOM • 대상 노드 하위에 숨겨져 있는 DOM subtree • 일반적인 방법으로 내부 접근 불가 • Encapsulation
    16. 16. Shadow DOM [Basic Usage] <button>Hello, world!</button> <script> var elButton = document.querySelector(‚button‛); var elShadowRoot = elButton.createShadowRoot(); elShadowRoot.textContent = ‚안녕하세요!‛; </script>
    17. 17. <template></template> • 마크업에서 템플릿을 표현 • 초기 페이지 로드 시 영향을 주지 않음 • 비 활성화된 재사용 가능핚 DOM chunk • 사용되기 젂엔 스크립트, 이미지, 오디오 재생 안됨
    18. 18. <template></template> <template> <div>Template Sample</div> <script>alert('Thanks!')</script> </template> <button onclick="useIt()">Use me</button> <div id="container"></div> <script> function useIt() { var content = document.querySelector('template').content; document.querySelector('#container') .appendChild(document.importNode(content.querySelector(‘sc ript’), true)); } </script>
    19. 19. HTML Import • 다른 문서를 현재 문서에 포함시켜 재사용하는 방법 • 실제로 페이지 DOM에 포함되지 않음 • 페이지 자체를 다른 영역에 두고 관리 • HTML외에 CSS,JS도 가져올 수 있음
    20. 20. HTML Import [main.html] <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> [warnings.html] <div class="warning"> <style scoped> h3 { color: red; } </style> <h3>Warning!</h3> <p>This page is under construction</p></div> <div class="outdated"><h3>Heads up!</h3> <p>This content may be out of date</p></div>
    21. 21. Web Component 예제 Custom Elements, Shadow DOM, Template Tag, Lifecycle Callback을 활용핚 Web Component 예제 (DEMO)
    22. 22. 하지만.. • Custom Elements • Shadow DOM • Template Tag • HTML Import => (All X) => (Chrome,Opera O) => (IE X) => (All X)
    23. 23. Polymer.js • Google 에서 개발핚 라이브러리 • Polyfill을 통핚 모든 브라우저에 사용 가능하도록 대응 • Web Component를 쉽게 사용하고 만들도록 도와줌
    24. 24. Polymer.js
    25. 25. EveryThing is an Element! HTML is cool. DOM feels good. - Polymer Elements - Polymer UI Elements
    26. 26. Polymer Elements • UI 렌더링을 하지 않는 유틸리티 엘레먼트 • 기능적인 요소를 담당 • ajax, jsonp, cookie, file, meta..
    27. 27. <polymer-ajax> [HTML] <polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/" params='{"alt":"json"}'></polymer-ajax> [JS] var ajax = document.querySelector('polymer-ajax'); ajax.addEventListener('polymer-response', function(e) { console.log(JSON.parse(this.response).feed.entry); }); ajax.go();
    28. 28. Polymer UI Elements • 기본적인 UI 컴포넌트 • UI widget 등이 포함 • accordion, breadcrumbs, card, clock, dropdown..
    29. 29. Polymer UI Elements • <polymer-ui-clock> (데모보기) • <polymer-ui-card> (데모보기) • <polymer-ui-accordion> (데모보기)
    30. 30. Custom elements with Polymer <polymer-element name=“naver-search” attributes=“width height”> <template> <input type=‚text‛ style=‚width:{{width}}px;height:{{height}}px‛ /> <button on-click=‚{{searchBtnClick}}‛>검색</button> </template> <script> Polymer(‚naver-search‛, { width:150, height:30, searchBtnClick: function(e) {…} }); </script> </polymer-element> <naver-search width=‚100‛></naver-search>
    31. 31. Why Polymer? • 웹 페이지가 시멘틱해지고 단순해짐 • 모듈화가 잘 되어 있어 사용하기 쉽고 재사용의 이점 • 동작하는 영역이 분리되어 성능 좋음 • Light DOM을 이용, 웹 접근성이 좋음 • 근 미래에 컴포넌트의 표준이 될 가능성 높음
    32. 32. • Angular.js, Ember.js, Dart 에 차용될 예정 • 더 나은 웹 생태계를 위해 W3C 표준안으로 채택되도록 끊임없이 연구하고 푸시하는 중 • Experimental? But Web Evolution!! • http://polymer-project.org Future of Polymer.js
    33. 33. 감사합니다!

    ×