Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

더 나은 웹표준을 위한 Web Components

1,782 views

Published on

Published in: Technology
  • Be the first to comment

더 나은 웹표준을 위한 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. 감사합니다!

×