Web components

Web Components

En la creación de páginas web muchos sitios usan ya partes de las especificaciones de Web Components (o componentes web) para producir sus interfaces e implementar funcionalidad del lado del clienteEn este artículo, explicamos qué son exactamente los Web Components y qué objetivos o necesidades cubren, así como algunas de sus especificaciones, ya que suponen  una auténtica revolución en el mundo del desarrollo web y, poco a poco, han adquirido un mayor soporte por parte de los principales navegadores.

Los Web Components nos permiten extender el desarrollo para la web por medio de componentes web que cualquier desarrollador podría realizar. Bajándolo más a tierra, los Web Components permiten a los desarrolladores crear sus propias etiquetas HTML con sus propias funcionalidades y  encapsular el código cliente.

¿Por qué nacen los web components?

El estándar de los Web Components está 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 (tecnologías que se desarrollan en el lado del cliente). Usando las herramientas que incluyen los Web Components, los desarrolladores pueden crear esos nuevos elementos y publicarlos para que otras personas también los puedan usar.

Este nuevo estándar enriquece la web, y permite reutilizar, extender y crear unos componentes en base a otros.

Además, los Web Components pueden trabajar de manera aislada, permitiendo que las nuevas piezas puedan usarse en el contexto de una web sin que afecten a las otras existentes. Paralelamente, podemos cargar un nuevo componente en una página de manera atómica (es decir, en un solo bloque) en lugar de como se suele hacer con muchas librerías y plugins actuales que obligan al desarrollador a escribir los estilos por una parte y el javascript por otra.

Compatibilidad con navegadores

Actualmente, el navegador que más soporte da es Chrome. Para otros navegadores, como Firefox o Edge, es recomendable usar algún tipo de Polyfill.

Librerías

Los Web Components forman parte de un estándar. Esto quiere decir que, tarde o temprano, todos los navegadores lo incorporarán y podrás usarlo con tan solo usar Javascript estándar, sin necesidad de ninguna librería adicional. Aún así, algunas librerías como Polymer, X-Tag o Bosonic nos permiten desarrollar hoy mismo con la tecnología de los Web Components. 

Web Components Ejemplos

El ejemplo más típico de Web Components lo podemos encontrar en un mapa de Google. Si no usamos Web Components, cuando queremos mostrar un mapa en una página web, tenemos que crear código en tres bloques:

  1. HTML con el elemento donde se va a renderizar el mapa
  2. CSS para definir estilos, por ejemplo dimensiones
  3. JavasScript para generar el mapa, indicando las coordenadas que deseas visualizar asi como otros detalles de configuración.

Otro ejemplo sería un calendario:

  1. HTML para crear el elemento donde se mostrará el calendario
  2. CSS para indicar las dimensiones de ese calendario, colores, y otros estilos
  3. JavaScript para especificar día, mes, año…

Sin Web Components, para agrupar estos bloques se usaba generalmente la etiqueta IFRAME.

A partir de ahora, gracias a los Web Components podemos expresar un mapa de Google con una etiqueta que simplifica la tarea y la acota a un pequeño bloque independiente:

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

Para indicar los días libres u ocupados usaremos una etiqueta propietaria en la que indicamos las características del calendario:

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

Es como si estuviéramos inventando etiquetas nuevas capaces de lanzar el comportamiento que nos permiten no tener el HTML por un lado, el CSS y el Javascript por otro. Obviamente, en algún lugar habrá un Javascript genérico que se encargará de procesar esa etiqueta. Además, veremos que en el HTML se coloca información que antes estaría en el código 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, sin embargo,  se declaran en el HTML. El JavaScript, por tanto, nos vendrá dado por Google o por el creador del Web Component de turno.

Ahora que ya sabemos lo que son los componentes web, vamos describir las distintas especificaciones que podemos encontrar:

  1. Custom Elements. Describe el método que nos permitirá crear nuevas etiquetas personalizadas para dar respuesta a cualquier necesidad que podamos tener.
  2. HTML Templates. Incorpora un sistema de templating en el navegador. Los templates pueden contener HTML o CSS e inicialmente no se mostrarán en la página. El objetivo es acceder al código que hay dentro del template con Javascript y manipularlo y incluirlo, las veces que haga falta, en otro lugar de la página.
  3. HTML Imports. Importa un pedazo de código que podrás usar en un lugar de tu página. Aunque se llame HTML Import», realmente sirve para cargar tanto HTML como CSS como Javascript. Además, podrás tener dentro un «HTML Template». Mediante código Javascript podremos registrar componentes personalizados o realizar otro tipo de acciones sobre el contenido de la página.
  4. Shadow DOM. Permite tener una parte del DOM oculta a otros bloques de la página para que no interfiera con otros elementos de la página.

Si te interesa el tema de los Web Components, te recomendamos echar un vistazo a webcomponents.org.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
Gratis
Consigue tu backup ahora