Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ここの話

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Web Components

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

lit-html / LitElement

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

DEMO

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

なりません

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Thank you !!