webcomponent_slide

View Github Repository Open presentation in a new window

Kyrieleison

See all presentation from Kyrieleison

webcomponent_slide

0 0

webcomponent_slide

On Github Kyrieleison / webcomponent_slide

Web Components

事始め的な

2015年10月29日 社内エンジニア勉強会

ShadowDOM is now available

Shadow DOM is now available in Webkit nightly builds https://t.co/qgm89kWwyH

— Web Components (@Web_Components) 2015/10/26

Web Components

HTML/CSS/JavaScriptをコンポーネント化するための仕組み

Web Componentsが生まれた背景

  • スコープがないHTML/CSSは、既存のコードを壊しやすい
    • 複雑化すればするほど身動きが取れなくなる
    • WebAppが次々と生まれる昨今、HTML/CSSは言語として弱い
  • コンポーネントにして、各部品を他の部品から守ろう
    • 部品を組み合わせて構成していくという思想に
    • CSSに厳格な命名規則を設けたり、JavaScriptのライブラリを作ったり、フレームワークを採用したりといった工夫
  • 工夫しなきゃいけないくらいなら標準化しよう
    • そのルールの元でしか通用しない、万人共通の解決策にはならない
    • 標準化すれば長期のノウハウ蓄積やリソース共有もしやすくなる

コンポーネント化を実現するための仕様

  • HTMLImports
    • HTMLをlinkタグで簡単にロードできる
  • Templates
    • templateタグにより、DOMベースでテンプレートを使用できる
  • CustomElements
    • 新しいHTML要素を定義できる
  • ShadowDOM
    • HTML要素をカプセル化することで、スコープ問題を解決できる

まあやってみた

element.html

  • <say-hi>, <shadow-element>というCustomElementを定義する

    <script>
var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {
  this.innerHTML = 'Hello, <b>' + (this.getAttribute('name') || '?') + '</b>';
};

document.registerElement('say-hi', {prototype: proto});

var proto2 = Object.create(HTMLElement.prototype);

proto2.createdCallback = function() {
  var root = this.createShadowRoot();
  root.innerHTML = "<style>::content > *{color: red}</style>" +
    "I'm a " + this.localName + " using Shadow DOM!<content></content>";
};
document.registerElement('shadow-element', {prototype: proto2});
</ script>

sample.html

  • element.htmlをImportし、定義したCustomElementを呼び出す
    <html>
<head>
  <link rel="import" href="elements.html">
</head>
<body>
  <say-hi name="Eric"></say-hi>
  <shadow-element>
    <div>( I'm in the light dom )</div>
  </shadow-element>
</body>
</html>

やってみた結果

ShadowDOM

うごかないんだけど

(´・ω・｀)

詰んだところ

  • Chromeの場合、about:flags ページで有効化する必要がある

試験運用版のウェブ プラットフォームの機能を有効にする。 開発中の試験運用版ウェブ プラットフォームの機能を有効にします。 #enable-experimental-web-platform-features

もうちょっと

早く言ってほしい

(´・ω・｀)

DEMO

感想: Web Componentsのある未来

  • コードが分散・隠蔽されることで全体の複雑度が増加する
    • 他の人が作ったコンポーネントを組み合わせるだけでは死にそう
    • どこまで何をコンポーネント化するかによっては、見通しの悪いコードになる
  • コンポーネント管理の必要性が出てくる
    • 他の人が作ったコンポーネントのバージョンは？依存性は？
    • (このあたりはbowerが担うことになるかもしれない)
  • エンジニアとコーダーとデザイナーの作業分担が難しくなる
    • 機能単位・言語単位ではなく、コンポーネント単位の仕事の進め方になってくるのかも

さいごに

貴重な業務時間を使ってしまい

WIの皆さんすみませんでした

明日はしごとします

でも今夜は飲みます

参考

Web Components 事始め的な 2015年10月29日 社内エンジニア勉強会