Polymerと最近のWeb Components事情

Transcript

1. Polymer と 最近の Web Components 事情 2017/02/03 石倉淳一
2. アジェンダ • Web Components おさらい • 最近のWeb Components事情 • Polymer • その他のフレームワーク • まとめ
3. Web Components おさらい
4. Web Components の構成する４つの仕様 • 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 も、４つの仕様をまとめて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
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>
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 がアクティブ になるレイヤは、ウェブブラウザ開発ベンダー ではなく、フレームワークやライブラリの開発 者であり、そしてそれらを利用する多くのフロ ントエンジニア。