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.

HTML5와 오픈소스 기반의 Web Components 기술

3,380 views

Published on

HTML5 의 표준 권고안이 채택되면서 HTML5는 엄청난 속도로 웹 전반에 걸쳐 보급되고 있습니다. HTML5 와 기존의 HTML4 / XHTML 1.1 과의 가장 큰 차잇점은 웹을 바라보는 관점입니다. 웹브라우저를 저작 플랫폼이 아닌 실행 환경으로 바라보는 HTML5의 독특한 관점은 webcomponent 에 잘 드러나 있습니다. 이 발표에서는 webcomponent 의 개념 및 역사를 훑고, webcomponent 오픈소스 구현체들인 webcomponents.js 및 구글의 Polymer, 모질라의 x-tag 과 함께 페이스북의 React 와의 비교 및 브라우저 대응에 대한 내용을 다룹니다.

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5와 오픈소스 기반의 Web Components 기술

  1. 1. HTML5 Web Components lablup.com SOSCON 2015 / Web
  2. 2. ▪ ▪ ▪ / ▪ ▪ / ▪ TNF/ Needlworks ▪ Automotive security ▪ ▪ / ▪ … .
  3. 3. Web Components
  4. 4. HTML
  5. 5. ▪ Netscape 4 versus Internet Explorer 3/4
  6. 6. Firefox ▪ XHTML 1 / CSS 2 ▪ “ ” – ?
  7. 7. ▪ ▪ ▪ Webkit + V8 (by Google Inc.)
  8. 8. V8! V8! V8! V8! ..
  9. 9. ▪ iPhone OS 1.0: ▪ “ .” – … 2.0 .
  10. 10. HTML5 IT
  11. 11. ▪ ▪ Scriptacul.us ▪ Dojo ▪ Prototype.js ▪ jQuery ▪ Angular.js ▪ Flux ▪ ▪ ( ) ! ▪ Active X! ▪ !
  12. 12. ▪ ? ▪ Mozilla ▪ Google ▪ Apple ▪ Facebook ▪ ▪ WHATWG (web hypertext application technology working group)
  13. 13. : ▪ W3C ▪ Next HTML specification ▪ WHATWG (web Hypertext application technology working group) ▪ Web application 1.0 ( 2004. 7) ▪ 2007 ~ 2012 ▪ HTML5 ▪ HTML5 “ (definition)”
  14. 14. More recently, the goals of the W3C and the WHATWG on the HTML front have diverged a bit as well. The WHATWG effort is focused on developing the canonical description of HTML and related technologies, meaning fixing bugs as we find them adding new features as they become necessary and viable, and generally tracking implementations. The W3C effort, meanwhile, is now focused on creating a snapshot developed according to the venerable W3C process. This led to the chairs of the W3C HTML working group and myself deciding to split the work into two, with a different person responsible for editing the W3C HTML5, canvas, and microdata specifications than is editing the WHATWG specification. Ian Hickson (WHATWG editor)
  15. 15. ( ) ▪ (W3C) ▪ , ▪ ▪ ? ▪ (WHATWG) ▪ ▪ ▪
  16. 16. ▪ ( / 1) ▪ Chrome / Edge ▪ ▪ ( / 1) ▪ Firefox ▪ ▪ XUL ▪ ▪ Safari ▪ ▪ W3C ?+ (--webkit-)
  17. 17. …?
  18. 18. Web Components HTML5
  19. 19. ▪ (WHATWG HTML5 ) ▪ HTML Import ▪ HTML ▪ Shadow DOM ▪ HTML DOM ▪ Custom Elements ▪ DOM leaf object /class ▪ Templates ▪
  20. 20. HTML Import ▪ HTML CSS import ▪ , custom element . <link rel="import" href="name-card.html">
  21. 21. Shadow DOM ▪ DOM Tree leaf DOM Tree ▪ Root DOM ( DOM) Shadow DOM ▪ ) Root DOM Shadow DOM id this.createShadowRoot().appendChild(new_element);
  22. 22. Custom Element ▪ DOM HTML5 object type ▪ ) <div>, <a> <name-card> custom element . document.registerElement('name-card', { prototype: prototype }); var ncElement = document.createElement('name-card');
  23. 23. HTML Template ▪ HTML CSS ▪ Template <style> .card { width : 200px; height: 35px; border-radius: 3px; } </style> <template id="namecard-root"> <div class="card"> <h2>Name : <span>{{ name }}</span></h2> </div> </template>
  24. 24. HTML imports! Reusable web components! Shadow DOM! Polyfill!
  25. 25. ▪ ? … CodeOn ( https://codeonweb.com ) …
  26. 26. Webcomponents.js http://webcomponents.org
  27. 27. Webcomponents.js ▪ “Polyfill” ▪ HTML5 webcomponents ▪ Webcomponents.js ▪ Custom elements / HTML imports / Shadow DOM ▪ Mutation observers ▪ DOM mutation ▪ ES6 Weakmap type ▪ Key k-v Map
  28. 28. ▪ Webcomponents.js : polyfill ▪ 115kbytes ▪ Webcomponents-lite.js : Shadow DOM ▪ 38kbytes
  29. 29. ▪ ! ▪ <script src=“webcomponents-lite.min.js"></script> ▪ ?
  30. 30. Polymer http://polymer-project.org
  31. 31. Polymer library ▪ HTML5 ▪ HTML imports / Custom elements / Shadow DOM ▪ Web components ▪ “Polyfill” : ▪ ▪ ‘DOMelements’ ▪ ▪ (PolymerElement)
  32. 32. Polymer : ▪ Polyfill library + MORE ▪ . ▪ Template + style + code ▪ Two-way binding ( ..) ▪ ▪ ▪
  33. 33. : ▪ ▪ . ▪ ▪ , , ,
  34. 34. <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../lablup-piechart/lablup-piechart.html"> <dom-module id="lablup-course-item"> <style> paper-card { width: 280px; margin: 15px 20px; --paper-card-header-image-text: { width: 100%; color: #eee; padding-left: 10px; padding-right: 0; text-shadow: 0 0 4px #444, 0 0 8px #000; font-weight: 400; overflow-x: hidden; }; } .card-actions-item { padding-right: 15px; } .card-actions-item span { display: block; height: 25px; line-height: 25px; } </style> .
  35. 35. <template> <a href="{{ url }}"> <paper-card heading="{{ title }}" image="{{ coverUrl }}"> <div class="card-content">{{ summary }}</div> <div class="card-actions horizontal left layout"> <section class="vertical center layout card-actions-item"> <lablup-piechart url="" number="{{ lectureCount }}" maxnumber="20” chartcolor="#29B6F6" unit="" size="40"> </lablup-piechart> <span>{{ messageLectures }}</span> </section> <section class="vertical center layout card-actions-item"> <lablup-piechart url="" number="{{ memberCount }}" maxnumber="100” chartcolor="#cddc39" unit="" size="40"> </lablup-piechart> <span class="black">{{ messageMembers }}</span> </section> </div> </paper-card> </a> </template>
  36. 36. <script> Polymer({ is: "lablup-course-item", properties: { title: { type: String }, summary: { type: String }, url: { type: String }, coverUrl: { type: String }, messageMembers: { type: String }, lectureCount: { type: Number }, memberCount: { type: Number } }, ready: function () { } }); </script> </dom-module>
  37. 37. <lablup-course-item url="/course/view/HelloWorld" title=”Hello world!” summary=”About basic grammar” cover-url=”img/helloworld.png” lecture-count=”3” member-count=”12” message-members="Members“ message-lectures="Lectures"> </lablup-course-item> HTML template :
  38. 38. <lablup-course-item url="/course/view/{{ course.id }}" title="{{ course.title }}” summary="{{ course.summary }}” cover-url="{{ cover.url }}” lecture-count="{{ course.entries.count }}” member-count="{{ course.users.count }}” message-members="{% trans "Members" %}“ message-lectures="{% trans "Lectures" %}"> </lablup-course-item> Django HTML template :
  39. 39. !
  40. 40. : ▪ ▪ svg ▪ HTML piechart ▪ ▪ : , , , , ▪
  41. 41. <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../paper-styles/paper-styles.html"> <link rel="import" href="../iron-icon/iron-icon.html"> <dom-module id="lablup-piechart"> <style> #chart { cursor: pointer; } </style> <template> <svg id="chart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xl ink" version="1.1“ viewBox="0 0 1 1"> <g id="piechart"> <circle cx=0.5 cy=0.5 r=0.5 /> <circle cx=0.5 cy=0.5 r=0.40 fill="rgba(255,255,255,0.9)" /> <path id="pievalue" stroke="none" fill=“rgba(255,255,255,0.9)" /> <text id="chart-text" x="0.5" y="0.5" font-family="Roboto” font-size=" 0.3" text-anchor="middle" dy="0.1">{{ number }}<tspan id="unit-text" font-size="0.2" dy="-0 .07">{{ unit }}</tspan></text> </g> </svg> </template> /
  42. 42. <script> Polymer({ is: "lablup-piechart", properties: { number: { type: Number, value: 50 }, maxnumber: { type: Number, value: 100 }, unit: { type: String, value: '%' }, .... ready: function () { this.sizeParam = this.size + "px"; Polymer.dom(this.root).querySelector("#chart").setAttribute("fill", this.c hartcolor); Polymer.dom(this.root).querySelector("#chart-text").setAttribute("fill", t his.textcolor); .... }); </script> </dom-module>
  43. 43. ! <link rel="import" href=”lablup-piechart.html"> … <lablup-piechart url="/dashboard/circle" number=”3" maxnumber="10” chartcolor="#cddc39" unit="/10" size="100"> </lablup-piechart>
  44. 44. Polymer : ▪ ▪ ▪ Webcomponents.js ▪ ▪ Component-driven ▪ customelements.js custom elements ▪ ▪ ▪ Polyfill ! ( )
  45. 45. Polymer : ▪ ▪ ▪ xhr ▪ Vulcanize : import ▪ Crisper : CORS Javascript HTML ▪ ▪ ▪ Iron- . Paper- .
  46. 46. Polymer: ▪ Vulcanize ▪ : ▪ Minimize ▪ ( ) ▪ Crisper ( ) ▪ CORS
  47. 47. X-Tag ( ) … https://x-tag.readme.io
  48. 48. X-Tag ▪ web components ▪ web components ▪ ▪ Thin wrapper ▪ Shadow DOM template ▪ Web components ▪ ▪
  49. 49. Bosonic http://bosonic.github.io
  50. 50. Bosonic : ▪ X-Tag Polymer ▪ ▪ ▪ UI ▪ React.js ▪ . ▪ react angular.js ▪ UI - JQuery UI ▪ Bosonic
  51. 51. Bosonic - ▪ ▪ ▪ (IE9) ▪ webcomponents.js ▪ , ▪ Thin wrapper ▪ …
  52. 52. React : PHP *HHVM https://facebook.github.io/react
  53. 53. React : ▪ ▪ Function view . ▪ MVC V. ▪ ▪ , . ▪ Functional style library ▪ ▪ . ( flux )
  54. 54. React : ▪ ▪ ▪ ?
  55. 55. React : ▪ JSX: HTML var nameCard = React.createClass({ … render: function() { return ( <div class="card"> <h2>Name : <span>{this.state.name}</span></h2> </div> ) } }); React.render( <nameCard name={userName} />, document.querySelector('#name-section') );
  56. 56. React : ▪ Fake/Virtual DOM ▪ DOM element ▪ ! ▪ Shadow DOM . ▪ DOM shadow DOM ▪ Virtual dom
  57. 57. React : ▪ ▪ DOM mutation : ▪ ▪ … ▪ Polymer dom-if two-way data binding, updateStyles() API ( ) ▪ Virtual DOM diff ▪ ▪ : immutable element
  58. 58. React : ▪ ▪ ▪ , ▪ React ▪ React component react ▪ javascript
  59. 59. ? , ? ;
  60. 60. Polymer: it is too google to be true ▪ ▪ ( ) ▪ 1.0 1.1 ? ▪ 10 (Iron element)
  61. 61. ▪ ▪ 7 ? ?
  62. 62. polyfill ▪ ▪ ▪ (html import shadow DOM) polyfill ▪ ▪
  63. 63. FOUC prevention handling ▪ FOUC (Flash Of Unstyled Content) ▪ ▪ ▪ body display none (unresolved attribute) ▪ <body unresolved class=“fullbleed”> ▪ ▪ ; ▪ ▪ ) Polymer + Backbone.js
  64. 64. Electron: ▪ : cross-platform webapp container ▪ Electron ▪ Github Node.js ▪ Node Chromium wrapping ▪ / / ▪ ATOM ▪ ? ▪ Apache Cordova
  65. 65. ▪ ▪ HTML5 Web Components ▪ ▪ Polymer ( ) ▪ React ▪ ? – . ▪ ? – …
  66. 66. Thank you Lablup Inc. http://www.lablup.com : https://codeonweb.com

×