En los últimos años, las aplicaciones web fueron quitándoles lugar a los programas de escritorio. Herramientas con un alto nivel de complejidad, como procesadores de texto o editores de imagen, hoy pueden ejecutarse desde un browser común. Esto ocurre no solo gracias al incremento en las velocidades de conexión a Internet, sino también —y principalmente— al desarrollo de tecnologías para el procesamiento de información del lado cliente. Tradicionalmente, en las aplicaciones web, el front-end se limitaba a una simple interfaz visual, mientras que el back-end se encargaba de todas las funciones de procesamiento. Hoy, en cambio, muchas de esas funciones pueden implementarse en el front-end, sin tener que solicitarlas al servidor. Como parte de este proceso, HTML se complejizó, pasando de ser un simple lenguaje de marcas a poder interactuar con complejas API desarrolladas en JavaScript.

Otra novedad son los Web Components: widgets encapsulados, reutilizables y componibles para la plataforma web. Son elementos de interfaz de usuario que se crean a través de tecnologías web abiertas. Algunos vienen incorporados en el browser, por lo cual no tenemos que tomarnos el trabajo de codificarlos por nuestra cuenta, ni necesitamos de bibliotecas externas (como jQuery) para hacerlos funcionar. El concepto abarca cuatro tecnologías:

Custom Elements

Nos permite crear nuestros propios elementos y etiquetas HTML. Cada elemento puede tener su propia estructura interna, comportamiento y estilo visual predeterminados. Por ejemplo, si necesitamos un menú de navegación personalizado, podemos crear la etiqueta <mi-menu>, con las características que deseemos.

HTML Templates

Permite crear «plantillas» cuyo contenido será cargado de manera dinámica, y no en el momento en que se carga la página. Por ejemplo, podemos ofrecerle al usuario un botón para añadir o quitarle filas a una tabla. Normalmente, las opciones son dos:

1. Crear o eliminar el elemento fila en el momento en que se acciona el botón, modificando el código fuente mediante JavaScript.
2. Incluir de antemano una cantidad de filas en el markup, pero mostrarlas u ocultarlas a través de CSS.

La primera opción trae problemas de seguridad, mientras que la segunda nos obliga a incluir en nuestro código HTML elementos que quizás ni vayan a utilizarse, incrementando innecesariamente el peso de la página.

Con la etiqueta <template> podemos predefinir un fragmento de HTML que solo se incluirá cuando sea necesario, sin los problemas de la inyección de código por JavaScript ni tener que cargar elementos invisibles apenas se abre la página.

Shadow DOM

Permite insertar en nuestra página estructuras HTML que funcionarán de manera independiente con respecto al código que los contiene. Estos fragmentos no se verán afectados por el CSS y el JavaScript del resto de la página.

Por ejemplo, para incluir un video en nuestra página podemos usar el elemento video de HTML5, usando apenas una línea de código:

<video src="./foo.webm" controls></video>

Pero, al mostrarse en el browser, este elemento contendrá un botón de play, un controlador de volumen, un indicador de duración, etc. Estos componentes internos son «insertados» por el propio browser a través de un fragmento de código oculto: el Shadow DOM, que tendrá su propio JavaScript y CSS.

Un elemento <video> con su Shadow DOM insertado por Chrome. Fuente: CSS-Tricks

HTML Imports

Nos permite incluir en nuestra página documentos HTML externos, scripts de JavaScript y hojas de estilo.

Comentarios finales

Si revisamos la definición de Web Components que ofrecimos en el segundo párrafo, notaremos que HTML Templates aporta la característica de reusabilidad, mientras que Shadow DOM brinda encapsulamiento. Las cuatro tecnologías son componibles porque pueden utilizarse de forma combinada.

Actualmente, Web Components es un estándar del W3C que todavía se encuentra en desarrollo, impulsado por Google. Aún no es plenamente soportado por todos los browsers, pero existen polyfills para salvar esta falencia.