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テンプレートライブラリである。他のフロントエンドレンダリングライブラリ(React、Vue、Dojo 2、Angular 2など)とは異なり、仮想DOM(VDOM)を使用しない。
VDOMの主なメリットは、宣言的かつ純粋な機能記述をサポートすることにより、ユーザイベントの結果として実行される、断片的でアドホックな、メンテンスの難しい一連のDOM操作の記述が不要となることにある。VDOMベースのライブラリは、差分検出(reconciliation)と呼ばれるプロセスを通じて、DOMの機能記述から、このようなDOM更新操作を自動的に導き出す。
差分検出プロセスでは、新しいVDOMツリーと古いものを調べることによって、２つの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プロジェクトを通じて受け付けられている。