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 la creación de plantillas HTML. LitElement es una clase base simple para crear componentes web con plantillas de lit-html.
Si seguiste los proyectos, es probable que sepas de qué se trata lit-html y LitElement (y puedes saltar al final si lo deseas). Si es la primera vez que usas lit-html y LitElement, sigue leyendo para obtener una descripción general.
lit-html: Una biblioteca pequeña y rápida para la creación de plantillas HTML
lit-html es una biblioteca de JavaScript pequeña (poco más de 3, 000 líneas empaquetadas, reducidas y con compresión gzip) y rápida para la creación de plantillas HTML. lit-html funciona bien con los enfoques de programación funcional, 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 de lit-html:
render(myTemplate('Ada'), document.body);
La nueva renderización de una plantilla solo actualiza los datos que cambiaron:
render(myTemplate('Grace'), document.body);
lit-html es eficiente, expresivo y extensible:
- Eficiencia: lit-html es muy rápido. Cuando cambian los datos, lit-html no necesita realizar ninguna comparación. En su lugar, recuerda dónde insertaste expresiones en tu plantilla y solo actualiza estas partes dinámicas.
- Expresivo: lit-html te brinda toda la potencia de JavaScript, la IU declarativa y los patrones de programación funcionales. Las expresiones de una plantilla de lit-html son solo JavaScript, así 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: cadenas, nodos DOM, arrays y mucho más. Las plantillas en sí son valores que se pueden calcular, pasar a funciones y viceversa, y anidar.
- Extensible: lit-html también es personalizable y extensible: tu propio kit de construcción de plantillas. Las directivas personalizan la forma en que se manejan los valores, lo que permite valores asíncronos, repeticiones de claves eficientes, límites de error 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 en GitHub.
Si todo lo que necesitas es crear plantillas, puedes comenzar ahora con los documentos de lit-html. Si quieres compilar componentes para usarlos en tu app o compartirlos con tu equipo, sigue leyendo para obtener más información.
LitElement: una clase base de componentes web ligeros
LitElement es una clase base liviana que facilita más que nunca la compilación y el uso compartido de componentes web.
LitElement usa lit-html para renderizar componentes y agrega APIs para declarar atributos y propiedades reactivos. Los elementos se actualizan automáticamente cuando cambian sus propiedades. Además, se actualizan rápido, sin generar diferencias.
Este es un componente LitElement simple 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 excelente API de JavaScript sin modificaciones).
Esto crea un elemento que puedes usar en cualquier lugar donde usarías un elemento HTML normal:
<name-tag name="Ida"></name-tag>
Si ya usas componentes web, te complacerá 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 son necesarios para las versiones heredadas del navegador.
Si es la primera vez que usas componentes web, te recomendamos que los pruebes. Los componentes web te permiten extender el HTML de una manera que interopera con otras bibliotecas, herramientas y frameworks. Esto los hace ideales para compartir elementos de la IU dentro de una organización grande, publicar componentes para usarlos en cualquier lugar de la Web o compilar sistemas de diseño de IU como Material Design.
Puedes usar elementos personalizados en cualquier lugar donde uses HTML: en tu documento principal, en un CMS, en Markdown o en vistas completas con frameworks, como React y Vue. También puedes combinar componentes de LitElement con otros componentes web, ya sea que se hayan escrito con tecnologías web básicas o con la ayuda de herramientas como los componentes web de 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 las plantillas de lit-html en otro proyecto, consulta la documentación de lit-html:
Como siempre, cuéntanos qué te parece. Puedes comunicarte con nosotros en Slack o Twitter. Nuestros proyectos son de código abierto (por supuesto) y puedes informar errores, enviar solicitudes de funciones o sugerir mejoras en GitHub: