Por Pedro Pérez Iturriaga, Web Developer en Landscape
Desde hace un tiempo ya, descubrí que los componentes web, son un grupo de diferentes especificaciones que te permiten crear selectores HTML personalizables y reutilizables (con su lógica aislada del resto del código), con el objetivo de desarrollar sitios y aplicaciones web.
Como desarrollador web, reutilizar códigos es una práctica habitual, pero mientras más crece el proyecto, se hace más difícil evitar que los componentes se vean afectados o se vea modificado el diseño, al realizar cambios en el sitio. Para hacer esto mucho más sencillo, están los web components, los que tienen 4 especificaciones: Custom Elements, Shadow Dom, HTML imports & HTML templates, las que se utilizan para estos selectores HTML personalizables. Estas últimas, mantienen su código encapsulado, evitando conflictos de código.
¿Cómo llegué a esto de los web components?
Un día de trabajo cualquiera, pensando en las reales necesidades de nuestros clientes y debatiendo sobre cuál será el nuevo desarrollo que implementaremos, que a su vez apoyará a las empresas que asesoramos, nació la propuesta de los web components.
Extrañamente, me llamó la atención su concepto (selectores HTML personalizados, tanto en CSS como en función…¡Nice!) Quise aventurarme en el camino de aprender a desarrollarlos y conocer su gran ventaja por sobre elementos HTML o por sobre los componentes que nos ofrecen Frameworks (Angular, Ionic) o librerías (React o Vue).
Después de unos días estudiando aprendes que una vez creados, estos se pueden llevar a distintos entornos de desarrollo (existe Stencil, una herramienta que permite crear componentes nativos y poder exportar el mismo paquete de componentes a desarrollos en angular, react, ionic, etc). Se pueden crear sistemas de diseños, permitiendo a los clientes contar con guías de diseño web completas. Se acortan los tiempos de desarrollo de apps y sitios de una misma empresa o marca.
Ejemplo de Web Component Nativo
Una ventaja del web component nativo, es que se usan “clases” para implementarlos, y estas se pueden extender tal como se ve en el siguiente ejemplo:
A continuación creamos un archivo de nombre “boton-basico.js”.
Ahora, para crear el template, nos apoyamos en un método getter (el cual deja acceder a los datos de los objetos, para leerlos o asignar nuevos valores), que permite usar el template dentro de la clase.
Y para hacer que esto cobre vida, debemos agregar un constructor dentro de la clase antes del “get”, con lo siguiente.
En el constructor, llamamos a “super()”, para invocar a la “clase padre”. Esto es importante para que funcione como corresponde.
Con “this.status” iniciamos el valor del atributo “status” que trae con “this.getAttribute(‘status’);”. Si el este último no está definido en la etiqueta, esta se debe inicializar, en este caso con el atributo ‘neutral’. Luego creamos el “shadowDom”, con el método “this.attachShadow”, permitiendo agregar el template dentro del “shadowDom”.
Para que nuestro componente sea reactivo y actualice su estado cada vez que el atributo “status” cambie, usamos el método de ciclo de vida “attributeChangedCallback”, que recibe nombre, valores anteriores y nuevo del método. Por último nos queda implementar el método “observedAttributes”(se implementa antes que attributeChangedCallback), que se encarga de devolver un array de los atributos que se desean observar.
Al usar nuestro componente nativo, desde el HTML, donde queremos implementar importamos el script “boton-basico.js”, y dentro de nuestro “body” utilizamos el selector del componente con el estado que queramos:
Esta es la forma más sencilla de crear un componente web. Hasta el día de hoy se disponen de varias herramientas para esto, como Polymer o Stencil, dándonos mejores soluciones y tiempos de desarrollo más cortos.
Sin duda, esta es una buena alternativa para toda empresa que desea disponer de su propio paquete de componentes a usar en sus proyectos web, con sus estilos y comportamientos definidos, donde el developer solo use el selector personalizado para mostrar un producto mejorado y con mucho más valor.
En Landscape, podemos apoyar el proceso de implementación de esta metodología, por medio de los siguientes mecanismos:
1- Desarrollar una librería de componentes reutilizable, que permite un desarrollo más rápido de un proyecto Web nuevo, o darle más valor a un proyecto ya existente.
2- Brindar un servicio diseñado según las necesidades del cliente, entregando un proyecto orientado en los objetivos de la compañía.
3- Entregar el apoyo técnico y de capacitación al equipo receptor, para que sea capaz de mantener vivo el proyecto.
Hablemos contacto@landscape.cl
