Creada por el equipo desarrollador de Polymer, LitElement es una clase con la que podremos construir componentes de una manera rápida y sencilla. Al estar realizada en JavaScript estándar y contar con las características propias de los navegadores, es muy liviana y tiene un elevado rendimiento. También podremos crear componentes para frameworks como Angular, React o VueJS.
¿Qué es LitElement y qué nos ofrece?
LitElement es una clase de programación orientada a objetos JavaScript. Tiene un peso de unos 6,6Kb comprimido y nos permite hacer cosas como las siguientes:
- Renderizar templates en el Shadow DOM.
- Administrar los atributos de los elementos, haciendo que se automatice la sincronización con las propiedades del componente.
- Favorece la creación de propiedades para los componentes.
- Binding entre propiedades del componente y el template.
Polymer versus LitElement
Realmente, podemos considerar que LitElement es la evolución de Polymer, y su equipo de desarrollo ha creado un set de herramientas capaz de construir Web Components de forma amigable. LitElement saca el jugo a la tecnología actual, tanto al estándar de Web Components, como a las últimas novedades implementadas en Javascript. Su librería es moderna y tiene todo lo que nos ofrece Polymer, pero con más rendimiento y menor peso.
Cualquier componente basado en PolymerElement es compatible con LitElement, por lo que podremos crear aplicaciones en LitElement con componentes Polymer que hayan sido desarrollados con anterioridad.
Si habéis estado utilizando Polymer, hemos de subrayar que tenéis mucho terreno ganado para la adaptación a LitElement, pues son muy similares y os haréis fácilmente con él. Aunque a lo que más tiempo dedicaréis es a la sintaxis de creación de los templates, en comprender algunos métodos del ciclo de vida de los componentes y a algunas cosas relacionadas con las propiedades.
Casos de uso con y sin conocimientos de Polymer
- Proyecto sencillo LitElement con start-lit-element. Para comenzar a experimentar con LtElement, podemos encontrar en el repositorio start-lit-element un proyecto realizado por el propio equipo de Polymer, y que podremos instalar muy fácilmente un espacio de pruebas. El proyecto dispone de algunas características interesantes, como la integración de un elemento cargado mediante lazy load. En pocos segundos daremos de alta un proyecto para empezar a trabajar con código.
En el archivo README (que viene con el propio proyecto) encontraremos información y los comandos necesarios para poder ponerlo en marcha. - Proyecto PWA Starter Kit. Los desarrolladores que tengan más recorrido, tendrán el PWA Starter Kit, que no es más que un proyecto con la estructura de una Progressive Web App listo para usar. Podríamos decir que es un boilerplate para construir nuestra propia aplicación progresiva.
PWA Starter Kit está basado en LitElement y utiliza elementos tan atractivos como los PWA-Helpers, métodos routing para aplicaciones frontend, Redux para guardar el estado, lazy load de los componentes por ubicaciones de aplicación, etc.
Es un buen punto para estudiar cómo se puede hacer una aplicación frontend moderna y escalable, basada en el estándar de Web Components y capaz de beneficiarse de todas las ventajas de los navegadores actuales.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
