FukuokaJS『三大フレームワーク + WebComponents』(2019/02/26)の発表資料です。
Web Componentsの今FukuokaJS『三大フレームワーク + WebComponents』 / Feb 26th, 2019 ponday (@ponday_dev)
View Slide
Profile- ponday (Honda, Yusuke)- 株式会社ベガコーポレーション- Like : TypeScript / Elixir / Python etc…- 副業もやってます
ここの話
今日の内容- Web Componentsとは?- Web Componentsの良いところ/つらいところ- Web Components向けのライブラリ- JSフレームワークとWeb Components
Web Components
Web Components- Web標準の技術で、再利用可能な部品を作るAPI- いくつかの仕様の総称- Custom Elements- Shadow DOM- ES Modules- すでにEdge以外のブラウザで対応済!
Custom Elements- 独自のHTML要素を定義できるAPI- customElements.define- class構文を使う- いわゆるコンポーネント機能
Shadow DOM- グローバルから独立したDOMツリー- CSSやJSの影響範囲が限定できる- Scoped CSSなどが実現できる- Shadow DOMの中のCSSは外部に影響を与えない- Shadow DOMの中のCSSは外部の影響を受けない
これまでComponent Component ComponentStateManagementRouting StateManagementRouting StateManagementRoutingDOM API
これまでのWeb開発- コンポーネント機構は各フレームワークが提供- DOM APIにはコンポーネント機構がない- 各フレームワークが頑張ってコンポーネントを実現していた- Scoped CSSなどのカプセル化の仕組みも同様- フレームワークに依存するコンポーネント- 当然、フレームワーク間の互換性はない- UIライブラリはフレームワークごとに必要
これからDOM APIComponent Component ComponentStateManagementRouting StateManagementRouting StateManagementRoutingWeb Components
これからのWeb開発- DOM APIもコンポーネント機構を持つ- カプセル化の仕組みも備える- コンポーネント機構の新しい選択肢- 特定の技術に依存しないコンポーネント- フレームワークなどに依存しない- 真の意味で汎用的な部品の実現
Web Componentsの良いところ- Web標準の技術であること- ブラウザネイティブなサポート- 複雑なビルド設定は不要- 他のフレームワークとの共存も簡単- 導入が非常に簡単- Web標準の技術だからこそ- 外部からの影響を受けない/外部に影響を与えない
つらいところ- 長くなりがち- ボイラープレートが多い- 描画タイミングの管理- テンプレートが書きづらい- 文字列 or DOM API- 当然、差分更新はない
lit-html / LitElement
lit-html- テンプレート構築用のライブラリ- Tagged Template Literalsベース- テンプレートが関数になるので取り回しやすい- Web Components以外の用途でも使える- 最近バージョン1.0が出た
LitElement- Web Componentsをシンプルに書くためのライブラリ- Polymerの後継- 素のWeb Componentsを書くのは結構つらい- 面倒な部分をラップしてよしなに処理してくれる- テンプレートエンジンとしてlit-htmlを利用- 最近バージョン2.0が出た
DEMO
DEMO- imgタグの改良版- lazy loading/中断- 拡大表示
Q. JSフレームワークは不要になるの?
なりません
JSフレームワークとの関わり- Web Components単体でアプリは作れない- 状態管理やルーティングの面倒はみない- JSフレームワークとは競合ではなく、共存するもの- 一部のコンポーネントがWeb Componentsで置き換えられる- 状態管理やルーティングは、フレームワークの責務- フレームワーク → Web Componentsへの変換も
Web Componentsの使いどころ- 汎用的なコンポーネント- Atomic Designにおける〜Moleculesくらいがターゲット- UIライブラリが担っている領域- 既存資産の活用- JSフレームワーク製のコンポーネントをWeb Components化- 別のシステム、JSフレームワークに流用できる
まとめ- Web Componentsは再利用可能な部品を作るAPI- 対応ブラウザも増えてきている- JSフレームワークとは競合ではなく共存するもの
Thank you !!