Con el incremento del trabajo que se realiza en el lado del cliente (navegador), también han empezado a aparecer patrones de programación que, hasta el momento, eran exclusivos del servidor de aplicaciones. Así, por ejemplo, la estructuración de código con MVC (Modelo-Vista-Controlador) ha sido ya implementada con Javascript (ver Javascript MVC o TrimPath [introducido aquí] ). Estos proyectos posibilitan crear complejos proyectos ejecutados y gestionados en el lado del cliente dejando únicamente al servidor el almacenamiento de la información.

Otro terreno que también ha sido portado en varias ocasiones es el de los patrones o templates, muy relacionado con las vistas en la distribución MVC. Contando con un sistema de este tipo podemos guardar segmentos de código HTML que, procesados desde Javascript y combinándolos con variables, permiten personalizar las vistas y reaccionar a las entrada del usuario directamente desde el cliente, eliminando el tiempo necesario para conectar con el servidor y que éste procese la información antes de enviarla de vuelta.

Se podría decir que esta es una pieza conveniente para llegar más allá de lo que supone Ajax. Si con Ajax es posible alcanzar el servidor sin perder el tiempo en tener que recargar la página, con esta técnica evitamos el tener que acudir al servidor (siempre que esto sea posible) ya sea cacheando la información en local (Google Gears o Yahoo! BrowserPlus) o manteniendo ya una conexión abierta con el servidor mediante Comet para reducir el tiempo de respuesta.

A continuación pueden verse unas cuantas de estas librerías:

• Javascript Micro-Templating de John Resig.

  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>

var results = document.getElementById("results").innerHTML = tmpl("item_tmpl", dataObject);

• JavascriptTemplates forma parte del proyecto TrimPath Junction (MVC).

    <textarea id="cart_jst" style="display:none;">
      Hello ${customer.first} ${customer.last}.
    </textarea>
  

  var data = { customer : { first: "John", last: "Public", level: "gold" } }
  var result = TrimPath.processDOMTemplate("cart_jst", data);
  

• EcmaScriptTemplates (ESTE) es un sistema de templates alternativos también soportados por TrimPath Junction (MVC).

  BlogController = function() {}
  BlogController.prototype.show = function(req, res) {
    res.blog = Blog.find('first', req['objId']);
    res.render('blog/show'); 
  }
  

• Unobstrusive JavaScript Template Engine basado en jQuery confía en no usar una sintaxis especial para indicar los lugares de reemplazo. En su lugar utiliza el atributo classes del CSS y utiliza JSON para indicar los datos a reemplazar:

  <div id="hello">
    Hello <span class="who">World</span>
  </div>
  

  $('#hello').autoRender({ "who": "Mary" });
  

• EJS (Embedded JavaScript)

  var data={   title:   'Cleaning Supplies'
   supplies:  ['mop', 'broom', 'duster']  }
  html = new EJS({url: '/template.ejs'}).render(data)
  new EJS({url:'/todo.ejs'}).update('todo','/todo.json')
  

  <ul>
  <% for(var i=0; i
     <li><%= supplies[i] %></li>
  <% } %>
  </ul>
  

• Client-Side JavaScript Templates explica paso a paso como utilizar la técnica en el cliente con la ayuda de un archivo templates.js
• Este artículo de ParticleTree habla de varios sistemas como JST de TrimPath, AjaxPages, el sistema de templates de la librería Prototype, ESTE o SXOOP.
• Sxoop.template es otro sistema ligero. Aunque su código parece no estar disponible en la URL indicada, lo he encontrado aquí, junto con un ejemplo.
• JSLT es una librería que propone un estilo similar al del lenguaje XSLT. Ver ejemplo.

  [foreach('folder'){]
     [var c = count('file')]
     Folder {@name} has [%c] file[if(c>1)%'s']\n
     [sort('file','text()',sort_alpha){]\s
        File: [%$'text()'.toLowerCase();]
        [if(!last)%',']
     [}]\n
  [}]
  

• Chain.js es un sencillo plugin de jQuery que facilita la capacidad de asociar datos en formato JSON a los elementos del DOM (XHTML).
• Patroon utiliza el mismo sistema que Unobstrusive JavaScript Template Engine: utilizar clases CSS e identificadores para indicar dónde deben introducirse los datos.

  <div class="comments">  
    <div id="comments-template">
      <div class="comment">
        <div class="_ top">
          <a class="_" href="{website}">{name}</a> said
          <a class="_" title="{time}"></a>:
        </div>
        <div class="text"></div>
      </div>   
    </div>
  </div>
  

  var data = { 
    comment: [{
      date: "2008-09-07 12:28:33", 
      name: "David Beckham",
      website: "beckham.com",
      text: "I watched the euro finals on tv..." 
    }]
  };
  var template = new Template('comments-template');
  $('.comments').expand(template, data); // con jQuery
  

• Aunque jsAwesome no es exactamente un sistema de templates, aporta una herramienta similar ya que permite especificar mediante Json un formulario completo con distintos tipos de validaciones.

Por cierto, interesante el método que propuso en su día John Resig para incluir segmentos de código XHTML en la página sin que sea interpretado por el navegador, algo ideal para guardar los templates:

<script type="text/html" id="item_tmpl">
Este texto <strong>NO</strong> aparecería en la página
</script>