Librerías como Polymer están dando que hablar últimamente, que nos sirven para crear Web Components. Otras librerías como AngularJS con sus directivas también evocan de manera particular a los Web Components, aunque para ser exactos el estándar es bastante más abarcante de lo que muchas personas piensan cuando se nombra la tecnología.

Vamos a comenzar explicando el objetivo que vienen a cubrir los Web Components y luego trataremos acerca de las 4 especificaciones que podemos encontrar en esta tecnología.

Por qué de los Web Components

Los Web Components nos ofrecen un estándar que va enfocado a la creación de todo tipo de componentes utilizables en una página web, para realizar interfaces de usuario y elementos que nos permitan presentar información (o sea, son tecnologías que se desarrollan en el lado del cliente). Los propios desarrolladores serán los que puedan, en base a las herramientas que incluye Web Components crear esos nuevos elementos y publicarlos para que otras personas también los puedan usar.

En resumen, este nuevo estándar viene a facilitar la creación de nuevos elementos que enriquezcan la web. Pero además, está pensado para que se puedan reutilizar de una manera sencilla y también extender, de modo que seamos capaces de crear unos componentes en base a otros.

Como veremos, al diseñarse los estándares para los Web Components también se ha procurado que se pueda trabajar con los componentes de manera aislada, permitiendo que las nuevas piezas puedan usarse en el contexto de una web sin que afecten a otras ya existentes. Paralelamente se ha tratado de que el proceso de cargar un nuevo componente en una página se pueda realizar de manera atómica (un solo bloque) en lugar de como se suele hacer con muchas librerías y plugins actuales que requieren de escribir los estilos por una parte y el javascript por otra.

Ejemplos clásicos de Web Components

El ejemplo más típico que veremos por ahí es un mapa de Google. Hoy, si no usamos web components, cuando queremos mostrar un mapa en una página web, tenemos que crear código en tres bloques.

1. Un HTML con el elemento donde se va a renderizar el mapa
2. Un CSS para definir algún estilo sobre el mapa, por ejemplo sus dimensiones
3. Lo más importante, un Javascript para que puedas generar el mapa, indicando las coordenadas que deseas visualizar (para centrar la vista inicial) y muchos otros detalles de configuración que tu mapa necesite.

Otro ejemplo sería un calendario, que necesitas de nuevo básicamente tres partes:

1. HTML para crear el elemento donde se mostrará el calendario
2. CSS para indicar las dimensiones de ese calendario, colores, etc.
3. Javascript para decir qué mes, día o año debe mostrar.

Son tres lenguajes diferentes, que se especifican en bloques de código separados y usualmente en archivos separados. Sin Web Components, para tener todos los bloques agrupados y tener un código único para embeber un elemento se usaba generalmente la etiqueta IFRAME, que permite cargar un HTML, CSS y Javascript y reducir su ámbito a un pequeño espacio de la página. Esta técnica se sigue utilizando, pero en el futuro se va a sustituir gracias a las bondades de los Web Components.

A partir de ahora podremos expresar un mapa de Google con una etiqueta propietaria, que no pertenece al estándar del HTML, que simplifica la tarea y la acota a un pequeño bloque independiente.

<google-map latitude="12.678" longitude="-67.211">google-map>

Para incluir un calendario que indique los días que estamos libres u ocupados podremos usar una etiqueta propietaria en la que indicamos las características de ese calendario.

<google-calendar-busy-now
    calendarId="TU_ID_CAL"
    apiKey="TU_LLAVE_API"
    busyLabel="Ocupado"
    freeLabel="Estoy libre">
google-calendar-busy-now>

Son dos ejemplos tomados directamente de Web Components reales, creados por el equipo de Google. Tienen como intención reflejar:

1. Es como si estuviéramos inventando etiquetas nuevas. Esa es una de las capacidades de los Web Components, pero no la única.
2. Las etiquetas propietarias que nos estamos inventando son "google-map" y "google-calendar-busy-now"
3. No tenemos el HTML por un lado, el CSS y el Javascript por otro. Es simplemente la etiqueta nueva y ésta ya es capaz de lanzar el comportamiento.
4. Obviamente, en algún lugar habrá un Javascript que se encargará de procesar esa etiqueta, pero será genérico para cualquier tipo de mapa y reutilizable. Lo que además debe verse es que en el HTML estás colocando información que antes estaría en el Javascript. Por ejemplo en el caso del mapa de google los atributos latitude="12.678" longitude="-67.211" antes eran datos que se escribían en el Javascript. Ahora se declaran en el HTML. El Javascript por tanto es genérico y no tendremos que programarlo nosotros, sino que nos vendrá dado por Google o por el creador del web component de turno.

Especificaciones en Web Components

Ahora que ya hemos entendido alguna cosa de lo que son los componentes web, el concepto en sí, vamos a ser un poco más formales y describir las distintas especificaciones que podemos encontrar en los Web Components.

Custom Elements:
Esta especificación describe el método que nos permitirá crear nuevas etiquetas personalizadas, propietarias. Estas etiquetas las podremos ingeniar para dar respuesta a cualquier necesidad que podamos tener. Son los casos básicos que hemos visto en los puntos anteriores de este artículo.

HTML Templates:
Incorpora un sistema de templating en el navegador. Los templates pueden contener tanto HTML como CSS que inicialmente no se mostrará en la página. El objetivo es que con Javascript se acceda al código que hay dentro del template, se manipule si es necesario y posteriormente se incluya, las veces que haga falta, en otro lugar de la página.

HTML Imports:
Permite importar un pedazo de código que podrás usar en un lugar de tu página. Ese código podrá tener HTML, CSS y Javascript. El HTML no se visualizará directamente en la página, pero lo podrías acceder con Javascript e inyectar en algún lugar. Pero aunque se llame específicamente "HTML Imports", realmente sirve para cargar de una manera única tanto HTML como CSS como Javascript. Además podrás tener dentro un "HTML Template", con las ventajas que ellos aportan. Mendiante código Javascript seremos capaces también de registrar componentes personalizados "Custom Elements" o realizar otro tipo de acciones sobre el contenido de la página que sean necesarias.

Shadow DOM:
Este sistema permite tener una parte del DOM oculta a otros bloques de la página. Se dice comúnmente que estamos encapsulando parte del DOM para que no interfiera con otros elementos de la página.
Básicamente te sirve para solucionar un caso común que ocurre al incluir un plugin de terceros. A veces usan clases o identificadores para aplicar estilos que afectan a otros elementos de la página, descolocando cosas que no debería o alterando su aspecto. Pues con el Shadow DOM podemos hacer que los componentes tengan partes que no estarían visibles desde fuera, pudiendo colocar estilos que solo afectan al Shadow DOM de un web component y evitando que estilos de la página sean capaces de afectar al Shadow DOM.

Compatibilidad con navegadores

No tiene mucha importancia hablar de compatibilidad con navegadores porque cuando leas el artículo probablemente haya cambiado el panorama. Es una tecnología que está comenzando y que no está totalmente implementada en los navegadores, pero lo estará en breve. No obstante, como mencionaremos después, hay soluciones. A fecha de publicación del artículo, noviembre de 2015, podemos resumir la compatibilidad así:

Custom Elements:
Estado de la especificación: Working Draft W3C
Soporte total en Chrome, Opera y Android Browser > 4.4.4 y Chrome para Android 46

HTML Templates:
Estado de la especificación: LS (Living Standard, por la Whatwg)
Soporte total para todos los navegadores menos IE y Opera mini (Edge lo aplicará de manera inminente)

HTML Imports:
Estado de la especificación: Working Draft W3C
Soporte total en Chrome, Opera y Android Browser > 44 y Chrome para Android 46

Shadow DOM:
Estado de la especificación: Working Draft W3C
Soporte total en Chrome, Opera y Android Browser > 4.4 y Chrome para Android 46

Como has podido ver, el que más soporte le da es Chrome. Otros navegadores como Firefox o Edge apenas están empezando, por lo que tendríamos que usar algún tipo de Polyfill. De todos modos, para saber el soporte en el momento actual una rápida consulta a Caniuse.com te ofrecerá la información actualizada.

Librerías para Web Components

En cuanto a librerías Javascript para producir Web Components hay que aclarar primero que realmente no hacen falta. Como has visto, los Web Components forman parte de un estándar, que está siendo discutido todavía en mayor media, pero es un estándar. Eso quiere decir que, más tarde o temprano, todos los navegadores lo tendrán en su "core" y podrás usarlo con tan solo usar Javascript estándar, sin necesidad de ninguna librería adicional.

No obstante, lo cierto es que diversos actores se han apresurado a presentar algunas librerías que nos permiten desarrollar hoy mismo con la tecnología de los Web Components. Te las resumimos a continuación:

Polymer:
Es una librería impulsada por Google que actualmente es el mayor referente en cuanto a Web Components. Desarrollada para aprovechar la tecnología del estándar, facilitando la creación de interfaces de usuario reutilizables.

X-Tag:
Es la apuesta de Mozilla para la creación de Web Components, específicamente los custom elements, al alcance de todos los navegadores modernos.

Bosonic:
Herramientas y utilidades para crear web components incluso en navegadores no tan nuevos, como Internet Explorer 9.

Conclusión

Hemos conocido únicamente la punta del iceberg en lo que respecta a web components, pero en breve analizaremos cada una de las partes de este estándar que va a revolucionar el desarrollo front end.

Muchos sitios están ya usando partes de las especificaciones de Web Components para producir sus interfaces e implementar funcionalidad del lado del cliente, como por ejemplo Youtube o Github. No dejes de usarlo porque no estén totalmente disponibles en los navegadores, puesto que puedes usar los mencionados polyfills para obtener esa compatibilidad. Te estarás preparando para el futuro.

En los próximos artículos vamos a recorrer cada una de las partes de Web Components para ver ejemplos sobre cómo se implementan, ya en la práctica. Comenzaremos viendo cómo se hace un Custom Element con Javascript nativo.

Por: http://www.desarrolloweb.com/