Cuando hacemos una aplicación web, normalmente usamos javascript para modificar elementos html en la parte cliente, con librerías como jquery se pueden hacer muchas cosas. Pero cada vez las aplicaciones web son más complejas, sobre todo en la parte del cliente y no sólo necesitamos mofificar un elemento, sino cargar datos con disposiciones complejas.
Para esto existen multitud de motores de plantillas javascript, como por ejemplo, EJS, trimPath, Hogan.js, ...
Estos motores de plantillas nos permiten separar la lógica de la aplicación de la vista, pero en el lado del cliente, del mismo modo que nos lo permiten otros lenguajes del lado del servidor como PHP, ASP, Java (JSP).
Quizás el escenario ideal para utilizar estas tecnologías es cuando utilizamos el lado del servidor para obtener los datos en formato XML o JSON por medio de WebServices o llamadas REST. Luego sólo tenemos que separar las presentaciones de estos datos en plantillas para pasarle los datos desde nuestra aplicación y mostrarlas dónde deseemos.
Imaginemos que tenemos en el servidor una plantilla en un archivo de texto plano (templates/users.ejs). En esta plantilla mostraremos un listado de usuarios. Para nuestro ejemplo utilizaremos la librería EJS que tiene una sintaxis muy similar a ASP.
Si nuestra aplicación llama a un servidor REST para obtener la lista de usuarios, por ejemplo a http://api.servidor.com/users.json y recibimos los datos en una variable llamada userData:
var tpl = new EJS("templates/users.ejs");
var html = tpl.render({users: userData});
Con este código tendríamos la variable html con el código html a insertar en nuestra aplicación.
La plantilla users.ejs podría ser de la siguiente forma:
<ul>
<% for (var i in users) { %>
<i><%= users[i].name %>></li>
<% } %>
</ul>
Con otros motores de plantillas como Hogan.js tendríamos una sintaxis más limpia, ejemplo:
<ul>
{{#users}}
<li> {{name}} </li>
{{/users}}
</ul>
Cada uno tendrá sus preferencias a la hora de seleccionar uno de estos motores, habrá que tener en cuenta la limpieza en el html, la velocidad de proceso, etc ...
Comentarios