lit-html

効率的で、表現力豊かで、拡張可能なJavaScript HTMLテンプレートライブラリ

はじめる

日本語翻訳(作業中)

次世代HTMLテンプレート in JavaScript

lit-htmlは、JavaScriptでHTMLテンプレートを書くことができ(HTML in JS)、DOMを作成・更新するのに必要なデータとテンプレートを効率的に描画・ 再描画 します:

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

// `html`タグを使った小さなlit-htmlテンプレート:
let sayHello = (name) => html`<h1>Hello ${name}</h1>`;

// `render()`関数によって描画されます:
render(sayHello('World'), document.body);

// VDOMによって差分検知されることなく、値が変更された時にのみ再描画されます!
render(sayHello('Everyone'), document.body);

lit-html を使う理由は?

Efficient - 効率的

lit-htmlはとっても高速です。lit-htmlはネイティブクローニング(native cloning)による<template>要素などの高速なプラットフォームを活用しています。

VDOMライブラリとは違って、lit-htmlは画面全体を再描画せず、実際に変更されるテンプレートの一部分だけを更新します。

Expressive - 表現力豊か

lit-htmlを使うことで、JavaScriptと関数型プログラミングのフルパワーを発揮できます。

テンプレート(Templates)は関数へ再計算した値の受け渡しや入れ子にして使えます。式(Expressions)ではJavaScriptがそのまま評価されるので、そこで必要なことはなんでもできます。

lit-htmlは、文字列やDOMノード、多様なリスト、ネストされたテンプレートなど、多くの種類の値をネイティブでサポートします。

Extensible - 拡張可能

lit-htmlはとってもカスタマイズしやすく拡張が容易です。ディレクティブ(Directives)を定義することにより、値の処理や非同期処理、効率的なキー付き繰り返し処理やエラーなど様々なことがカスタマイズできます。lit-htmlはあなた専用のテンプレート構築キットとなるでしょう。

効率的にDOMを作成、更新します

lit-htmlはいわゆるフレームワークではなく、コンポーネントモデルも含まれていません。 DOMを効率的に作成して更新するという、1つのことだけにフォーカスしています。 単純な処理では単体で使え、複雑で多機能なUI開発では他のフレームワークやWebコンポーネントなどのコンポーネントと組み合わせることができます。

ブラウザ互換

lit-htmlは全ての主要なブラウザで動作します(Chrome, Firefox, IE, Edge, Safari, Opera)

Chrome logo Firefox logo Internet Explorer logo Edge logo Safari logo Opera logo

Polymer Summit 2017での公式発表