Introducción a lit-html y LitElement
Según su sitio web oficial, lit-html es una biblioteca de plantillas HTML eficiente, expresiva y extensible para JavaScript. Si bien la versión actual de lit-html es parte de la biblioteca de componentes Lit, la parte de plantillas se factoriza en una biblioteca independiente, que discutiremos en este artículo.
Esta biblioteca hace que el marcado sea reutilizable al permitirnos definir marcadores de posición que pueden contener diferentes valores en HTML. Esto ahorra a los desarrolladores tiempo y energía valiosos. En este artículo, echaremos un vistazo a cómo funciona lit-html y lo aplicaremos siguiendo un sencillo tutorial usando HTML y CSS.
¿Qué es lit-html?
Una plantilla es una combinación de contenido estático y dinámico que está estructurado de una manera determinada. Por ejemplo, una plantilla HTML para un formulario de registro puede tener un aspecto similar al siguiente:
<div>
<p>First Name: <span>_____</span></p>
<p>Last Name: <span>_____</span></p>
<p>Email: <span>_____</span></p>
<p>Phone Number: <span>_____</span></p>
</div>
El contenido estático incluye campos para nombre, apellido, correo electrónico y número de teléfono. Las líneas representan el contenido dinámico.
Si tuviéramos que manipular el HTML anterior con JavaScript simple, tendríamos que usar DOM seleccionando API como , querySelectorAll(), y obtener el elemento y realizar una operación en él; Esto puede hacer que la aplicación parezca falsa o esté mal codificada.querySelector()getElementByTagName
lit-html nos permite renderizar plantillas HTML en JavaScript que son similares al código que tenemos arriba. Las partes dinámicas de la plantilla se pueden renderizar y manipular, lo que hace que la plantilla sea fácil de reutilizar.
Beneficios de usar lit-html
Lit-HTML tiene una serie de beneficios que mejoran la experiencia tanto del usuario como del desarrollador.
- Proporciona toda la potencia de JavaScript en el marcado
- Se inicia y se actualiza rápidamente
- Fácil de usar y tiene una API extensible
- La biblioteca pequeña da como resultado tamaños de paquete pequeños y tiempos de carga cortos
Como puedes ver, lit-html es una poderosa biblioteca de plantillas y una gran adición para el proyecto de cualquier desarrollador.
Cómo funciona
lit-html se basa en los literales de plantilla ECMAScript 2015 (ES6) de JavaScript, la etiqueta <template> de HTML y algunas otras tecnologías no reveladas para funcionar y aumentar el rendimiento.
Aquí hay un ejemplo de una plantilla lit-html simple:
html`
<div>
<h1>Hello ${recepient}</h1>
<div>Hello ${content}</div>
</div>
`
Podemos ver la utilización de una forma avanzada de literales de plantilla llamados plantillas etiquetadas. La etiqueta, que en este caso es HTML, es una función que procesa los literales de la plantilla. Curiosamente, los literales de plantilla permiten la incrustación de lenguajes específicos del dominio, como HTML (específico del dominio web) en JavaScript.
lit-html reemplaza las expresiones con marcadores de posición, creando una cadena en el proceso que se utilizará para crear la plantilla. Una vez creada la plantilla, lit-html optimiza la plantilla y toma nota de dónde están los marcadores de posición; Estas ubicaciones se denominan . A continuación, elimina los marcadores de posición, rellenando los valores con y actualizándolos cuando cambian los valores.partspartsparts
Construcción de componentes con tecnología lit-html
Aunque las plantillas lit-html se pueden usar para crear y manipular elementos DOM, estas plantillas no están vinculadas a ningún modelo de componente. Para la construcción de componentes, podemos usar LitElement.
¿Qué es LitElement?
LitElement es una biblioteca increíble para crear componentes web impulsados por plantillas lit-html. Según el sitio web oficial, es «una clase base simple para crear componentes web rápidos y livianos».
Proporciona una manera fácil de crear componentes de interfaz de usuario nativos y web que se pueden usar en cualquier lugar donde tenga HTML en su proyecto, independientemente de la biblioteca de frontend o el marco utilizado.
A continuación, se muestra un ejemplo de un componente LitElement:
import {LitElement, html} from 'lit-element';
class TodoItem extends LitElement {
static get properties() {
return {
item: {type: String},
};
}
render() {
return html`
<div class="todo-item">
<span>${this.item}</span>
</div>
`;
}
}
customElements.define('todo-item', TodoItem);
Los componentes de LitElement siguen el paradigma de programación orientada a objetos, un paradigma de programación que crea planos de código reutilizables (clases) e instancias del modelo (objetos).
Declaramos las propiedades como propiedades estáticas en LitElement y creamos un método de representación que devuelve un resultado de plantilla que contiene la plantilla definida. A continuación, definimos el componente para que esté disponible en todo el proyecto.
Comparación con los frameworks frontend existentes
Los componentes creados con LitElement son independientes del marco o de la biblioteca; Siguen los estándares de componentes web, lo que significa que puede crear elementos personalizados reutilizables mientras separa su funcionalidad del resto de su código. El shadow DOM se utiliza para la encapsulación en LitElement.
A diferencia de muchas bibliotecas de frontend que necesitan diferenciar para volver a renderizar el DOM de manera óptima cuando hay un cambio en un nodo, LitElement utiliza lit-html para definir y representar plantillas HTML. Las actualizaciones del DOM son ultrarrápidas, porque lit-html solo vuelve a renderizar las partes dinámicas de la interfaz de usuario.
Crear una lista de tareas pendientes con LitElement
Vamos a ensuciarnos las manos y solidificar nuestro conocimiento de lit-html y LitElement creando una sencilla lista de tareas pendientes. Seguiremos una metodología atómica para crear componentes. Primero, construimos átomos, luego los apilamos para construir moléculas y, finalmente, creamos organismos.
Así es como se verá el directorio del proyecto:
Archivo CSS en un proyecto LitElement
El estilo de LitElement se almacena en un archivo JavaScript denominado . Usando la etiqueta CSS de lit-html, podemos escribir estilos en JavaScript:todo-style.js
import {css} from 'lit-element/lit-element.js';
export const style = css`
*{
font-family: monospace
}
ul{
margin:0;
padding-inline-start: 0
}
input{
padding: 5px;
font-size: 1rem;
width:240px
}
`
Para que el estilo esté disponible para un LitElement, simplemente importe el estilo y defínalo en una propiedad de estilos estática como la siguiente:
import { style } from "./todo-style";
static get styles() {
return [style];
}
Uso de propiedades en LitElements
Al igual que la mayoría de los marcos de frontend comunes, los componentes principales pueden comunicarse con sus hijos y viceversa a través de propiedades mediante la emisión de eventos. Puede definir una propiedad mediante los métodos siguientes y ver un ejemplo en el fragmento de código:
- Atributo:
<p id="${...}"></p> - Atributo booleano:
?disabled="${...}" - Propiedad:
.value="${...}" - Controlador de eventos:
@event="${...}"
class TodoElement extends LitElement {
static get properties(){
return {
list:{type:Array},
}
}
static get styles() {
return [style];
}
constructor() {
super();
this.list = JSON.parse(localStorage.getItem('litTodoList')) || [];
this.todo = '';
}
render() {
return html`
<div class="todo-body">
<h1>😎 Lit Todo 😎</h1>
<todo-list .list=${this.list}></todo-list>
</div>
`;
}
}
En este elemento, estamos usando una lista de propiedades, indicada por un punto antes del nombre de la propiedad, para pasar la lista de tareas pendientes, que obtendremos de localStorage.
Podemos mapear fácilmente a través de la lista en el componente y pasar cada uno al componente:TodoListtodoTodoItem
class TodoList extends LitElement {
static get properties(){
return {
list:{type:Array}
}
}
static get styles() {
return [style];
}
render() {
return html`
<ul>
${this.list.map((todoItem) => html`<li><todo-item item=${todoItem}></todo-item></li>`)}
</ul>
`;
}
}
También podemos emitir eventos a los componentes principales, de manera similar a cómo se hace en el componente:TodoInput
class TodoInput extends LitElement {
static get properties() {
return {
todo: {type: String},
onInput: {type: Function},
onKeyPress: {type: Function},
createNewToDoItem: {type: Function},
};
}
static get styles() {
return [style];
}
render() {
return html`
<div class="todo-input">
<input
type="text"
.value=${this.todo}
@input=${this.onInput}
@keypress=${this.onKeyPress}
/>
<button
class="todo-button"
@click=${this.createNewToDoItem}
>Add</button>
</div>
`;
}
}
Aquí, las funciones que se van a emitir se declaran en el método de propiedades estáticas y se enlazan a las funciones de su componente principal:
handleKeyPress(e) {
if (e.target.value !== '' && e.key === 'Enter') {
this.createNewToDoItem();
}
}
handleInput(e) {
this.todo = e.target.value;
}
createNewToDoItem(){
const todoList = JSON.parse(
localStorage.getItem('litTodoList')
) || []
todoList.push(this.todo)
this.list = todoList
localStorage.setItem('litTodoList', JSON.stringify(todoList))
this.todo = ""
}
<todo-input
todo=${this.todo}
.onInput=${this.handleInput.bind(this)}
.onKeyPress=${this.handleKeyPress.bind(this)}
.createNewToDoItem=${this.createNewToDoItem.bind(this)}
></todo-input>
¡Te he dejado una pequeña tarea! Agregue una funcionalidad de eliminación a la aplicación. Aquí está el enlace al código fuente.todo
Conclusión
En este artículo, analizamos qué es lit-html, cómo funciona y los beneficios de usarlo en un proyecto. También analizamos algunas partes básicas de LitElement mediante la creación de una aplicación simple. Con los conocimientos adquiridos en este artículo, ahora debería poder agregar LitElements a su proyecto.
