BT

InfoQ ホームページ ニュース Polymer Projec、パフォーマンスを重視したWebコンポーネント開発を可能にするLit-HtmlとLitElementをリリース

Polymer Projec、パフォーマンスを重視したWebコンポーネント開発を可能にするLit-HtmlとLitElementをリリース

ブックマーク

原文(投稿日:2019/06/17)へのリンク

Polymer Projectは先頃、lit-html v1.0とLitElement v2.0をリリースした。lit-htmlは、軽量で拡張可能なHTMLテンプレート用JavaScriptライブラリで、LitElementと合わせて、あるいは単独で使用することができる。LitElementは、軽量のWebコンポーネントを開発するためのJavaScriptライブラリである。連携して動作するこの2つのライブラリの、主な設計目標はパフォーマンスにある。開発者は、状態あるいはプロパティが変化した時に、リアクティブかつ効率的に再レンダリングを行うWebコンポーネントの開発が可能になる。作成したWebコンポーネントは、任意のフレームワークを使った、あるいはフレームワークを使わない、Webアプリケーション構築に使用することができる。

lit-htmlは、DOMを効率的に更新するために設計されたHTMLテンプレートライブラリである。他のフロントエンドレンダリングライブラリ(ReactVueDojo 2Angular 2など)とは異なり、仮想DOM(VDOM)を使用しない。

VDOMの主なメリットは、宣言的かつ純粋な機能記述をサポートすることにより、ユーザイベントの結果として実行される、断片的でアドホックな、メンテンスの難しい一連のDOM操作の記述が不要となることにある。VDOMベースのライブラリは、差分検出(reconciliation)と呼ばれるプロセスを通じて、DOMの機能記述から、このようなDOM更新操作を自動的に導き出す。

差分検出プロセスでは、新しいVDOMツリーと古いものを調べることによって、2つのVDOMバージョンを比較して、古いツリーを新しいものに変換する操作のリストを生成する。大規模なツリーの場合、新たにVDOMツリーを生成してVDOMデータ構造を走査するコストは、膨大なものになる可能性がある。そのため、VDOMベースのライブラリには、開発者が差分検出プロセスをカスタマイズして、VDOMツリーのブランチ全体をスキップできるようにするエスケープハッチが含まれることもある。

lit-htmlは、差分検出プロセスを必要しない、DOMの宣言的な記述の可能なhtmlテンプレートタグを使用する。そのテンプレートから、変数が変更された時に実行する操作を推測し、対象とするDOMノード上でそれを正確に実行する。そのため、新しいDOMの仮想バージョンの生成や、それに続く差分検出に関わるコストは必要でない。

次の例は、lit-htmlがサポートする構文とメインAPIを示すものだ。

import {html, render} from 'lit-html';

// A lit-html template uses the `html` template tag:
let sayHello = (name) => html`<h1>Hello ${name}</h1>`;

// It's rendered with the `render()` function:
render(sayHello('World'), document.body);

// And re-renders only update the data that changed, without VDOM diffing!
render(sayHello('Everyone'), document.body);

lit-html構文は、ディレクティブを使用して拡張することができる。 さらに、HTML <template>要素などのネイティブなプラットフォーム機能を、ネイティブで効率的なクローニングで使用する。 また、特別なJSXコンパイル操作を必要とせずに、ネイティブのJavaScriptテンプレート構文を利用することが可能だ。資料では、次のように説明されている。

テンプレートは、計算、関数との受け渡し、ネストが可能な値です。式は本当のJavaScriptであり、任意の記述が可能です。
lit-htmlは、文字列やDOMノード、混在(hererogeneous)リスト、ネストされたテンプレートなど、多くの種類の値をネイティブにサポートします。
(…)"DOMの効率的な作成と更新"、それのみに注目しているのです。

lit-htmlには、コンポーネントモデルは含まれない。LitElementを使用することで、lit-htmlをレンダリングエンジンとして、Webコンポーネントを宣言的に定義することが可能になる。ドキュメントには、Web標準を使うことで得られる主なメリットについて、詳しく説明されている。

LitElementはWebコンポーネント標準に準拠しているので、開発したコンポーネントは任意のフレームワークで動作します。
LitElementでは、Webページへの簡単な挿入のためにCustom Elementを、カプセル化のためにShadow DOMを使用しています。Webプラットフォーム上で、新たな抽象化を行うことはありません。

基本的なLitElementコンポーネントは、次のように定義することができる。

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

これを次のように、任意のフレームワークで、通常のHTMLとして使用する。

<simple-greeting name="Everyone"></simple-greeting>

lighterhtmlライブラリは、l同様の機能をit-htmlに提供する。hyperhtml-elementも同じく、LitElementの機能に近い機能をサポートする。

lit-htmlとLitElementは、BSD-3ライセンスで利用可能なオープンソースソフトウェアである。バグや機能リクエストを含むフィードバックは、lit-html GitHubプロジェクトおよびLitElement GitHubプロジェクトを通じて受け付けられている。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。