LitElementとWeb Componentsの比較 #meguroes
by
tiwu
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ご清聴ありがとうございました