ep.84 『Web Components 最前線！Lit 2 で広がる新たな可能性』

  • Davalos Alan
  • T28_tatsuya
2021/04/23 に公開1884 views

このエピソードについて

このエントリーをはてなブックマークに追加
LINE
BlueskyShare

@AlanGDavalo と @T28_Tatsuya の二人で、今週公開されたばかりの Lit 2 について語りました。

関連エピソード

https://uit-inside.linecorp.com/episode/2 https://uit-inside.linecorp.com/episode/68

概要

Litについて(復習)

  • Lit v1 (便宜上)
    • lit-html(HTMLテンプレートライブラリ)と、LitElement(Web Componentsを実装するためのライブラリ) を指している。
  • Lit v2
    • Web Componentsを開発するためのライブラリ郡を “Lit” という名前でまとめた。
      • 全てのパッケージが github.com/lit/lit にある(monorepo)。
      • インストールもlitで（npm i lit）。

配信、Lit2に対する印象

  • Breaking Changeが少ない

    • 例えば、renameされたdecoratorがあるが、新旧両方の名前でexportされている

  • SSRを実現するために、内部の変更は大きい

    • あまり使われていない機能を削除することによって実現した

  • サイズ↓、パフォーマンス↑

    • 古いブラウザの対応方針を見直して、polyfillをcoreから分けた
    • 引き続きpolyfillも提供される

  • ホームページが親切

    • core, polyfillのサポートバージョンが分かりやすい
    • Playground

  • @T28_tatsuya

    • 再利用のための仕組みが導入されている。
    • ReactiveController
      • 今まで、ロジックを書くときは
        • class内に書いたり、extends, mixinしたりと、再利用の面で辛かった。
      • Lit2では
        • ReactiveController, ReactiveControllerHost という interfaceが提供された
        • Web ComponentsのLifeCycle, propertiesの更新に従って呼び出される関数を定義できる。
      • ReactiveControllerHostを実装すれば良いので、React等他のライブラリとの連携も可能
    • 余談
      • packageレベルでも再利用の仕組みがある
        • 今までLitElementで行っていたpropertiesやstyle等のWeb Components用の実装はreactive-elementに移された。
        • 新しいLitElementは lit-htmlとreactive-elementを繋ぐ役割を持つライブラリ
        • つまり、lit-html以外のテンプレートライブラリ(例えばpreactとか)を使用してWebComponents を開発もしやすい(ライブラリ間が疎結合)。

  • @AlanGDavalos

    • lit-labs という namespace に実験的な submodules が実装されずつあります
    • 色々ありますが、特に気になったのは：
      • lit-labs/react
        • React と Lit を繋ぐためのツール
        • Lit の ReactiveController を React 内で使えるようにできる
        • React の Web Component ラッパー
          • React での Web Component の使い勝手をよくするためのもの
          • React で Web Component に attribute としてではなく property として情報を渡せるようにする
          • DOM Event も正しく Listen できるようにする
      • lit-labs/motion
        • FLIP (First, Last, Invert, Play) ベースのアニメーションを付けるための Lit Directive
        • ほぼ flip() をつけるだけで Web Animation が言い風に付けられる

  • SSR

    • 実装はすでにある
    • directively shadow dom で実現している
    • SSR系のライブラリ向けのpluginが提供されるらしい

まとめ

  • 開発者フレンドリーなLit2を使いましょう！

Refs

採用について

使用素材・クレジット

© Presented by UIT