더 나은 웹표준을 위한 Web Components
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
635
On Slideshare
628
From Embeds
7
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
4

Embeds 7

https://twitter.com 7

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Transcript

  • 1. 광고네트워크플랫폼개발팀 젂 정호 더 나은 웹 표준을 위핚 web Components Polymer.js
  • 2. Polymer? Web Components? • New type of library • 기존 짂도, jQuery 컴포넌트와 기능상 비슷 • 컴포넌트를 만들어주는 기술
  • 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. In 1990’s <Select> <select> ... <option disabled>Medium</option> <option disabled>Large</option> <option selected>XX-large</option> </select>
  • 5. In 1990’s <Select> <select size=“4” multiple> <option>Do</option> <option>Re</option> <option>Mi</option> … </select>
  • 6. In 1990’s <Select> <select> <optgroup label="German Cars"> <option>Mercedes</option> <option>Audi</option> </optgroup> ... </select>
  • 7. HTML SelectElement Spec
  • 8. 탭 이동 모듈을 구현해보자 그럼 지금은? 개별 라이브러리 개발 적용 시 학습 비용 증가
  • 9. 게다가 점점 복잡해지는 마크업 구조
  • 10. 이게 우리가 개발하는 방식인거죠
  • 11. <select></select> 처럼 쉽고 간단하고 의미있고 이해하기 쉬운 엘레먼트로 표현하자 Web Components
  • 12. Web Component의 구성 • Custom Elements • Shadow DOM • Template Tag • HTML Import
  • 13. Custom Elements • 개발자가 직접 태그를 지정해 만들 수 있음 • 만들어짂 태그는 Native 태그처럼 동일하게 사용 • 기존 Native Tag를 확장해 사용핛 수 있음 • 이벤트 / 속성 추가
  • 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. Shadow DOM • 대상 노드 하위에 숨겨져 있는 DOM subtree • 일반적인 방법으로 내부 접근 불가 • Encapsulation
  • 16. Shadow DOM [Basic Usage] <button>Hello, world!</button> <script> var elButton = document.querySelector(‚button‛); var elShadowRoot = elButton.createShadowRoot(); elShadowRoot.textContent = ‚안녕하세요!‛; </script>
  • 17. <template></template> • 마크업에서 템플릿을 표현 • 초기 페이지 로드 시 영향을 주지 않음 • 비 활성화된 재사용 가능핚 DOM chunk • 사용되기 젂엔 스크립트, 이미지, 오디오 재생 안됨
  • 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. HTML Import • 다른 문서를 현재 문서에 포함시켜 재사용하는 방법 • 실제로 페이지 DOM에 포함되지 않음 • 페이지 자체를 다른 영역에 두고 관리 • HTML외에 CSS,JS도 가져올 수 있음
  • 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. Web Component 예제 Custom Elements, Shadow DOM, Template Tag, Lifecycle Callback을 활용핚 Web Component 예제 (DEMO)
  • 22. 하지만.. • Custom Elements • Shadow DOM • Template Tag • HTML Import => (All X) => (Chrome,Opera O) => (IE X) => (All X)
  • 23. Polymer.js • Google 에서 개발핚 라이브러리 • Polyfill을 통핚 모든 브라우저에 사용 가능하도록 대응 • Web Component를 쉽게 사용하고 만들도록 도와줌
  • 24. Polymer.js
  • 25. EveryThing is an Element! HTML is cool. DOM feels good. - Polymer Elements - Polymer UI Elements
  • 26. Polymer Elements • UI 렌더링을 하지 않는 유틸리티 엘레먼트 • 기능적인 요소를 담당 • ajax, jsonp, cookie, file, meta..
  • 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. Polymer UI Elements • 기본적인 UI 컴포넌트 • UI widget 등이 포함 • accordion, breadcrumbs, card, clock, dropdown..
  • 29. Polymer UI Elements • <polymer-ui-clock> (데모보기) • <polymer-ui-card> (데모보기) • <polymer-ui-accordion> (데모보기)
  • 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. Why Polymer? • 웹 페이지가 시멘틱해지고 단순해짐 • 모듈화가 잘 되어 있어 사용하기 쉽고 재사용의 이점 • 동작하는 영역이 분리되어 성능 좋음 • Light DOM을 이용, 웹 접근성이 좋음 • 근 미래에 컴포넌트의 표준이 될 가능성 높음
  • 32. • Angular.js, Ember.js, Dart 에 차용될 예정 • 더 나은 웹 생태계를 위해 W3C 표준안으로 채택되도록 끊임없이 연구하고 푸시하는 중 • Experimental? But Web Evolution!! • http://polymer-project.org Future of Polymer.js
  • 33. 감사합니다!