{"id":9090,"date":"2021-06-02T11:09:45","date_gmt":"2021-06-02T11:09:45","guid":{"rendered":"https:\/\/www.soltel.es\/?p=4270"},"modified":"2021-06-02T11:09:45","modified_gmt":"2021-06-02T11:09:45","slug":"webcomponents-para-dummies-3","status":"publish","type":"post","link":"https:\/\/www.soltel.es\/en\/webcomponents-para-dummies-3\/","title":{"rendered":"Web components for dummies"},"content":{"rendered":"

Desde el inicio de la programaci\u00f3n los programadores hemos intentado reutilizar la mayor cantidad de c\u00f3digo posible, no por ser flojos, claro est\u00e1, sino por eficiencia pura y dura. Ganar tiempo es ganar eficiencia y dinero y eso lo sabemos todos\u2026 pero, \u00bfqu\u00e9 tiene que ver todo esto con los webcomponents?<\/p>\n

Pues muy f\u00e1cil, te lo resumo con un claro ejemplo. Si eres programador de front o est\u00e1s un poco enterado de las nuevas tecnolog\u00edas que se usan para desarrollar la parte visual de la aplicaci\u00f3n, sabr\u00e1s que existen varias formas de realizar tal desempe\u00f1o. Desde usar simplemente HTML + CSS + JS para\u00a0 crear por ejemplo un men\u00fa a usar alg\u00fan framework como puede ser Angular, React o VueJs. Como ves existen diferentes maneras de solucionar el problema, aunque claro, si tienes una aplicaci\u00f3n en VueJs y otra en Angular, aunque el men\u00fa sea igual visual y funcionalmente tendr\u00edas que programar dos veces, \u00bfcierto? Pues con nuestros queridos Webcomponents, \u00a1solo tendr\u00e1s que hacerlo una vez! S\u00ed, parece incre\u00edble pero es as\u00ed, como hemos mencionado anteriormente, desde siempre hemos querido reutilizar el mismo c\u00f3digo lo m\u00e1ximo posible, por lo tanto ahora estamos evolucionando a una tendencia en la que si un programador desarrolla el componente men\u00fa en Angular con unas ciertas peculiaridades que veremos m\u00e1s adelante, puede importar ese men\u00fa tanto a VueJS, React o incluso un HTML en limpio.<\/p>\n

Si no me creeis acompa\u00f1adme en esta peque\u00f1a introducci\u00f3n en la que os mostrar\u00e9 c\u00f3mo un men\u00fa programado en angular, podemos usarlo luego en un HTML \u201climpio\u201d.<\/p>\n

Para empezar vamos a crear un proyecto Angular que se componga de un componente men\u00fa.<\/p>\n

Primero creamos el proyecto:<\/p>\n

<\/p>\n

ng new post-menu –prefix ng-post-menu<\/p>\n

Ahora con el proyecto creado agregamos la dependencia de Angular de elements la cual nos facilita la creaci\u00f3n de este webcomponent agregando el polyfill document-register-element.js<\/p>\n

<\/p>\n

ng add @angular\/elements<\/p>\n

 <\/p>\n

And we're going to create our menu component with some instructions:<\/p>\n

<\/p>\n

ng generate component post-menu<\/p>\n

<\/p>\n

We have added encapsulation to our component and we will tell it to be Emulated. Angular by default does not use Shadow DOM to encapsulate its components, in order to facilitate compatibility between multiple browsers that do not yet support this feature natively, but we can specify it.<\/p>\n

 <\/p>\n

We're going to create a simple menu in this component using Bootstrap. Since the purpose of this post isn't to teach you how to create the menu or use Bootstrap, we'll skip some steps.<\/p>\n

<\/p>\n

Now that our menu component is working, we need to tweak our app module so that Angular compiles our application as a web component.<\/p>\n

<\/p>\n

Adding the following code:<\/p>\n

\u00a0constructor(<\/p>\n

\u00a0\u00a0\u00a0\u00a0private injector: Injector<\/p>\n

\u00a0\u00a0) {<\/p>\n

\u00a0\u00a0\u00a0\u00a0const imagenEspacio = createCustomElement(PostMenuComponent, { injector });<\/p>\n

\u00a0\u00a0\u00a0\u00a0customElements.define(‘ng-post-menu-post-menu’, imagenEspacio);<\/p>\n

\u00a0\u00a0}<\/p>\n

\u00a0\u00a0ngDoBootstrap() {}<\/p>\n

 <\/p>\n

All that remains is to compile the project:<\/p>\n

<\/p>\n

ng build –prod<\/p>\n

This creates the dist\/post-menu folder. The following .js files will appear inside it.<\/p>\n