Web Componentsの今

Transcript

1. 1.

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

   (@ponday_dev)
2. 2.

   Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション - Like :

   TypeScript / Elixir / Python etc… - 副業もやってます
3. 3.

   ここの話

4. 4.

   今日の内容 - Web Componentsとは？ - Web Componentsの良いところ／つらいところ - Web Components向けのライブラリ

   - JSフレームワークとWeb Components
5. 5.

   Web Components

6. 6.

   Web Components - Web標準の技術で、再利用可能な部品を作るAPI - いくつかの仕様の総称 - Custom Elements -

   Shadow DOM - ES Modules - すでにEdge以外のブラウザで対応済！
7. 7.

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

8. 8.

   None
9. 9.

   Shadow DOM - グローバルから独立したDOMツリー - CSSやJSの影響範囲が限定できる - Scoped CSSなどが実現できる -

   Shadow DOMの中のCSSは外部に影響を与えない - Shadow DOMの中のCSSは外部の影響を受けない
10. 10.

    None
11. 11.

    これまで Component Component Component State Management Routing State Management Routing

    State Management Routing DOM API
12. 12.

    これまでのWeb開発 - コンポーネント機構は各フレームワークが提供 - DOM APIにはコンポーネント機構がない - 各フレームワークが頑張ってコンポーネントを実現していた - Scoped

    CSSなどのカプセル化の仕組みも同様 - フレームワークに依存するコンポーネント - 当然、フレームワーク間の互換性はない - UIライブラリはフレームワークごとに必要
13. 13.

    これから DOM API Component Component Component State Management Routing State

    Management Routing State Management Routing Web Components
14. 14.

    これからのWeb開発 - DOM APIもコンポーネント機構を持つ - カプセル化の仕組みも備える - コンポーネント機構の新しい選択肢 - 特定の技術に依存しないコンポーネント

    - フレームワークなどに依存しない - 真の意味で汎用的な部品の実現
15. 15.

    Web Componentsの良いところ - Web標準の技術であること - ブラウザネイティブなサポート - 複雑なビルド設定は不要 - 他のフレームワークとの共存も簡単

    - 導入が非常に簡単 - Web標準の技術だからこそ - 外部からの影響を受けない／外部に影響を与えない
16. 16.

    つらいところ - 長くなりがち - ボイラープレートが多い - 描画タイミングの管理 - テンプレートが書きづらい -

    文字列 or DOM API - 当然、差分更新はない
17. 17.

    lit-html / LitElement

18. 18.

    lit-html - テンプレート構築用のライブラリ - Tagged Template Literalsベース - テンプレートが関数になるので取り回しやすい -

    Web Components以外の用途でも使える - 最近バージョン1.0が出た
19. 19.

    None
20. 20.

    LitElement - Web Componentsをシンプルに書くためのライブラリ - Polymerの後継 - 素のWeb Componentsを書くのは結構つらい -

    面倒な部分をラップしてよしなに処理してくれる - テンプレートエンジンとしてlit-htmlを利用 - 最近バージョン2.0が出た
21. 21.

    None
22. 22.

    DEMO

23. 23.

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

24. 24.

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

25. 25.

    なりません

26. 26.

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

    Componentsで置き換えられる - 状態管理やルーティングは、フレームワークの責務 - フレームワーク → Web Componentsへの変換も
27. 27.

    Web Componentsの使いどころ - 汎用的なコンポーネント - Atomic Designにおける〜Moleculesくらいがターゲット - UIライブラリが担っている領域 -

    既存資産の活用 - JSフレームワーク製のコンポーネントをWeb Components化 - 別のシステム、JSフレームワークに流用できる
28. 28.

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

29. 29.

    Thank you !!