Desde el inicio de la programación los programadores hemos intentado reutilizar la mayor cantidad de código posible, no por ser flojos, claro está, sino por eficiencia pura y dura. Ganar tiempo es ganar eficiencia y dinero y eso lo sabemos todos… pero, ¿qué tiene que ver todo esto con los webcomponents?

Pues muy fácil, te lo resumo con un claro ejemplo. Si eres programador de front o estás un poco enterado de las nuevas tecnologías que se usan para desarrollar la parte visual de la aplicación, sabrás que existen varias formas de realizar tal desempeño. Desde usar simplemente HTML + CSS + JS para  crear por ejemplo un menú a usar algún framework como puede ser Angular, React o VueJs. Como ves existen diferentes maneras de solucionar el problema, aunque claro, si tienes una aplicación en VueJs y otra en Angular, aunque el menú sea igual visual y funcionalmente tendrías que programar dos veces, ¿cierto? Pues con nuestros queridos Webcomponents, ¡solo tendrás que hacerlo una vez! Sí, parece increíble pero es así, como hemos mencionado anteriormente, desde siempre hemos querido reutilizar el mismo código lo máximo posible, por lo tanto ahora estamos evolucionando a una tendencia en la que si un programador desarrolla el componente menú en Angular con unas ciertas peculiaridades que veremos más adelante, puede importar ese menú tanto a VueJS, React o incluso un HTML en limpio.

Si no me creeis acompañadme en esta pequeña introducción en la que os mostraré cómo un menú programado en angular, podemos usarlo luego en un HTML “limpio”.

Para empezar vamos a crear un proyecto Angular que se componga de un componente menú.

Primero creamos el proyecto:

ng new post-menu –prefix ng-post-menu

Ahora con el proyecto creado agregamos la dependencia de Angular de elements la cual nos facilita la creación de este webcomponent agregando el polyfill document-register-element.js

ng add @angular/elements

 

Y vamos a crear nuestro componente menú con algunas indicaciones:

ng generate component post-menu

A nuestro componente le hemos agregado la encapsulación y le diremos que sea Emulated, Angular por defecto no utiliza Shadow DOM para encapsular sus componentes, para así facilitar la compatibilidad entre múltiples navegadores que aún no soportan esta característica en forma nativa, pero podemos especificarlo.

 

Vamos a crear un menú simple en este componente utilizando Bootstrap. Como el fin de este post no es enseñar a crear el menú y o utilizar Bootstrap, vamos a saltarnos algunos pasos.

Ya con nuestro componente menú funcionando tenemos que retocar nuestro app module para que Angular compile nuestra aplicación como webcomponent.

Agregando el siguiente código:

 constructor(

    private injector: Injector

  ) {

    const imagenEspacio = createCustomElement(PostMenuComponent, { injector });

    customElements.define(‘ng-post-menu-post-menu’, imagenEspacio);

  }

  ngDoBootstrap() {}

 

Ya solo nos queda compilar el proyecto:

ng build –prod

Esto genera la carpeta dist/post-menu. Dentro de ella aparecerán los siguientes ficheros .js

  • main

  • polyfills

  • runtime

  • scripts

Nuestro fin es en primer lugar juntar todos estos archivos js en uno solo que llamaremos por ejemplo post-menu.js.

Ya con esto tenemos casi todo lo que necesitamos. También puede que el proyecto necesite de estilos e imágenes que existirán en la carpeta dis/post-menu, esas también habría que importarlas al nuevo proyecto donde queremos insertar nuestro webcomponent.

Finalmente vamos a crear un HTML vacío y vamos a importar nuestro menú, quedando así finalmente:

 

Mostrando finalmente nuestro menú sobre un HTML en “blanco”

Hasta aquí nuestra pequeña introducción a los webcomponents, ¿será el futuro? ¿Se empezará a utilizar este tipo de tecnología y nos abstraeremos del framework?Es algo que todavía está por ver ya que aunque parezca sencillo y bonito, todavía está en una fase muy verde y tendrá que ir evolucionando, aunque ya se empiezan a utilizar y en tu mano queda el aprenderlo y seguir avanzando.

 

En SOLTEL tenemos una actitud innovadora hacia la tecnología porque nos apasiona. Nuestra trayectoria trabajando con distintas tecnologías a lo largo de tantos años, nos ayuda a afrontar los proyectos con muchísima perspectiva y a convertirnos en auténticos partners tecnológicos de nuestros clientes.

Referencias: