Estamos revisando poco a poco los distintos elementos de los Web Components en Javascript, el estándar de la W3C para el desarrollo del lado del cliente. En pasados artículos ya presentamos los Web Components y además vimos cómo se desarrollan Custom Elements.

Ahora le toca el turno al estándar Template, que nos permite crear plantillas que podemos completar con datos y presentar luego en el contenido de la página mediante Javascript. Es una novedad muy importante, ya disponible en casi todos los navegadores, por lo que deberíamos tenerlo presente para desarrollar con Javascript. En este artículo explicaremos en qué consiste y veremos ejemplos para entender su funcionamiento, siempre con Vanilla JS (Javascript nativo).

Por qué un sistema de templates estándar

Los sistemas de templates son uno de los componentes de aplicaciones web que nos facilitan el mantenimiento del código. Es una herramienta general que encontramos en diferentes lenguajes y es básica para separar la capa de presentación de la programación de procesos o la obtención de datos.

En Javascript hasta el momento no contábamos con ningún sistema para hacer templating, por lo que teníamos que usar alguna librería de terceros, como podría ser Handlebars JS. Afortunadamente para los desarrolladores la W3C ha sido consciente de esta necesidad en los estándares abiertos y ha creado un sistema de templates que los navegadores son capaces de interpretar de manera nativa.

Obviamente, al tratarse de un estándar disponible en los navegadores, el sistema de templates nativo siempre será más rápido que cualquier librería que podamos encontrar, facilitando un desarrollo homogéneo en todos los proyectos y más optimizado.

Como veremos a continuación, para utilizar sistema de templates requerimos usar dos componentes principales. Por un lado tendremos un HTML con el conjunto de elementos que contiene nuestra plantilla y por otro lado necesitaremos de un poco de Javascript para volcar datos dentro y presentarlos junto con el contenido de la página.

Etiqueta template

La parte de HTML para implementar el sistema de plantillas de los Web Components se escribe mediante la etiqueta TEMPLATE.

La etiqueta TEMPLATE es bastante especial, puesto que es la única etiqueta de contenido que no tiene una representación directa en el renderizado de la página. Dicho de otra manera, el navegador al leer una etiqueta TEMPLATE no la inserta en el contenido visible de la página, sino que la interpreta y la deja simplemente en memoria para que luego mediante Javascript se pueda utilizar. Por tanto, cuando en navegador encuentra un template no hace nada con él, aparte de leerlo, esperando que se use más adelante de alguna manera.

La forma de un template en HTML es como cualquier otro código HTML, sin nada en particular, aparte de estar englobada entre las etiquetas de apertura y cierre de la plantilla.

<template>
	<p>Esto es un template!!</p>
</template>

Javascript para usar un template

Como hemos mencionado, para usar un template aparecido entre el HTML de la página, necesitamos un poco de Javascript.

Básicamente tendremos que hacer tres pasos:

1. Acceder al template a partir de algún selector o mediante su id
2. Clonar el template en la memoria de Javascript
3. Inyectar el clon del template en el lugar donde se desee de la página

Esos tres pasos los vamos a ver representados a continuación en el siguiente código.

var template = document.querySelector('template').content;
var clone = template.cloneNode(true);
document.body.appendChild(clone);

Como ves, un template lo podemos acceder a través de un selector. Puedes usar document.querySelector() o incluso algo como document.getElementById(), si es que le pusiste un identificador al template.

var template = document.getElementById('id_template').content;

Como verás también, los templates tienen un atributo "content" que contiene el HTML de dentro de la etiqueta TEMPLATE.

El paso de realizar un clon es básicamente porque la idea de un template es que lo puedas insertar repetidas veces. Por ejemplo, podrías tener una lista de contactos y cada uno de esos contactos podría tener un template para representarse (con el mismo template puedes representar todos los contactos, simplemente cargando en la plantilla datos distintos). Si tu lista tiene 20 contactos, ese template de un contacto lo repetirás 20 veces, cargando datos diferentes dentro de él, o sea, se realizarán 20 clones del template que se inyectarán en la página posteriormente. Luego veremos un ejemplo de template que contiene una repetición para mostrar diferentes elementos en una lista.

Código de una página que usa un template básico

Ahora podemos ver cómo sería una página elemental que está usando el template system nativo de Javascript.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Template simple</title>
</head>
<body>
	<h1>Template simple</h1>

	<template id="mitemplate">
		<p>Esto es un template!!</p>
	</template>
	<script>
		var template = document.getElementById('template').content;
		var clone = template.cloneNode(true);
		document.body.appendChild(clone);
	</script>
</body>
</html>

Este código es realmente poco útil por dos motivos. Primero porque generalmente vas a usar el sistema de templating junto con otros estándares de los Web Components. Pero segundo porque si querías presentar un texto directamente en la página podrías haberlo colocado tal cual en el cuerpo, en vez de accionar el sistema de plantillas y volcar ese contenido con Javascript. Paralelamente, como hemos dicho, es muy habitual contar con algún tipo de repetición que nos permita iterar y repetir varias veces el template en el cuerpo de la página.

Otra cosa que veremos en el ejemplo a continuación es que habitualmente dentro de un template podrás encontrar no solo código HTML, sino también código CSS que afectará a los elementos de este template.

Realizar una iteración para repetir el contenido de un template con un bucle

Ahora veremos un ejemplo más completo de uso de templates, en el que ya tenemos un bucle que recorre un array para repetir un template determinadas veces

En nuestro ejemplo vamos a hacer un listado de ciudades del mundo, con un encabezamiento que rotule el título de este template. Antes de comenzar este código vamos a aclarar dos puntos.

Estilos CSS son válidos en un template: Aparte de código HTML podrás incluir también código CSS en un template. Este código lo colocas como siempre, con la etiqueta STYLE. La novedad es que estos estilos solo afectan al HTML del template, es decir, no salen para afuera y por tanto no afectan a otros elementos del cuerpo de la página. Este punto es muy interesante y a la vez muy útil porque permite que coloquemos estilos a etiquetas sin preocuparnos que éstos puedan trastocar el aspecto del resto de la página.

Unos templates contienen a otros: Cuando tienes un template más elaborado, puede que te encuentres en la necesidad de anidar templates. Por ejemplo en nuestro caso, identificamos dos bloques fundamentales:

1. Titular del template, el encabezado, que aparece una única vez
2. Cada una de las ciudades, que estará en un template que se repetirá una serie de veces, una vez por cada ciudad

Entendidos los puntos anteriores, serás capaz de interpretar bien este código.

<template id="templatesimple">
		<style>
		h1{
			color: red;
		}
		p{
			background-color: #ddd;
		}
		</style>
		<h1>Ciudades del mundo</h1>
		<template id="templateciudades">
			<p></p>
		</template>
	</template>

Ahora veamos el código de Javascript para usar ese template.

var ciudades = ["Madrid", "Barcelona", "Valencia"];

var template = document.querySelector('#templatesimple').content;
var p = template.querySelector("#templateciudades").content.querySelector("p");
ciudades.forEach(function(ciudad){
	var newP = p.cloneNode(true);
	newP.textContent = ciudad;
	template.appendChild(newP);
});
var clone = document.importNode(template, true);
document.body.appendChild(clone);

Como estás observando, en el código se accede a ambos templates de manera independiente. Además estamos recorriendo el array y realizando diferentes clones para cada ciudad. Tendremos un clon para todo el template general y otro clon para cada párrafo donde se va a representar cada ciudad.

Conclusión

Hemos conocido el sistema de templates nativo de Javascript y hemos hecho un par de ejemplos para aclarar cómo se usa, en un template básico y en otro que incluye una repetición.

Ya hemos advertido que el verdadero uso de los templates se da cuando los usas en conjunto con otras herramientas del estándar de los web components, por ejemplo cuando el template forma parte de un Custom Element.

Aunque te pueda haber parecido complejo el código Javascript para usar un template tenemos que insistir en dos puntos:

1. El template que usas dentro de un Custom Element queda encapsulado en el custom element, por lo que lo puedes programar una vez y usar infinitas veces en uno o varios proyectos. O sea, al final toda la complejidad se queda en el código que vas a reutilizar sin preocuparte de nada
2. Existen librerías que nos permiten volcar de una manera más sencilla datos en los templates, que facilitarán crear templates con variables que se rellenan con propiedades de un objeto. Esa parte no la incluye el estándar de Javascript así que para hacer un código verdaderamente fácil de mantener se recomendaría usar alguna librería adicional como LitElement. LitElement es la evolución de la librería Polymer, creada por el mismo equipo pero mucho más ligera y rápida. LitElement permite sacarle partido a los template string literals de Javascript, creando un sistema de templating de mucho más alto nivel, que mejorará mucho la experiencia de desarrollo y la mantenibilidad de los proyectos.

En futuros artículos seguiremos usando el sistema de template de Web Components, por lo que podrás ver nuevos ejemplos en breve.