$30 off During Our Annual Pro Sale. View Details »

Web Componentsの今

ponday
February 26, 2019

Web Componentsの今

FukuokaJS『三大フレームワーク + WebComponents』(2019/02/26)の発表資料です。

ponday

February 26, 2019
Tweet

More Decks by ponday

Other Decks in Programming

Transcript

  1. Web Componentsの今
    FukuokaJS『三大フレームワーク + WebComponents』 / Feb 26th, 2019 ponday (@ponday_dev)

    View Slide

  2. Profile
    - ponday (Honda, Yusuke)
    - 株式会社ベガコーポレーション
    - Like : TypeScript / Elixir / Python etc…
    - 副業もやってます

    View Slide

  3. ここの話

    View Slide

  4. 今日の内容
    - Web Componentsとは?
    - Web Componentsの良いところ/つらいところ
    - Web Components向けのライブラリ
    - JSフレームワークとWeb Components

    View Slide

  5. Web Components

    View Slide

  6. Web Components
    - Web標準の技術で、再利用可能な部品を作るAPI
    - いくつかの仕様の総称
    - Custom Elements
    - Shadow DOM
    - ES Modules
    - すでにEdge以外のブラウザで対応済!

    View Slide

  7. Custom Elements
    - 独自のHTML要素を定義できるAPI
    - customElements.define
    - class構文を使う
    - いわゆるコンポーネント機能

    View Slide

  8. View Slide

  9. Shadow DOM
    - グローバルから独立したDOMツリー
    - CSSやJSの影響範囲が限定できる
    - Scoped CSSなどが実現できる
    - Shadow DOMの中のCSSは外部に影響を与えない
    - Shadow DOMの中のCSSは外部の影響を受けない

    View Slide

  10. View Slide

  11. これまで
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    DOM API

    View Slide

  12. これまでのWeb開発
    - コンポーネント機構は各フレームワークが提供
    - DOM APIにはコンポーネント機構がない
    - 各フレームワークが頑張ってコンポーネントを実現していた
    - Scoped CSSなどのカプセル化の仕組みも同様
    - フレームワークに依存するコンポーネント
    - 当然、フレームワーク間の互換性はない
    - UIライブラリはフレームワークごとに必要

    View Slide

  13. これから
    DOM API
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    Web Components

    View Slide

  14. これからのWeb開発
    - DOM APIもコンポーネント機構を持つ
    - カプセル化の仕組みも備える
    - コンポーネント機構の新しい選択肢
    - 特定の技術に依存しないコンポーネント
    - フレームワークなどに依存しない
    - 真の意味で汎用的な部品の実現

    View Slide

  15. Web Componentsの良いところ
    - Web標準の技術であること
    - ブラウザネイティブなサポート
    - 複雑なビルド設定は不要
    - 他のフレームワークとの共存も簡単
    - 導入が非常に簡単
    - Web標準の技術だからこそ
    - 外部からの影響を受けない/外部に影響を与えない

    View Slide

  16. つらいところ
    - 長くなりがち
    - ボイラープレートが多い
    - 描画タイミングの管理
    - テンプレートが書きづらい
    - 文字列 or DOM API
    - 当然、差分更新はない

    View Slide

  17. lit-html / LitElement

    View Slide

  18. lit-html
    - テンプレート構築用のライブラリ
    - Tagged Template Literalsベース
    - テンプレートが関数になるので取り回しやすい
    - Web Components以外の用途でも使える
    - 最近バージョン1.0が出た

    View Slide

  19. View Slide

  20. LitElement
    - Web Componentsをシンプルに書くためのライブラリ
    - Polymerの後継
    - 素のWeb Componentsを書くのは結構つらい
    - 面倒な部分をラップしてよしなに処理してくれる
    - テンプレートエンジンとしてlit-htmlを利用
    - 最近バージョン2.0が出た

    View Slide

  21. View Slide

  22. DEMO

    View Slide

  23. DEMO
    - imgタグの改良版
    - lazy loading/中断
    - 拡大表示

    View Slide

  24. Q. JSフレームワークは不要になるの?

    View Slide

  25. なりません

    View Slide

  26. JSフレームワークとの関わり
    - Web Components単体でアプリは作れない
    - 状態管理やルーティングの面倒はみない
    - JSフレームワークとは競合ではなく、共存するもの
    - 一部のコンポーネントがWeb Componentsで置き換えられる
    - 状態管理やルーティングは、フレームワークの責務
    - フレームワーク → Web Componentsへの変換も

    View Slide

  27. Web Componentsの使いどころ
    - 汎用的なコンポーネント
    - Atomic Designにおける〜Moleculesくらいがターゲット
    - UIライブラリが担っている領域
    - 既存資産の活用
    - JSフレームワーク製のコンポーネントをWeb Components化
    - 別のシステム、JSフレームワークに流用できる

    View Slide

  28. まとめ
    - Web Componentsは再利用可能な部品を作るAPI
    - 対応ブラウザも増えてきている
    - JSフレームワークとは競合ではなく共存するもの

    View Slide

  29. Thank you !!

    View Slide