Web Componentsの今

52604f94a6d2172df2cad5ab45189940?s=47 ponday
February 26, 2019

Web Componentsの今

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

52604f94a6d2172df2cad5ab45189940?s=128

ponday

February 26, 2019
Tweet

Transcript

  1. 2.

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

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

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

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

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

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

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

    Management Routing State Management Routing Web Components
  7. 15.

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

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

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

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

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

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