Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Componentsの動向とPolymer

ponday
September 22, 2018

Web Componentsの動向とPolymer

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

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

ponday

September 22, 2018
Tweet

More Decks by ponday

Other Decks in Programming

Transcript

  1. Web Componentsの動向とPolymer
    FUKUOKA Engineers Day 2018 ~Autumn~ / Sep 22th, 2018 ponday (@ponday_dev)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Web Components Polymer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 実際に作ってみる

    View full-size slide

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

    View full-size slide

  19. できたもの

    View full-size slide

  20. できたもの
    my-app

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 差分更新

    View full-size slide

  24. 差分更新

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Thank you !!

    View full-size slide