Slide 1

Slide 1 text

LitElementとWeb Componentsの比較 Wataru Taguchi

Slide 2

Slide 2 text

アジェンダ - 自己紹介 - Web Componentsとは - LitElementとは - Todoリスト - 比較 - 所感 - Q&A - まとめ

Slide 3

Slide 3 text

自己紹介 # Wataru Taguchi - GameWith Front End Engineer - PWAとかWeb Componentsとかパフォーマンス チューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation

Slide 4

Slide 4 text

Web Componentsとは Vanilla JS、HTML、CSS を使用して 再利用可能なコンポーネントを作成する仕組み

Slide 5

Slide 5 text

- ライブラリに依存せずコンポーネントを作成できる - ビルド作業はない - どんなサイトでも動く - Scoped CSSが書ける - 命名ルール地獄からの解放 メリット

Slide 6

Slide 6 text

- カスタム要素 - 新しくHTMLタグを作成する - Shadow DOM - DOMを隠すことができる Web Componentsを構成する技術

Slide 7

Slide 7 text

シンプルなボタン

Slide 8

Slide 8 text

シンプルなボタン text属性を利用し表示 cssとHTMLをまとめて配布する

Slide 9

Slide 9 text

LitElementとは 軽量で高速なWebコンポーネントをつくる シンプルなベースクラス

Slide 10

Slide 10 text

- 宣言的に書ける - 要素は、プロパティが変更されると自動的に更新される - 軽い - lit-htmlが変更されたデータのみを再描画するため、DOMの更新は非常に高 速 - Web Componentsに準拠している - どのフレームワークでも動く - TypeScriptでも書ける メリット

Slide 11

Slide 11 text

LitElementのサンプル

Slide 12

Slide 12 text

Todoリスト https://lit-element-sample.netlify.com/

Slide 13

Slide 13 text

Todoリスト my-todo my-list my-item my-input

Slide 14

Slide 14 text

Todoリスト my-todo my-list my-item my-input 入力

Slide 15

Slide 15 text

Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火

Slide 16

Slide 16 text

Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火 入力された値を受け取って listに追加 &LSに追加

Slide 17

Slide 17 text

Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火 入力された値を受け取って listに追加 &LSに追加 リスト更新

Slide 18

Slide 18 text

Todoリスト my-todo my-list my-item my-input 削除

Slide 19

Slide 19 text

Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火

Slide 20

Slide 20 text

Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 CustomEvent発火

Slide 21

Slide 21 text

Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 indexを元にlistから削除 &LSに追加 CustomEvent発火

Slide 22

Slide 22 text

Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 CustomEvent発火 indexを元にlistから削除 &LSに追加 リスト更新

Slide 23

Slide 23 text

比較 my-input addEventListenerを利用し、イベントを付与 inputのvalueは直接DOM弄りを空にする

Slide 24

Slide 24 text

比較 my-input @clickを利用し、イベントを付与 inputのvalueは直接DOMは弄らず空にする

Slide 25

Slide 25 text

比較 my-item addEventListenerを利用し、イベントを付与 indexはattributeから取得

Slide 26

Slide 26 text

比較 my-item @clickを利用し、イベントを付与 indexはClassの変数から取得

Slide 27

Slide 27 text

比較 my-list observedAttributesを利用しlistプロ パティの変更を監視 attributeChangedCallbackで変更 があったら、my-itemを削除して新し いlistを元にmy-itemをDOMに挿入 する my-itemにdeleteイベントを貼って、 deleteイベントを再度発火させる

Slide 28

Slide 28 text

比較 my-list this.list.mapを利用してmy-itemを表示させる @my-delete-eventでイベントを貼って、再度発火させる

Slide 29

Slide 29 text

比較 my-todo listはJSON.stringifyを使ってJSON文字列にして”をエスケープさせる listの追加、削除があったらsetAttributeを使って,リストを描画させる

Slide 30

Slide 30 text

比較 my-todo JSON文字列はエスケープ無しで問題なし list変数に変更を加えるだけで、リストの再描画が走る ※ filterではなくspliceを利用し削除したら再描画は走らなかった

Slide 31

Slide 31 text

- 動的な値の変更・描画はLitElementが楽 - LitElementはcssの補完が効かないのが辛い - bundle size - web components 1.5kb - LitElement 7.7kb 所感

Slide 32

Slide 32 text

- https://www.youtube.com/ - https://voice.ameba.jp/ - https://support.pairs.lv/hc/ja/ - 日経電子版(現在リニューアル中) 事例

Slide 33

Slide 33 text

Q : 対応ブラウザは? A : Edge以外大丈夫 Q&A

Slide 34

Slide 34 text

Q : Edgeどうすれば・・? A : Chromiumベースになるから大丈夫だろう・・・ Q&A

Slide 35

Slide 35 text

Q : クライアントサイドでレンダリングされるということは SEOが・・・ A : Google I/Oで最新Chromiumレンダリングエンジンを サポートすることが発表されたから大丈夫 Q&A

Slide 36

Slide 36 text

- ライブラリに依存せずコンポーネントが作れる - Scoped CSSが書ける - LitElementは結構便利 - ただ描画周りは気をつける必要あり - 結構大手のサイトで使われている まとめ

Slide 37

Slide 37 text

Web Components / LitElement はいいぞ

Slide 38

Slide 38 text

ご清聴ありがとうございました