Introducción

Es cada vez más frecuente recurrir al formato JSON para el intercambio de datos a través de Internet. Con el tiempo, las estructuras XML han quedado casi obsoletas por su complejidad y las APIs de los servicios web más punteros han apostado por servir datos únicamente en el más amigable formato JSON. Sin embargo, no siempre resulta sencillo manejar la respuesta del servidor, sobre todo, cuando hablamos de objetos muy grandes. Y es ahí donde Tempo puede resultar una herramienta muy interesante.

¿Qué es Tempo?

Tempo es un nuevo motor de plantillas JSON que permite insertar contenido dinámico directamente en estructuras HTML de una forma sencilla y transparente. No requiere de ninguna dependencia para su funcionamiento y soporta los navegadores más frecuentes incluido Internet Explorer 6.

Utilizando Tempo

Para utilizar esta librería, basta con incluir su correspondiente archivo (disponible desde Github) e iniciarlo:

<script src="js/tempo.js" type="text/javascript"></script>
<script>Tempo.prepare("myID").render(data);</script>

Luego, sólo necesitamos una estructura HTML que recoja los datos del objeto JSON:

<div id="myID">{{content}}</div>

Eso es todo; la librería se encargará de sustituir los nombres de las propiedades entre llaves dobles por su valor correspondiente.

API

Veamos un poco más en detalle las funciones que hemos utlizado en el ejemplo anterior:

La función prepare() escanea el contenedor HTML que hará de plantilla cacheándolo en memoria y preparándolo para manejar los datos.

La función render() asocia el objeto JSON a la plantilla en cuanto esté disponible.

La sintaxis de ambas funciones sería la siguiente:

Tempo.prepare( element )

Donde element es el ID del contenedor HTML al que asociermos los datos.

renderer.render( data )

Donde data es el objeto JSON que vamos a renderizar.

Finalmente, solo queda preparar la plantilla para que recoja y muestre los datos. Utilizamos para ello una estructura HTML básica con las micro tags correspondientes:

<div id="myID">{{content}}</div>

Donde el ID del contenedor se corresponde con el que indicamos anteriormente y el contenido entre llaves dobles ( {{}} ) con el nombre de la propiedad del objeto que queremos pintar.

Ejemplo completo

Visto lo anterior, podemos crear fácilmente un ejemplo completo utilizando una petición JSONP contra el servicio de Twitter para obtener todos aquellos tweets que se corresponden con un determinado tema. Por ejemplo, recojamos todos aquellos en los que figure el término «javascript«.

Para la petición, utilizaremos jQuery para simplificar. Puede verse un ejemplo para MooTools y Dojo en el artículo «JSONP with jQuery, MooTools and Dojo» de David Walsh:

El HTML que vamos a utilizar de plantilla:

<ol id="tweets">
  <li data-template>
    <img src="{{profile_image_url}}" />
    <h3>{{from_user}}  {{created_at}} </h3>
    <p>{{text}}</p>
  </li>
</ol>

Entre llaves colocamos el nombre de la propiedad en el objeto JSON que queremos renderizar.

Ahora escribimos el script con el que inciamos nuestro motor de plantillas Tempo:

$( document ).ready( function(){
  var twitter = Tempo.prepare( 'tweets' );
  jQuery.getJSON( "http://search.twitter.com/search.json?callback=?" , {
    q: "Javascript"
  } , function( data ) {
    // Handle response here
    twitter.render( data.results );
  });
});

Y eso es todo! El motor Tempo hará la magia por nosotros rellenando las llaves del HTML con su correspondiente valor proveniente del objeto JSON. Para mostrar otros valores, solo tendríamos que leer el objeto JSON para escoger el que más nos interese utilizando por ejemplo un console.dir( data ) en el callback del jQuery.getJSON.

Características avanzadas

Tempo también incluye la posibilidad de utilizar condicionales para aquellos casos en los que no podamos garantizar que existe una determinada propiedad. Cuando utilizamos estas estructuras, se renderiza la primera que cumpla el criterio:

<li data-template data-if-nickname>The nickname is: {{nickname}}</li>
<li data-template data-if-name>The user have no nickname. His real name is {{name}}</li>

En el ejemplo anterior, si el objeto devuelto no posee la propiedad ‘nickname‘, se omite la sentencia completa y se continúa evaluando la siguiente. Pueden utilizarse tantos condicionales como sean necesarios ya que el sistema irá evaluándolos consecutivamente hasta encontrar uno que resuelva correctamente.

Otra característica interesate es que Tempo permite ocultar la estructura HTML mientras recibe y organiza los datos. Esta funcionalidad es especialmente útil cuando no queremos comprometer el diseño de la aplicación mientras esperamos la respuesta de un servidor. Para ello, solo tenemos que añadir una regla de estilo ‘en línea’ que la librería se encargará de eliminar cuando el dato haya sido renderizado:

<li style="display: none;">{{ data }}</li>

Conclusión

Hoy por hoy, cuando se trata de intercambio de datos en Intenet, JSON es el estándar más adoptado. Aplicaciones de moda como Twitter o Foursquare, utilizan este formato para enviar datos a través de las peticiones AJAX.

En este escenario, es interesante contar con un motor de plantillas que sea capaz de manejar esos datos de una forma sencilla y amigable como Tempo: una librería ligera de muy fácil integración con la que podemos presentar estructuras HTML de una forma elegante utilizando muy poco código.

Algunas opciones adicionales como son el uso de condicionales, plantillas anidadas o la posibilidad de ocultar estructuras mientras se reciben los datos, hacen de Tempo una herramienta muy a tener en cuenta para aquellos desarrolladores que dependen de las redes sociales para sus proyectos.

Sitios de Interés

Página oficial del proyecto: http://twigkit.github.com/tempo/
Descarga desde Github: https://github.com/twigkit/tempo/zipball/master
Demo de plantilla Twitter: http://twigkit.github.com/tempo/examples/twitter.html