Artículo
El JavaScript ha muerto, ¡larga vida al HTML!
A pesar del espectacular boom en el que cientos de frameworks javascript están emergiendo últimamente, los web components son una reciente incorporación al HTML5 que, gracias a la flexibilidad, agilidad y facilidad de reutilización que ofrecen, pueden suponer el mayor cambio en el mundo web en años.
El estándar se compone de cuatro sub elementos complementarios pero independientes entre sí:
- Custom Elements
- Templates
- Shadow DOM
- HTML imports
Custom Elements: Etiquetas personalizadas
¿Cuántas veces en un proyecto nuevo creamos los mismos elementos HTML que hemos utilizado anteriormente? Empezando con un header, el menú desplegable y un diseño responsive, donde el logo se adapta al tamaño del dispositivo. Lo mismo con el footer, una columna lateral, el carrito de la compra…. Seguro que todo esto nos suena. Copiar, pegar y adaptar a la nueva web, encontrando una y otra vez los mismos problemas.
Imaginemos tener una etiqueta HTML nueva, <my-header>, que haga exactamente lo que una y otra vez repetimos en cada nuevo proyecto: diseño responsive, menú desplegable con todo lo necesario, etc.., pero que además cuenta con una lógica tan modularizada e independiente que puede ser usada en todos los proyectos sin apenas tocar una línea de código. Esto es lo que ofrecen los custom elements, poder crear tus propias etiquetas HTML y utilizarlas en los diferentes proyectos. Incluso podemos encontrar etiquetas desarrolladas por otros programadores e integrarlas directamente en nuestra propia web.
Template elements
Otro de los problemas que nos encontramos a la hora de realizar una aplicación web es crear una página HTML añadiendo recursos que no son necesarios o que no se van a mostrar hasta que no estén todos los datos. Esto puede suponer un desperdicio de recursos, rendimiento y la posibilidad de añadir vulnerabilidades de seguridad, por lo que para evitarlo utilizaremos este sub elemento que nos ofrecen los web components. El concepto de template elements seguramente os suene ya que en lenguajes como PHP, Phyton o Ruby se emplea para asignar variables.
Estas plantillas o templates permiten declarar elementos que se analizan como HTML pero no se ejecutan en tiempo de ejecución, aunque se pueden instanciar más adelante cuando sea necesario. Por ello, el navegador no cargará esos elementos hasta que se lo indique el código javascript. Además, estos templates facilitan la división del trabajo del equipo, permitiendo a las personas de diseño centrarse en las vistas HTML y CSS, mientras que la otra parte puede centrarse en la lógica y en la integración con el backend.
Shadow DOM
Shadow DOM es otro de los elementos que venimos escuchando en el mundo del desarrollo web, pero que no todos tenemos claro qué es y para qué sirve.
Este elemento proporciona al navegador la habilidad de incluir un subárbol de elementos en el documento, sin incluirlo en el árbol DOM principal. Es decir, se puede crear un elemento “div” con numerosos inputs, labels y spans y luego encapsularlo en el elemento div padre, de manera que en árbol del DOM principal no se vería todo lo que hay dentro de este div. De esta forma, podríamos decir que el Shadow DOM es un DOM encapsulado que está dentro del DOM principal. Gracias a esto podremos definir nuestros propios componentes complejos en el DOM. Además, crear los elementos con este tipo de componente nos permite organizar mejor los CSS para que no afecten a todas los elementos de la página web.
Un ejemplo de este elemento son los componentes que nos ofrece Google para añadir un video a nuestra página web, que a simple vista son un componente “<video></video>”, pero que realmente cuentan con más elementos internamente.
HTML imports
Hasta ahora hemos estado hablando de elementos HTML que permiten construir componentes de forma más sencilla que antes pero que, a la hora de importarlos a nuestra página web principal, van a consumir una gran cantidad de recursos. Es aquí donde entra el último elemento de los web components, HTML imports.
Actualmente se requiere un gran esfuerzo para cargar cualquier elemento en un simple HTML, además de importar varias librerías (por ejemplo cuando utilizamos librerías como Boostrap o jQuery, en donde tenemos que importar varios archivos). Esto sería más sencillo si importásemos un HTML con todos estos elementos, tal y como nos facilita HTML Imports, la posibilidad de importar dentro de un HTML otro archivo HTML con librerías y estilos para poder escoger si se cargan síncronamente o asíncronamente.
Conclusión
En resumen, como comentábamos al principio del blog, la llegada de los web components puede suponer un gran cambio en el desarrollo web, dejando en un segundo plano la parte javascript y poniendo el foco en el HTML, donde crearemos nuestros propios elementos, utilizaremos nuestras propias plantillas, comprimiremos elementos y los importaremos a otros archivos HTML.
Aún así, todavía quedan algunos aspectos que mejorar, ya que actualmente no todos los navegadores soportan estos elementos y nuestras aplicaciones web no serían 100% compatibles con ellos. No obstante, estos elementos avanzan muy rápidamente y es posible que en un corto período de tiempo ofrezcan mayores ventajas competitivas. Por ello, recomendamos revisar los elementos de la página de chromestatus que añadimos más adelante.
Enlaces de interés
En esta entrada del Blog solo queríamos dar una pequeña introducción a los Web components, pero si te has quedado con ganas de saber más o de ver el estado actual que tienen, te dejamos a continuación unos cuantos enlaces en donde podrás investigar más en detalle estos nuevos componentes.
Por Carlos Goicoechea Artero