LitElement es una potente clase base para la creación de elementos personalizados, lo que conocemos generalmente por Web Components o simplemente componentes, creada por el equipo de Polymer. Mediante esta clase podemos construir componentes de una manera rápida y sencilla, creando nuevos elementos del HTML especializados para implementar cualquier tipo de interfaz o comportamiento, en el ámbito del navegador.

Está basada en Javascript estándar (Web Components), por lo que es muy ligera y funciona apoyándose en características nativas de los navegadores, por lo que también ofrece elevadísimo rendimiento. Además, como es Javascript nativo, puedes crear componentes que podrás poner en funcionamiento en aplicaciones como Angular, React, VueJS, por poner varios ejemplos de frameworks conocidos. Al final, los Web Components que construyes con LitElement son para un framework como cualquier otra etiqueta del HTML, pudiendo interoperar con ellas mediante los mismos mecanismos que implementan para los elementos nativos.

Qué es y qué ofrece LitElement

LitElement en sí es una clase, de programación orientada a objetos, Javascript. Debes saber que, cuando queremos construir un Custom Element de Web Components (un elemento, o componente basado en el estándar Javascript), usamos una clase para implementar su aspecto y funcionalidad. Pues LitElement no es más que la clase sobre la que extiendes (por herencia) para poder construir tu elemento.

En sus aproximadamente 6.6Kb de peso (Minimizado y Gzipeado) ofrece una serie de utilidades extra encima del estándar Javascript, que permiten un desarrollo más rápido y sencillo de los componentes. Como se suele decir, es un poco de azúcar sintáctico encima del estándar de Web Components. Entre las cosas que nos ofrece podemos destacar:

• Renderizar templates en el Shadow DOM.
• Facilitar la creación de propiedades para los componentes
• Administrar los atributos de los elementos, de modo que se sincronicen de manera automática con las propiedades del componente y viceversa.
• Enlace automático entre propiedades del componente y el template, lo que conocemos como binding. Gracias a ello conseguimos templates reactivos en los cuales, al actualizarse las propiedades, se actualiza automáticamente el template.

LitElement se basa a su vez en una librería, también creada por el equipo de Polymer, llamada LitHTML. Esta librería básicamente saca partido de nuevas características de Javascript nativo, como los Tagged Template String Literals, para conseguir un motor de actualización de los templates de un grandísimo rendimiento. Gracias a esta librería y su forma de trabajar, el motor de binding entre las propiedades de los componentes y el template, es más rápido que los mejores competidores, por lo que al poco peso de LitElement le tenemos que sumar un elevadísimo rendimiento. Si quieres saber más sobre este aspecto te recomendamos la lectura del artículo sobre LitHTML.

En est artículo te ofrecemos una completa introducción, sin meternos todavía a ver código. No obstante, puedes aprender más en el Manual de LitElement y por supuesto en el repositorio de GitHub de LitElement.

Polymer Vs LitElement

En pocas palabras, podemos entender Lit-Element como la evolución de la librería Polymer. Después de que el estándar de Web Components se haya estabilizado completamente y ahora que es soportado de manera nativa por todos los navegadores más importantes (menos Edge, sobre el que todavía se tienen que cargar Polyfills para extender la compatibilidad), el equipo de Polymer ha querido construir de nuevo todo su set de herramientas para construir Web Components, de manera amistosa a las tecnologías en su estado maduro.

Por tanto, LitElement saca mejor partido a la tecnología actual, no solo al estándar de Web Components, tal como ha quedado establecido definitivamente, sino también a las últimas novedades del lenguaje Javascript. Es una librería más moderna, capaz de ofrecer similares características a lo que venía ofreciendo Polymer, pero que consigue mayor rendimiento en un menor peso.

Dicho lo anterior, cabe destacar que cualquier componente Polymer (basado en la base clase PolymerElement o cualquiera de sus predecesoras) es compatible con cualquier componente LitElement. Por este motivo, puedes crear aplicaciones desarrolladas con LitElement que aprovechen todos los componentes Polymer existentes anteriormente, creados por ti o la comunidad, así como aplicaciones donde vengas usando Polymer, donde podrás integrar perfectamente nuevos componentes creados en base a LitElement. Piensa que al final es todo Javascript basado en un estándar y como tal puedes mezclar unas cosas y otras sin ningún problema, manteniendo exactamente la misma interoperabilidad de componentes. Por supuesto, esta compatibilidad se extiende también a cualquier framework Javascript actual y futuro, ya que está todo basado en un estándar.

Como información para los que ya están usando Polymer, cabe decir que mucho del conocimiento que tienes sobre la librería es aplicable directamente a LitElement, pues las cosas siguen haciéndose de manera bastante similar. Este hecho permitirá que la curva de aprendizaje sea muy suavizada, lo que es de agradecer. El cambio más importante, para el que tendremos que adaptarnos con algo más de esfuerzo, es la sintaxis de creación de los templates, que tiene novedades muy significativas. No solo que el método para definir el template se llama ahora "render", sino porque además incluye nueva sintaxis (heredada de LitHTML) para la creación de repeticiones, condicionales y data binding. También algunos métodos del ciclo de vida de los componentes se han alterado y varias cuestiones relacionadas con las propiedades. Todo esto lo iremos explicando poco a poco, por lo que podéis seguir atentos a DesarrolloWeb para recibir más información.

Primeros pasos con LitElement

Para probar LitElement podemos partir de un par de proyectos de base que enseguida vamos a comentar. Pero antes de ello queremos mencionar:

• Si llegas aquí disponiendo ya cierto conocimiento de Polymer, podrás probar LitElement simplemente creando un componente en el que cambies la base clase y el método de creación del template. Evidentemente tendrás que aprender un par de cosas nuevas, pero todo lo que sabes en cuanto a componer el proyecto, importar componentes, levantar el servidor de desarrollo y todo lo demás, sigue siendo el mismo.
• Si llegas aquí sin tener ningún conocimiento de Polymer, quizás necesites una serie de instrucciones más detallada para poder entender todas las tripas de los proyectos que vamos a comentar a continuación. Pero no te preocupes porque avanzaremos con más detalles en los próximos artículos. Me refiero a cosas como levantar un servidor de desarrollo, instalar los Polyfill, realizar el build de las aplicaciones, importar módulos propios y de terceros. Aunque todo esto tampoco resultará problemático a personas que ya vengan de librerías como React o frameworks como Angular, pues los mecanismos para hacer todo este tipo de tareas son los mismos en el framework de turno que en LitElement.

Proyecto sencillo LitElement con start-lit-element

En el repositorio start-lit-element encuentras el proyecto que el equipo de Polymer ha creado para poder instalar de manera cómoda un espacio de pruebas, para comenzar a experimentar con LitElement.

El proyecto es bastante sencillo, pero a decir verdad tiene algunos extra interesantes, como la incorporación de un elemento cargado mediante "lazy load". De momento es la manera más rápida para crear en cuestión de segundos un proyecto para empezar a trastear.

En el README del proyecto encuentras más información y los comandos necesarios para poder montarlo en local y lanzar el servidor de desarrollo para ponerlo en marcha.

Proyecto PWA Starter Kit

Por otra parte, para desarrolladores un poco más avanzados, tenemos el PWA Starter Kit que es un proyecto con el que podemos obtener todo el esqueleto de una Progressive Web App ya listo. Es como un boilerplate para crear tu propia aplicación progresiva.

PWA Starter Kit está basado en LitElement y usa otra serie de cosas interesantes como los PWA-Helpers del equipo de Polymer, Redux para almacenar el estado, sistema routing para aplicaciones frontend, lazy load de los componentes por rutas 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.

Conclusión

Creemos que LitElement es una apuesta excelente para cualquier tipo de desarrollador y de proyecto, sobre todo por estar basado en el estándar Web Components y porque la creación de componentes con LitElement es compatible con cualquier tipo de framework, librería o con únicamente Javascript, si es que no usas ninguna. Además, Web Components en general y por supuesto los componentes que crees con LitElement los podrás usar en cualquier tipo de proyecto, tanto sitios web tradicionales como aplicaciones web, progressive web apps o Single Page Applications.

Gracias a LitElement estamos ante un nuevo paso adelante en el maravilloso mundo del desarrollo Web Components con una solución moderna, que usa las mejores características del lenguaje Javascript, ofreciendo un marco de desarrollo sencillo, ligero y amistoso para desarrolladores.

En los próximos artículos avanzaremos, desde un enfoque más práctico. En la siguente entrega abordaremos una guía paso a paso para crear tu primer componente basado en LitElement.