Google LitElements

Oliverio Petrecca

Oliverio Petrecca

Técnico superior en análisis de sistemas. Desarrollador mern stack. Miembro del squad de ahorro y financiación del Banco Galicia con grandes habilidades en Google optimize.
compartir
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram

¿Cómo crear componentes web reutilizables en cada uno de tus proyectos?

Cuando cuento que soy desarrollador react y me preguntan de qué se trata, además de contarles sobre el virtual DOM y/o Facebook, mi respuesta suele ser “Imaginate crear tus propias etiquetas html, con estilo y funcionalidad, para utilizarlas luego todas las veces que quieras en tus proyecto”.

Un día, me preguntaron si eso podía realizarse sin necesidad de React, Angular, Vue o algún framework/librería especial para FrontEnd y proyectos. Lo primero que pensé fue en WebComponents.

Así que decidí hacer un WebComponent de ejemplo para utilizar mi etiqueta en un html.

Entonces me di cuenta que esto tenía sentido únicamente en un proyecto VanillaJS. Ya que si bien javascript me permite implementarlo “dentro” de un proyecto React, porque la base es la misma, no tenía sentido alguno. Con React podría hacer lo mismo de manera más sencilla y funcional.

Investigando descubrí LitElements. Una Librería que Google creó en 2018, siendo la evolución de Polymer, que permite realizar WebComponents de manera más sencilla que solo con javascript base, pero además, con la gran ventaja que permite “exportar” tu componente para poder utilizarlo donde quieras o requieras, siempre que lo necesites en tus proyectos, por solo 6k comprimido.

Y como no podía ser de otra manera, no iba a estar tranquilo hasta que no lo viera con mis propios ojos, así que me dedique a generar mi propio LitElement, que luego subí a npm, para instalar y poder consumir desde cualquier proyecto React “solo con una etiqueta”.

En los próximos renglones les mostrare todo el proceso con ejemplos a la vista.

Primero armé un pequeño componente con algunas etiquetas nativas de html e hice un input que me muestra su valor en tiempo real, permite elegir el color de letra, y recibe un atributo para ubicar el título.

Esto resultó.

…levantado desde su html de esta forma :

INDEX.HTML

El WebComponent lo armé en un archivo js, donde el primer paso es hacer nuestro template.

INDEX.JS

Y la clase InputRealTime que se extiende de HTMLElement.
cuenta con su ciclo de vida de primer render, cambios y finalización.

Una vez finalizado el WebComponent, lo migré a LitElement para aprender y entender su funcionamiento.

Baje el starter-kit de la página oficial, instale los node_modules y puse manos a la obra.

INPUT-REAL-TIME.JS

Si bien tenemos una estructura de proyecto node, y podemos darle mucha funcionalidad, para mi ejemplo basta con modificar el js principal.
Si nos fijamos en la creación de la clase, vemos que extiende de LitElements. Si consultamos dicha herencia, vamos a llegar al HTMLElement de WebComponent, entendiendo que Lit, es la librería necesaria para trabajar con ellos.
Lit cuenta con el método render. Para generar el template, dentro del método render, nos apoyamos en una función llamada “html”,
donde con el return y comillas invertidas (“), podemos manejar el template, de una manera mucho más prolija a la vista.

Como con los WebComponents, cada vez que LitElement detecte que cambia alguna de las propiedades reactivas, vuelve a llamar internamente al método render para que se actualice con los nuevos datos.

También permiten tener elementos Lit hijos sin límite, pero se recomienda no hacerlo demasiado enredado para que no pierda su practicidad.

No me costó demasiado replicar mi WebComponent de manera más sencilla y amigable a su lectura.
Una vez funcional mi componente, hice un readme relativamente sencillo explicando como instalar la dependencia en un proyecto node.
Subí mi LitElement a un repositorio git a elección y lo publique en mi cuenta de npm para luego consumirlo.

Una vez subido y publicado el LitElement, creé un proyecto react con el famoso create-react-app, acto seguido le instalé mi preciado componente con el comando

$ npm i input-real-time

Listo! Todo estaba preparado para ver si mi componente Lit podía ser reutilizado en diferentes proyectos y hasta en distintas tecnologías.

Esto me abría las puertas a dejar componentes, logicamante complicados, separados del proyecto principal para facilitar inmensamente su uso.

Podía pasar rutas, objetos y estilos como parámetros para usar en mi objeto personalizado, podía tener mi login o formulario preparados para utilizar cuando necesitara, podía ahorrar tiempos en componentes ya listos.

Bueno, ya basta de volar, bajemos a tierra y dejemosle esas cosas a los que realmente saben, vamos a ver si esto funciona…

USELIT.JSX

Y finalmente….

Lo había conseguido !! Tenía mi componente para compartir, utilizar y reutilizar.

Así fue, como indagando un poco, pude conocer esta útil herramienta que espero, le puedan sacar provecho.