Web Componentsの動向とPolymer

Fukuoka Engineers Day 2018 ~Autumn~（2018/09/22）発表資料です。

サンプルアプリのリポジトリはこちら → https://github.com/ponday-dev/lit-element-todo-sample

Transcript

1. Web Componentsの動向とPolymer FUKUOKA Engineers Day 2018 ~Autumn~ / Sep 22th, 2018 ponday (@ponday_dev)
2. Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like : TypeScript / Elixir / Python etc… - あいかわらずフロントエンドの人ではない
4. Web Components - Web標準の技術で、再利用可能な部品を作るAPI - 以下の3つの仕様の総称 - HTML Templates - Custom Elements - Shadow DOM
5. HTML Templates - templateタグのこと - 雛形であることの明示 - 開発者が任意に複製、利用できる
6. Custom Elements - 開発者が独自にHTMLタグを定義できる - ES6のclassベース - Babelを通す時は注意が必要 - class前提なのでES5にされると動かない - とはいえもうclassが動かないのはIEくらい - プラグインで対応可能
7. Shadow DOM - Custom Elementsに閉じたDOMツリー - グローバルなDOMツリーから分離 - CSS、JSの影響範囲をカプセル化できる
8. 最近の動き - Polymer 3.0リリース - Firefoxがもうすぐ（v63〜）全仕様に対応予定 - Web Componentsが採用されたページも増加
12. Polymer
13. Polymer - Web Components作成用のライブラリ - Web Components単体では不足する機能を拡充 - ボイラープレート削減用のラッパー - 各種ユーティリティ（dom-if、dom-repeatなど） - バージョン3に到達
14. Web Components Polymer
15. Polymer
16. Polymer テンプレート プロパティ
17. Polymer ？
18. lit-html - Polymer開発チームが提供 - HTML in JSのための軽量ライブラリ - ReactでいうJSXの立ち位置 - Polymerから独立している - 差分更新にも対応 ※Polymerのサンプルのhtml関数は厳密にはlit-htmlとは異なる
19. lit-html版（非Polymer） ※ あくまでテンプレート用なのでそこまで圧縮はできない
20. lit-html版（非Polymer） - html`~`でテンプレートを生成 - ${~}でJSの値を展開 - renderでテンプレートをレンダリング
21. 今後提供予定の機能 - LitElement - PWA開発用テンプレートプロジェクト - マテリアルデザインライブラリ
22. 今後提供予定の機能 - LitElement - PWA開発用テンプレートプロジェクト - マテリアルデザインライブラリ
23. LitElement - 開発中のPolymerの次世代ベースクラス - lit-htmlを利用 - 今後の開発はこちらが推奨に（？） - PWA用テンプレートもこちらを採用
24. LitElement
25. 実際に作ってみる
26. 定番のTodoアプリ - Todoの追加／削除ができる - 完了／未完了がチェックできる - あえてLitElementのみで作る
27. できたもの
28. できたもの my-app
29. できたもの todo-input todo-list
30. できたもの ※ my-appの中にレンダリング
31. 差分更新
32. 差分更新
33. 差分更新 実際に更新される箇所
34. 状態管理 - Polymerに状態管理の機能はない - PWA用テンプレートではReduxを利用 - pwa-helpersにRedux向けの機能あり - 他のFWと併用する場合はそれにならう - Polymer側に状態管理させない - 単一のコンポーネントとして扱う
35. 設計まわり - HTML in JSという観点ではReactやVue.jsと同じ - 特にReactとは共通点も多い - HOCなど、既存のノウハウも適用できそう - 他のFWと併用するならレイヤーを分ける - DOMツリーの末端のコンポーネントのみなど - 混ぜると状態のやり取りなどでカオスになる
36. 良い点 - 生のWeb Componentsよりシンプルに書ける - プロパティに文字列以外も渡せる - JSでテンプレートが制御できる - しっかりと差分更新もしてくれる - 単一で開発も他のFWと併用も、どちらもできる
37. 気になったところ - 文字列ベースのテンプレートに起因する不便さ - Emmetが使えない - 補完が効かない - 一応、エディタの拡張などで対応はできる - 情報の不安定さ - 情報が出揃っておらず、古い情報を掴まされることも
38. その他気になるところ - SEOは...？ - Googlebotはv49相当らしい - v49はWeb Componentsの仕様に対応していない - 今後のバージョンアップ次第
39. まとめ - Web Componentsの採用が広がってきている - PolymerはWeb Components用のライブラリ - Polymerのみでも、FWと併用しても開発ができる - 今後PWA対応やマテリアルデザインなども提供予定
40. Thank you !!