Polymerと最近のWeb Components事情

036d95d70a5c562b8e4eacf27756195c?s=47 ishikura
February 03, 2017

Polymerと最近のWeb Components事情

036d95d70a5c562b8e4eacf27756195c?s=128

ishikura

February 03, 2017
Tweet

Transcript

  1. Polymer と 最近の Web Components 事情 2017/02/03 石倉淳一

  2. アジェンダ • Web Components おさらい • 最近のWeb Components事情 • Polymer

    • その他のフレームワーク • まとめ
  3. Web Components おさらい

  4. Web Components の構成する4つの仕様 • Templates JavaScriptから利用することができるDOMベースのクライアントサイドのテンプレー ト仕様 • HTML Imports

    関連するHTML,CSS,JavaScriptファイルなどをロードするための仕様 • Custom Elements 独自の要素を登録し利用するための仕様 • Shadow DOM DOMツリーに対してカプセル化(スコープの隔離)を実現するための仕様
  5. Extensible Web 「低レベルなAPIを道具として提供し、開発者がWebを拡張 (extend)していけるようにしよう」 ➔ Webにおける多くの仕様は高レベルであり、ブラウザベンダによって様々なユース ケース(=使われ方)を考慮されて仕様が策定 ➔ 複雑で、仕様策定に時間がかかってしまい、時代の進化についていけていない ➔

    The Extensible Web Manifestoという考え方が出てきた • Web Components も、4つの仕様をまとめて1つの仕様とする よりも、役割分担を分けてそれぞれで低レベルなAPIを提供
  6. 最近の Web Components 事情

  7. ブラウザサポート状況 Chrome Opera Firefox Safari Edge Templates ◯ ◯ ◯

    ◯ ◯ HTML Imports ◯ ◯ △ ☓ ☓ Custom Elements ◯ ◯ △ △ ☓ Shadow DOM ◯ ◯ △ ◯ ☓ ※ ◦=サポート済み,△=開発中/予定あり,×=開発予定なし
  8. Shadow DOM v1 と Custom Elements v1 これまでGoogleを中心に策定されてきたv0の仕様を元に、新たな ものをv1としてMozillaやAppleなどの各ブラウザベンダーの合意 を改めてとりながら策定が進められている

  9. Shadow DOM v1 • Safari 10.0においてShadow DOM v1がネイティブサポート! • FirefoxについてもShadow

    DOM v1の実装が既に開始!
  10. Custom Elements v1 • Safari Technology Preview Release 14にて開発者向け実験 機能をONにすれば利用可能!

    • FirefoxではCustom Elements v1の開発に関するタスク登録 はされている(具体的な作業はまだ進んでいないよう)
  11. Edgeは未着手…

  12. Polymer

  13. None
  14. <dom-module id="element-name"> <template> <style> /* CSS rules for your element

    */ </style> <!-- local DOM for your element --> <div>{{greeting}}</div> <!-- data bindings in local DOM --> </template> <script> // element registration Polymer({ is: "element-name", // add properties and methods on the element's prototype properties: { // declare properties for the element's public API greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>
  15. None
  16. None
  17. <paper-slider pin value="20"></paper-slider>

  18. <app-drawer></app-drawer>

  19. Polymer v2 • 昨年9月にプレビュー版公開 • v2のロードマップ ◦ Web Components "v1"

    の機能のフルサポート ◦ Polymer v1.x からのスムースなマイグレーション ◦ 標準にそぐわない抽象化を排除 ◦ Polymer 内部のデータシステムの改善
  20. その他のフレームワーク と Web Component

  21. React • JSXを使って書かれたHTMLテンプレート内でCustom Elementsによっ て登録された部品を書けばそのまま利用できる ◦ https://facebook.github.io/react/docs/web-components.html • Reactコンポーネントの中でShadow DOMを利用可能にする

    ReactShadowというライブラリもある ◦ https://github.com/Wildhoney/ReactShadow Web Compornents と React は相互補完的
  22. Angular • Angular 2では、コンポーネントのスタイルとして既にShadow DOMを利用できる • Angularはコンポーネント指向のフレームワークの中でも、独 自仕様の色が濃かったが、今後はどうなる?

  23. Vue.js Vue と、Custom Elements や Shadow DOM のスタイルカプ セル化のような Web

    Component 仕様の深い統合を提供 することは全体的に適しています。 しかしながら今の段階では、私たちは本格的にコミットす る前に、その仕様が熟し、すべての主要なブラウザ上に 広く実装されるのをまだ待っています。
  24. Riot.js 最終的には、業界標準としてのWeb Componentsに辿り 着くべきです。いずれは標準コンポーネントがウェブを満 たすことになります。 今日多くの人が、直接DOMを操作せずjQueryを使うよう に、Web Componentsの上にもさらなる層が作られるで しょう。 Riotはそういった抽象化の一層です。

  25. まとめ

  26. モバイルはもうすぐ準備が整う • Androidにおいては、Android Browserは既にダウントレンド で、Chromeはすべての準備が整っている • iPhoneは、Safariの対応状況もAppleがGoogleの次にWeb Componentsに対してアクティブで、実際に実装について目に 見える進捗がある

  27. フレームワークの Web Components対応が進 む • Shadow DOMは、各フレームワークが長年課題にしてきた部 品とスタイルの対応に関する問題を解決するための根本的な 手法となるはず •

    「低レベルAPIを抽象化する層の一つ」が多くできる
  28. UIライブラリの Web Components対応が進む • UIの部品群を提供するライブラリを今まで開発してきた陣営も Web Componentsに取り組み始めるのでは

  29. Web Componentsの主要ウェブブラウザの 対応状況はかなり進んでいて、実は既に環境 は整いつつある。 今年からは,Web Components がアクティブ になるレイヤは、ウェブブラウザ開発ベンダー ではなく、フレームワークやライブラリの開発 者であり、そしてそれらを利用する多くのフロ

    ントエンジニア。