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

Web Componentsの動向とPolymer

52604f94a6d2172df2cad5ab45189940?s=47 ponday
September 22, 2018

Web Componentsの動向とPolymer

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

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

52604f94a6d2172df2cad5ab45189940?s=128

ponday

September 22, 2018
Tweet

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… - あいかわらずフロントエンドの人ではない
  3. None
  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が採用されたページも増加

  9. None
  10. None
  11. None
  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 !!