Hoy, nos complace anunciar las primeras versiones estables de nuestras dos bibliotecas de desarrollo web de nueva generación: lit-html y LitElement.
lit-html es una biblioteca pequeña, rápida y expresiva para plantillas de HTML. LitElement es una clase base simple para crear componentes web con plantillas lit-html.
Si has seguido los proyectos, es probable que sepas de qué se tratan lit-html y LitElement (y, si lo deseas, puedes saltar hasta el final). Si eres nuevo en lit-html y LitElement, lee esta descripción general.
lit-html: una biblioteca pequeña y rápida para plantillas de HTML
lit-html es una biblioteca de JavaScript muy pequeña (un poco más de 3,000, en paquetes, reducidos y comprimidos en formato gzip) para plantillas de HTML. lit-html funciona bien con enfoques de programación funcionales, lo que te permite expresar la IU de tu aplicación de forma declarativa, como una función de su estado.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
Es sencillo renderizar una plantilla lit-html:
render(myTemplate('Ada'), document.body);
Volver a renderizar una plantilla solo actualiza los datos que cambiaron:
render(myTemplate('Grace'), document.body);
lit-html es eficiente, expresivo y extensible:
- Eficiente. lit-html es muy rápido. Cuando los datos cambian, lit-html no necesita hacer ningún diffing. En cambio, recuerda dónde insertaste expresiones en tu plantilla y solo actualiza estas partes dinámicas.
- Expresivo. lit-html te ofrece toda la potencia de JavaScript, la IU declarativa y los patrones de programación funcionales. Las expresiones en una plantilla lit-html son solo JavaScript, por lo que no necesitas aprender una sintaxis personalizada y tienes toda la expresividad del lenguaje a tu disposición. lit-html admite muchos tipos de valores de forma nativa: strings, nodos del DOM, arrays y mucho más. Las plantillas en sí son valores que se pueden calcular, pasar desde y hacia funciones, y anidarse.
- Extensible: lit-html también se puede personalizar y extender, es decir, tu propio kit de creación de plantillas. Las directivas personalizan la manera en que se controlan los valores, lo que permite valores asíncronos, repeticiones con claves eficientes, límites de errores y mucho más. lit-html incluye varias directivas listas para usar y facilita la definición de las tuyas.
Varias bibliotecas y proyectos ya incorporaron lit-html. Puedes encontrar una lista de algunas de estas bibliotecas en el repositorio awesome-lit-html de GitHub.
Si todo lo que necesitas es crear plantillas, puedes comenzar ahora mismo con los documentos de lit-html. Si quieres crear componentes para usar en tu app o compartirlos con tu equipo, sigue leyendo.
LitElement: una clase base de componente web ligero
LitElement es una clase base liviana que hace que compilar y compartir componentes web sea más fácil que nunca.
LitElement usa lit-html para renderizar componentes y agrega APIs para declarar propiedades y atributos reactivos. Los elementos se actualizan automáticamente cuando cambian sus propiedades. Además, se actualizan rápido, sin diferencias.
Este es un componente simple de LitElement en TypeScript:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(También tenemos una API JavaScript genial).
Esto crea un elemento que puedes usar en cualquier lugar en el que utilizarías un elemento HTML normal:
<name-tag name="Ida"></name-tag>
Si ya usas componentes web, te alegrará saber que ahora son compatibles de forma nativa con Chrome, Safari y Firefox. La compatibilidad con Edge estará disponible próximamente, y los polyfills solo se necesitan para las versiones de navegadores heredados.
Si es la primera vez que usas componentes web, te recomendamos que los pruebes. Los componentes web te permiten extender HTML de una manera que funciona de manera integrada con otras bibliotecas, herramientas y frameworks. Esto los hace ideales para compartir elementos de la IU dentro de una gran organización, publicar componentes para usar en cualquier lugar de la Web o compilar sistemas de diseño de IU, como Material Design.
Puedes usar elementos personalizados siempre que uses HTML: en tu documento principal, en un CMS, en Markdown o en vistas creadas con frameworks, como React y Vue. También puedes mezclar y combinar componentes de LitElement con otros componentes web, ya sea que se hayan escrito con tecnologías web comunes o que se hayan creado con la ayuda de herramientas como los componentes web Lightning de Salesforce, Stencil de Ionic, SkateJS o la biblioteca de Polymer.
Comenzar
¿Quieres probar lit-html y LitElement? Un buen punto de partida es el instructivo de LitElement:
Si te interesa usar lit-html por sí solo o integrar plantillas lit-html en otro proyecto, consulta los documentos lit-html:
Como siempre, envíanos tu opinión. Puedes hacerlo a través de Slack o Twitter. Nuestros proyectos son de código abierto (por supuesto) y puedes informar errores, presentar solicitudes de funciones o sugerir mejoras en GitHub: