Lit / LitElement

> Temas > Lit / LitElement
Editar

Lit, antes conocido como LitElement, es una clase base para el desarrollo de custom elements, o elementos personalizados del estándar Javascript de Web Components.

Lit es una librería para el desarrollo de custom elements, del estándar de Web Components, que permite muchas mejoras para un desarrollo ágil y amistoso encima del propio estándar.

Lit antes se conocía con el nombre de LitElement que es la clase base para crear elementos personalizados basados en el estándar Javascript de los Web Components. Además de LitElement, tenemos LitHTML, que es el motor de templates reactivos, que ofrece un gran rendimiento, incluso más rápido que otros motores reactivos como React. Ahora, bajo el nombre de Lit encontramos tanto a los antiguos LitElement y LitHTML. Este cambio se produjo a partir de la versión LitElement 3.0, en la que se agruparon a todas las librerías bajo un mismo paragüas con el nombre de Lit.

Actualmente la documentación de Lit se encuentra en Lit.dev aunque el funcionamiento sigue siendo exactamente el mismo que lo que se conocía anteriormente como LitElement, salvo por unos mínimos detalles en el ciclo de vida de los componentes. Por lo tanto, todo lo que puedes aprender sobre LitElement, por ejemplo en el Manual de LitElement, lo puedes aplicar directamente sobre Lit.

Lo más importante que encontramos en Lit es lo que antes conocíamos como LitElement y básicamente se trata de una clase de Programación orientada a objetos sobre la que podemos extender para crear componentes que tienen diversas utilidades significativas para que la experiencia de desarrollo sea más agrandable y más productiva.

Podemos considerar a LitElement como una librería para Web Components, aunque es quizás mejor el término "microlibrería", ya que su peso es alrededor de 6 KB (Gziped, en torno de 27 KB sin comprimir). Por tanto, el coste de aplicar LitElement para crear componentes es realmente asumible y justificado, dada la cantidad de beneficios que nos aporta.

LitElement a su vez se basa en LitHTML, que es una microlibrería (de peso en torno a 3 KB Gziped) para creación de templates reactivos, que consigue ser más rápida y aportar más rendimiento que cualquiera de los motores de templates más populares como el de React, Vue o Angular. LitHTML se puede usar en cualquier proyecto Javascript donde queramos usar plantillas capaces de reaccionar a cambios en el estádo de las aplicaciones. Podemos pensar en LitElement como un LitHTML extendido para poder ser usado cómodamente en el contexto de los custom elements del estándar Web Components.

Más información:

Lit / LitElement

Manuales

Manual de LitElement
Este es el manual de LitElement que te permitirá crear Custom Elements (elementos personalizados), bajo el estándar Javascript de Web Components, con una base de utilidades muy interesante para el desarrollador.
Manual de Lit
Manual de la librería Lit para el desarrollo de custom elements bajo el estándar de Web Components.

Canales de eventos y clases en directo

Qué aporta Lit

Entre las posibilidades que nos aporta Lit / LitElement tenemos las siguientes:

  • Templates reactivos, que cambian automáticamente cuando cambia el estado (las propiedades) de los componentes
  • Capacidad de sincronización automática entre los atributos de las etiquetas y el estado de los componentes
  • Agrega nuevos métodos del ciclo de vida de los componentes
  • Ofrece diversas funciones de utilidad general para el desarrollo de componentes de interfaz gráfica
  • Capacidad de generar aplicaciones frontend con SSR (Server Side Rendering)

Editar

Qué se puede construir con Lit

Lit es una librería para escribir web components, pero bajo esta sencilla propuesta podemos conseguir desarrollar casi cualquier tipo de proyecto frontend, desde componentes sueltos hasta aplicaciones completas.

Sistemas de diseño que funcionan en todas los frameworks

Lo primero que podríamos desarrollar con Lit son completos y complejos sistemas de diseño, con componentes de todo tipo para poder usar en aplicaciones o sitios web de todo tipo.

La ventaja más importante consiste en que, al usar Web Components, sabes que tu sistema de diseño va a ser compatible con cualquier marco de desarrollo que estés usando. Puedes integrarlos en aplicaciones Angular, React, Vue, etc. Pero también puedes usar esos componentes en un CMS como WordPress o en un sitio web creado artesanalmente. Por supuesto, también puedes usar Lit en sitios estáticos como los desarrollados con generadores de sitios del estilo de Hugo o Jekyll.

Aplicaciones frontend completas

Con Lit puedes desarrollar todo tipo de aplicaciones frontend modernas, como SPA o PWA. No existe límite en lo que puedes llegar a desarrollar basado en Web Components.

Por tanto, Lit podría ser un sustituto perfecto de frameworks como Angular o Vue. Simplemente estarás desarrollando más ligado al estándar y estarás menos restringido al conjunto de tecnologías que ese framework te obliga a adoptar.

Progressive Web Apps

Lit es una librería ideal para desarrollar aplicaciones progresivas, que son capaces de usar las características más avanzadas de los navegadores, para trabajo offline o para cacheo, notificaciones, etc.

Editar

¿Quieres añadir algo sobre Lit / LitElement?

Crea artículos, recursos o comparte información sobre Lit / LitElement

Crear un bloque

Temas relacionados

Preguntas y respuestas de Lit / LitElement

Se han recibido 1 faqs en Lit / LitElement

Hacer una pregunta