Web Componentsの今

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

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