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.

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!

¿Te pareció interesante? Compártelo:
Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Print this page
Print
Email this to someone
email

Antonio Manuel Criado Reyes

Apasionado del desarrollo de aplicaciones web con javascript. Desarrollo mi actividad en Profile Software como Team Leader del desarrollo Frontend.