¡Compártelo!

Web Components: la revolución del desarrollo web

En los últimos tiempos, las arquitecturas para el desarrollo Frontend han entrado en una espiral de constante evolución.

Partiendo de desarrollos de aplicaciones web, donde el uso de javascript se hacía con pequeñas pinceladas para añadir dinamismo, pasamos a auténticos despropósitos, donde las líneas de código en javascript/jquery podían suponer un reto para el desarrollador encargado del mantenimiento. Más tarde llegó la aplicación de patrones MVC con frameworks como Angular, Ember, JavascriptMVC.

Gracias a estas nuevas tecnologías, el mundo para un desarrollador Frontend se vuelve de color de rosa, maravilloso y da la sensación de que podemos descansar tranquilos con lo que parece una solución “definitiva”. Pero nada más lejos de la realidad.

Abandonamos nuestra burbuja de confort y nos encontramos con un nuevo concepto que está poniendo patas arriba el desarrollo de aplicaciones web: los Web Components.

¿Qué son los Web Components?

Los Web Components son un estándar del W3C enfocado a la creación de todo tipo de elementos utilizables en una página web para realizar interfaces de usuario que nos permitan presentar la información según nuestros objetivos.

Se trata de 4 especificaciones que nos permiten extender el desarrollo web por medio de componentes: pequeños contenedores para encapsular marcado, código Javascript y estilos CSS, que cualquier desarrollador puede realizar para resolver cualquier necesidad.

Librerías como Polymer, que están dando que hablar últimamente, nos sirven para crear Web Components. Otras librerías como AngularJS con sus directivas también evocan de manera particular a los Web Components.

Las 4 especificaciones de los Web Components

Estos son los 4 elementos que necesitamos para crear un Web Component:

1. Custom Elements

Este estándar nos proporciona la capacidad de crear elementos o tags HTML, de forma personalizada.

2. HTML Templates

Además incorpora un sistema de plantillas HTML5 que podemos considerar como la estructura básica de nuestro componente. Pueden contener tanto HTML como CSS, que no será accesibles desde la aplicación Web. La finalidad de las “templates” es que desde javascript podamos acceder a la estructura básica, se manipule convenientemente y se incluya posteriormente e nuestra aplicación.

3. HTML Imports

Otra nueva capacidad es la posibilidad de importar en nuestro HTML un pedazo de código. Este fragmento, puede contener HTML, CSS y javascript

4. Shadow DOM

Es una técnica de encapsulación que, de una forma sencilla, nos permite “encapsular/aislar” un DOM dentro un DOM principal. Visto así, nos vienen a la cabeza los iframes. ¡Exacto, el concepto es el mismo! Pero la diferencia fundamental es que los iframes insertan un nuevo documento, mientras que el shadow dom es parte del documento principal.

Un ejemplo típico sobre un Web Component es el Map de Google o el Calendar:

 <google-map latitude="12.678" longitude="-67.211"></google-map> <google-calendar-busy-now calendarId="TU_ID_CAL" apiKey="TU_LLAVE_API" busyLabel="Ocupado" freeLabel="Estoy libre"> </google-calendar-busy-now>

Las ventajas de utilizar Web Components

La aceptación por parte de los desarrolladores FrontEnd y arquitectos web del estándar Web Components viene justificada por las múltiples ventajas que ofrece esta tecnología de desarrollo.

  • Flexibilidad: podemos emplear las especificaciones por separado y de manera independiente, según necesidad.
  • Personalización: como hemos visto, las etiquetas HTML son personalizables y tenemos la capacidad de crear todas aquellas que necesitemos para obtener una mejor semántica web.
  • Innovación: el estándar Web Components nos ofrece la posibildiad de generar nuevos elementos para crear desarrollos ‘ad hoc’.

Comenzando con Web Components

¡Manos a la obra! Vamos a crear un web component básico. Para nuestra prueba de concepto, creamos un index.html como el siguiente:

<!DOCTYPE html> <html> <head> <!--HTML imports nueva capacidad del estardard --> <link rel="import" href="product-detail.html"> </head> <body> <!-- Utilizamos nuestro componente --> <product-detail></product-detail> </body> </html>

A continuación creamos nuestro product-detail.html, donde estará la definición de nuestro web component.

<template id="productTemplate"> <style> .product { display : flex; flex-direction : row; } .product > .product_img { width: 50px; height: 50px; } .product > .product_name{ flex: 1; font-size: 2em; color: blue; font-weight: bolder; } </style> <div class="product"> <img src="" class="product_img"> <div class="product_name"></div> </div> </template> <script> //GUARDAMOS UNA REFERENCIA DE HTML EN EL QUE SE ENCUENTRA EL SCRIPT, PARA PODER ACCEDER AL TEMPLATE var thisDoc = document.currentScript.ownerDocument; //CREAMOS UN OBJETO QUE HEREDE DEL PROTOTIPO HTMLELEMENT, DEFINIDO POR EL ESTANDAR var productDetail = Object.create(HTMLElement.prototype); //LA CREACION DE UN WEB-COMPONENTE DEFINE UNA SERIE DE CICLOS DE VIDA //POR CADA FASE DEL CICLO DE VIDA HAY UN CALLBACK //EN createdCallback NOS CENTRAREMOS EN LA RENDERIZACION DE NUESTRO TEMPLATE productDetail.createdCallback = function() { var template = thisDoc.querySelector('#productTemplate'); //ACCEDEMOS AL CONTENIDO DEL TEMPLATE CON template.content //Y MANIPULAMOS EL CONTENIDO template.content.querySelector('.product_img').src = 'https://support.apple.com/content/dam/edam/applecare/images/en_US/ipad/featured-content-ipad-icon_2x.png'; template.content.querySelector('.product_name').textContent = 'Product Name'; //CREAMOS UNA COPIA DEL TEMPLATE //ver NOTAS https://developer.mozilla.org/es/docs/Web/API/Document/importNode var clone = document.importNode(template.content, true); //CREAMOS UN SHADOW-DOM PARA NUESTRO COMPONENTE Y LE INCLUIMOS UNA COPIA DE NUESTRA PLANTILLA MODIFICADA this.createShadowRoot().appendChild(clone); }; document.registerElement('product-detail', { prototype: productDetail }); </script>

Con esto tenemos una implementación de un componente web fácil y sencilla.

Conclusión

En este artículo hemos visto qué son los web components, sus especificaciones y un ejemplo de web component básico. Próximamente en el blog de Profile veremos alguna implementación más compleja de un componente web y nos adentraremos en la creación de un componente con el nuevo estándar Javascript. ¡Síguenos en redes y no te pierdas nada!

Artículos relacionados

jdk 21

Jdk 21: mejoras en la última versión LTS de Java

Cada 6 meses Java lanza una nueva versión de nuestro lenguaje favorito. Da igual si la estábamos esperando con ganas o si nos pilla por sorpresa, es algo que celebrar dentro de la comunidad. Esta vez la versión 21 incluye diferentes características estables, otras en

openAPI

Explorando OpenApi: estructura, rutas y seguridad

En este artículo, nos adentraremos en la utilización de OpenApi para crear los diferentes endpoints de nuestra aplicación, con sus diferentes objetos de request y response que necesitemos. ¡Vamos allá! ¿Qué es una API? Las API (Interfaz de Programación de Aplicaciones) son piezas de código

Cómo hacer una Regresión Lineal Simple en Machine Learning

Cómo hacer una Regresión Lineal Simple en Machine Learning

En la actualidad, el aprendizaje automático se ha convertido en una de las bases para resolver problemas y como ayuda a la toma de decisiones. En este artículo nos centraremos en el análisis y aplicación práctica de uno de los modelos predictivos más sencillos, el