Twig.js: Plantillas Twig en el lado del cliente

En este artículo voy a hablar de cómo utilizar plantillas Twig en el lado del cliente con twig.js.

En una aplicación web con cierto grado de interactividad, resulta necesario renderizar contenido desde el lado del cliente. Una mala práctica es definir código html en los propios ficheros javascript. Para evitarlo, existe un gran número de javascript template engines, como por ejemplo: mustacheunderscore.js o handlebars.js. Sin embargo, en proyectos que utilizan Twig  en el lado del servidor (proyectos Symfony2), resulta tedioso mantener plantillas de motores diferentes para el client-side y el server-side.

Existen diversas implementaciones de twig.js; en este post voy a realizar una introducción a la implementación de John Roepke.

Añadiendo twig.js a nuestro proyecto

En primer lugar, debemos descargarnos el fichero twig.js mediante alguna de las vías disponibles:

Clonando su repositorio de github:

O bien, mediante descarga directa ziptgz.

Una vez descargado, añadimos el fichero twig.js a nuestra aplicación web:

Templates

Una vez iniciada nuestra aplicación, tenemos que especificar las templates que van a ser utilizadas.

Desde el navegador, twig.js puede ser utilizado con inline templates o con Ajax templates (cargadas mediante peticiones GET) . Vemos un ejemplo de ambos casos:

Inline templates

En esta opción inyectamos, desde el javascript, la plantilla como un string. 

En el ejemplo, definimos la plantilla en el atributo data y el su id. El valor devuelto por función twig es un objeto de tipo Twig.Template con la plantilla precompilada que puede ser procesada mediante la función render.

Ajax templates

Twig.js permite cargar plantillas twig realizando peticiones AJAX al servidor configurando la variable href en los parámetros de entrada. Veamos como funciona:

Supongamos que tenemos un fichero twig en el servido accesible en /templates/list.twig.

Desde nuestra app debemos escribir lo siguiente para realizar la petición del servidor:

Voy a explicar para que sirven los parámetros de la función:

  • href: Url donde es accesible la plantilla.
  • async: La carga de la plantilla puede ser síncrono o asíncrona.
  • load: Función que es llamada si se ha tenido éxito en la petición al servidor.

En este caso, existen diferencias en el valor devuelto por la la función twig dependiendo de si la carga es síncrona o asíncrona. Si la carga es síncrona, el valor devuelto es un booleano, sin embargo, si la carga en asíncrona el devolverá un objeto Twig.Template.

Id – Ref

Se tiene acceso a la referencia de las plantillas que se les ha especificado un id desde cualquier partede la aplicación mediante el atributo ref 

 

Include – Extends

Una de las características más importantes de twig es la herencia. Veamos un ejemplo de como incluir y extender una plantilla con twig.js.

/templates/base.twig

 /templates/footer.twig

/templates/layout.twig

Como podemos observar, debemos indicar la url de las plantillas que queremos incluir o extender. Los tags include y extends sólo está activo en las ajax templates.

Filters – Functions

Twig.js permite añadir nuevos filtros y plantillas en nuestro motor de plantillas. Veamos un ejemplo:

En este sencillo ejemplo añadimos nuevo filtro que concatena a un string la cadena foo y una función que concatena dos strings.

Supported features

Twig.js no implementa todas las características de Twig, como por ejemplo la etiqueta macro. A continuación voy a listar las features soportadas:

 

Tags:

  • block
  • extends
  • filter
  • for
  • if
  • include
  • set

Filters:

  • capitalize
  • date
  • default 
  • escape
  • format 
  • join
  • json_encode 
  • keys
  • length 
  • lower
  • merge 
  • nl2br 
  • number_format
  • replace
  • reverse 
  • sort
  • striptags 
  • title
  • trim
  • upper 
  • url_encode 

Functions:

  • cycle
  • date
  • dump
  • parent
  • range

Test – Operators:

  • defined
  • divisibleby 
  • empty 
  • even 
  • null / none 
  • odd 
  • sameas
  • in
  • is
  • Math (+-/%***)
  • Logic (andornot())
  • Comparisons (==!=<>>=<====)
  • Others (..|~.[]?:)