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)
   

   View Slide

2. Profile
   - ponday (Honda, Yusuke)
   - 株式会社ベガコーポレーション エンジニア
   - Like : TypeScript / Elixir / Python etc…
   - あいかわらずフロントエンドの人ではない
   

   View Slide

3. View Slide

4. Web Components
   - Web標準の技術で、再利用可能な部品を作るAPI
   - 以下の3つの仕様の総称
   - HTML Templates
   - Custom Elements
   - Shadow DOM
   

   View Slide

5. HTML Templates
   - templateタグのこと
   - 雛形であることの明示
   - 開発者が任意に複製、利用できる
   

   View Slide

6. Custom Elements
   - 開発者が独自にHTMLタグを定義できる
   - ES6のclassベース
   - Babelを通す時は注意が必要
   - class前提なのでES5にされると動かない
   - とはいえもうclassが動かないのはIEくらい
   - プラグインで対応可能
   

   View Slide

7. Shadow DOM
   - Custom Elementsに閉じたDOMツリー
   - グローバルなDOMツリーから分離
   - CSS、JSの影響範囲をカプセル化できる
   

   View Slide

8. 最近の動き
   - Polymer 3.0リリース
   - Firefoxがもうすぐ（v63〜）全仕様に対応予定
   - Web Componentsが採用されたページも増加
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. Polymer
    

    View Slide

13. Polymer
    - Web Components作成用のライブラリ
    - Web Components単体では不足する機能を拡充
    - ボイラープレート削減用のラッパー
    - 各種ユーティリティ（dom-if、dom-repeatなど）
    - バージョン3に到達
    

    View Slide

14. Web Components Polymer
    

    View Slide

15. Polymer
    

    View Slide

16. Polymer
    テンプレート
    プロパティ
    

    View Slide

17. Polymer
    ？
    

    View Slide

18. lit-html
    - Polymer開発チームが提供
    - HTML in JSのための軽量ライブラリ
    - ReactでいうJSXの立ち位置
    - Polymerから独立している
    - 差分更新にも対応
    ※Polymerのサンプルのhtml関数は厳密にはlit-htmlとは異なる
    

    View Slide

19. lit-html版（非Polymer）
    ※ あくまでテンプレート用なのでそこまで圧縮はできない
    

    View Slide

20. lit-html版（非Polymer）
    - html`~`でテンプレートを生成
    - ${~}でJSの値を展開
    - renderでテンプレートをレンダリング
    

    View Slide

21. 今後提供予定の機能
    - LitElement
    - PWA開発用テンプレートプロジェクト
    - マテリアルデザインライブラリ
    

    View Slide

22. 今後提供予定の機能
    - LitElement
    - PWA開発用テンプレートプロジェクト
    - マテリアルデザインライブラリ
    

    View Slide

23. LitElement
    - 開発中のPolymerの次世代ベースクラス
    - lit-htmlを利用
    - 今後の開発はこちらが推奨に（？）
    - PWA用テンプレートもこちらを採用
    

    View Slide

24. LitElement
    

    View Slide

25. 実際に作ってみる
    

    View Slide

26. 定番のTodoアプリ
    - Todoの追加／削除ができる
    - 完了／未完了がチェックできる
    - あえてLitElementのみで作る
    

    View Slide

27. できたもの
    

    View Slide

28. できたもの
    my-app
    

    View Slide

29. できたもの
    todo-input
    todo-list
    

    View Slide

30. できたもの
    ※ my-appの中にレンダリング
    

    View Slide

31. 差分更新
    

    View Slide

32. 差分更新
    

    View Slide

33. 差分更新
    実際に更新される箇所
    

    View Slide

34. 状態管理
    - Polymerに状態管理の機能はない
    - PWA用テンプレートではReduxを利用
    - pwa-helpersにRedux向けの機能あり
    - 他のFWと併用する場合はそれにならう
    - Polymer側に状態管理させない
    - 単一のコンポーネントとして扱う
    

    View Slide

35. 設計まわり
    - HTML in JSという観点ではReactやVue.jsと同じ
    - 特にReactとは共通点も多い
    - HOCなど、既存のノウハウも適用できそう
    - 他のFWと併用するならレイヤーを分ける
    - DOMツリーの末端のコンポーネントのみなど
    - 混ぜると状態のやり取りなどでカオスになる
    

    View Slide

36. 良い点
    - 生のWeb Componentsよりシンプルに書ける
    - プロパティに文字列以外も渡せる
    - JSでテンプレートが制御できる
    - しっかりと差分更新もしてくれる
    - 単一で開発も他のFWと併用も、どちらもできる
    

    View Slide

37. 気になったところ
    - 文字列ベースのテンプレートに起因する不便さ
    - Emmetが使えない
    - 補完が効かない
    - 一応、エディタの拡張などで対応はできる
    - 情報の不安定さ
    - 情報が出揃っておらず、古い情報を掴まされることも
    

    View Slide

38. その他気になるところ
    - SEOは...？
    - Googlebotはv49相当らしい
    - v49はWeb Componentsの仕様に対応していない
    - 今後のバージョンアップ次第
    

    View Slide

39. まとめ
    - Web Componentsの採用が広がってきている
    - PolymerはWeb Components用のライブラリ
    - Polymerのみでも、FWと併用しても開発ができる
    - 今後PWA対応やマテリアルデザインなども提供予定
    

    View Slide

40. Thank you !!
    

    View Slide