HTML5와 오픈소스 기반의 Web Components 기술
-
Upload
jeongkyu-shin -
Category
Software
-
view
2.363 -
download
3
Transcript of HTML5와 오픈소스 기반의 Web Components 기술
![Page 1: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/1.jpg)
HTML5Web Components
lablup.com
SOSCON 2015 / Web
![Page 2: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/2.jpg)
▪▪
▪ / ▪
▪/
▪ TNF/ Needlworks▪ Automotive security▪
▪ /
▪ ….
![Page 3: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/3.jpg)
Web Components
![Page 4: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/4.jpg)
HTML
![Page 5: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/5.jpg)
▪ Netscape 4 versus Internet Explorer 3/4
![Page 6: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/6.jpg)
![Page 7: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/7.jpg)
Firefox▪ XHTML 1 / CSS 2
▪ “ ” – ?
![Page 8: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/8.jpg)
▪
▪
▪ Webkit + V8 (by Google Inc.)
![Page 9: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/9.jpg)
V8!
V8!V8!
V8!..
![Page 10: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/10.jpg)
▪ iPhone OS 1.0:
▪ “.” –
… 2.0 .
![Page 11: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/11.jpg)
![Page 12: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/12.jpg)
HTML5IT
![Page 13: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/13.jpg)
▪
▪ Scriptacul.us
▪ Dojo
▪ Prototype.js
▪ jQuery
▪ Angular.js
▪ Flux
▪
▪ ( ) !
▪ Active X!
▪!
![Page 14: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/14.jpg)
▪ ?
▪ Mozilla
▪ Apple
▪
▪ WHATWG (web hypertext application technology working group)
![Page 15: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/15.jpg)
: ▪ W3C
▪ Next HTML specification
▪ WHATWG (web Hypertext application technology working group)
▪ Web application 1.0 ( 2004. 7)
▪ 2007 ~ 2012▪ HTML5
▪ HTML5 “ (definition)”
![Page 16: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/16.jpg)
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 microdataspecifications than is editing the WHATWG specification.
Ian Hickson (WHATWG editor)
![Page 17: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/17.jpg)
( )▪ (W3C)
▪ ,
▪
▪ ?
▪ (WHATWG)▪
▪
▪
![Page 18: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/18.jpg)
▪ ( / 1)▪ Chrome / Edge▪
▪ ( / 1)▪ Firefox▪
▪ XUL
▪▪ Safari▪▪ W3C ?+ (--webkit-)
![Page 19: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/19.jpg)
…?
![Page 20: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/20.jpg)
Web ComponentsHTML5
![Page 21: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/21.jpg)
▪ (WHATWG HTML5 )
▪ HTML Import▪ HTML
▪ Shadow DOM▪ HTML DOM
▪ Custom Elements▪ DOM leaf object /class
▪ Templates▪
![Page 22: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/22.jpg)
HTML Import▪ HTML CSS import
▪ ,custom element .
<link rel="import" href="name-card.html">
![Page 23: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/23.jpg)
Shadow DOM▪ DOM Tree leaf DOM
Tree
▪ Root DOM ( DOM)Shadow DOM
▪ ) Root DOM Shadow DOM id
this.createShadowRoot().appendChild(new_element);
![Page 24: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/24.jpg)
Custom Element▪ DOM HTML5 object type
▪ ) <div>, <a> <name-card> custom element .
document.registerElement('name-card', {prototype: prototype
});var ncElement = document.createElement('name-card');
![Page 25: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/25.jpg)
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>
![Page 26: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/26.jpg)
HTML imports!
Reusable web components!
Shadow DOM!
Polyfill!
![Page 27: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/27.jpg)
▪ ?
…CodeOn ( https://codeonweb.com ) …
![Page 28: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/28.jpg)
Webcomponents.jshttp://webcomponents.org
![Page 29: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/29.jpg)
Webcomponents.js▪ “Polyfill”
▪ HTML5 webcomponents
▪ Webcomponents.js
▪ Custom elements / HTML imports / Shadow DOM
▪ Mutation observers
▪ DOM mutation
▪ ES6 Weakmap type
▪ Key k-v Map
![Page 30: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/30.jpg)
▪ Webcomponents.js : polyfill
▪ 115kbytes
▪ Webcomponents-lite.js : Shadow DOM
▪ 38kbytes
![Page 31: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/31.jpg)
▪ !
▪ <script src=“webcomponents-lite.min.js"></script>
▪ ?
![Page 32: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/32.jpg)
Polymer http://polymer-project.org
![Page 33: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/33.jpg)
Polymer library▪ HTML5
▪ HTML imports / Custom elements / Shadow DOM
▪ Web components
▪ “Polyfill” :
▪
▪ ‘DOMelements’
▪
▪ (PolymerElement)
![Page 34: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/34.jpg)
Polymer : ▪ Polyfill library + MORE
▪ .
▪ Template + style + code
▪ Two-way binding ( ..)
▪
▪
▪
![Page 35: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/35.jpg)
:▪
▪ .
▪
▪ , , ,
![Page 36: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/36.jpg)
<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>
.
![Page 37: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/37.jpg)
<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>
![Page 38: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/38.jpg)
<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>
![Page 39: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/39.jpg)
<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 :
![Page 40: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/40.jpg)
<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 :
![Page 41: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/41.jpg)
!
![Page 42: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/42.jpg)
:▪
▪ svg
▪ HTML piechart
▪
▪ : , , , ,
▪
![Page 43: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/43.jpg)
<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>
/
![Page 44: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/44.jpg)
<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>
![Page 45: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/45.jpg)
!<link rel="import" href=”lablup-piechart.html">…<lablup-piechart
url="/dashboard/circle"number=”3"maxnumber="10”chartcolor="#cddc39"unit="/10" size="100">
</lablup-piechart>
![Page 46: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/46.jpg)
Polymer : ▪
▪
▪ Webcomponents.js
▪
▪ Component-driven
▪ customelements.js custom elements
▪
▪
▪ Polyfill ! ( )
![Page 47: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/47.jpg)
Polymer : ▪
▪
▪ xhr
▪ Vulcanize : import
▪ Crisper : CORS Javascript HTML
▪
▪
▪ Iron- . Paper- .
![Page 48: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/48.jpg)
Polymer: ▪ Vulcanize
▪ :
▪ Minimize
▪ ( )
▪ Crisper ( )
▪ CORS
![Page 49: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/49.jpg)
X-Tag( ) …
https://x-tag.readme.io
![Page 50: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/50.jpg)
X-Tag▪ web components
▪ web components
▪
▪ Thin wrapper
▪ Shadow DOM template
▪ Web components
▪
▪
![Page 51: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/51.jpg)
Bosonic http://bosonic.github.io
![Page 52: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/52.jpg)
Bosonic : ▪ X-Tag Polymer
▪
▪
▪ UI
▪ React.js▪ .
▪ react angular.js
▪ UI - JQuery UI
▪ Bosonic
![Page 53: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/53.jpg)
Bosonic -▪
▪
▪ (IE9)
▪ webcomponents.js
▪ ,
▪ Thin wrapper
▪ …
![Page 54: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/54.jpg)
React:
PHP *HHVM
https://facebook.github.io/react
![Page 55: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/55.jpg)
React :
▪
▪ Function view .
▪ MVC V.
▪
▪ , .
▪ Functional style library
▪
▪ . ( flux )
![Page 56: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/56.jpg)
React : ▪
▪
▪ ?
![Page 57: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/57.jpg)
React : ▪ JSX: HTMLvar 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')
);
![Page 58: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/58.jpg)
React : ▪ Fake/Virtual DOM
▪ DOM element
▪ !
▪ Shadow DOM .
▪ DOM shadow DOM
▪ Virtual dom
![Page 59: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/59.jpg)
React : ▪
▪ DOM mutation :
▪
▪ …
▪ Polymer dom-if two-way data binding, updateStyles() API ( )
▪ Virtual DOM diff
▪
▪ : immutable element
![Page 60: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/60.jpg)
React : ▪
▪
▪ ,
▪ React
▪ React component react
▪ javascript
![Page 61: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/61.jpg)
?, ? ;
![Page 62: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/62.jpg)
Polymer: it is too google to be true▪
▪ ( )
▪ 1.0 1.1 ?
▪ 10 (Iron element)
![Page 63: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/63.jpg)
▪
▪ 7 ? ?
![Page 64: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/64.jpg)
polyfill
▪
▪
▪(html import
shadow DOM)polyfill
▪
▪
![Page 65: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/65.jpg)
FOUC prevention handling▪ FOUC (Flash Of Unstyled Content)
▪
▪
▪ body display none(unresolved attribute)
▪ <body unresolved class=“fullbleed”>▪
▪ ;
▪▪ ) Polymer + Backbone.js
![Page 66: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/66.jpg)
Electron: ▪ : cross-platform webapp container
▪ Electron
▪ Github Node.js
▪ Node Chromium wrapping
▪ / /
▪ ATOM
▪ ?
▪ Apache Cordova
![Page 67: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/67.jpg)
▪
▪ HTML5 Web Components
▪
▪ Polymer ( )
▪ React
▪ ? – .
▪ ? – …
![Page 68: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/68.jpg)
![Page 69: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/69.jpg)
![Page 70: HTML5와 오픈소스 기반의 Web Components 기술](https://reader034.fdocument.pub/reader034/viewer/2022042907/587983c91a28ab6c358b6023/html5/thumbnails/70.jpg)
Thank youLablup Inc.
http://www.lablup.com
: https://codeonweb.com