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é vas as ver en esta entrada
¿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!