Mustache es un sistema de templates como tantos que hay en el mercado, pero con una característica que lo diferencia de otros, y que está haciendo que me decante por este sistema para las plantillas en mis proyectos: Compartir plantillas entre el front developer (con Javascript) y el backend developer (PHP, Ruby, Python, Java,…)
Hasta ahora, yo venía usando jquery templates, pero la necesidad de mejorar el SEO en alguno de mis proyectos (al cargarse las plantillas con javascript los motores de búsqueda no rastrean su contenido) me hizo buscar un sistema de plantillas que se renderizara en el servidor.Lo bueno de mustache es que con una sola plantilla tendremos resuelto tanto los templates de back como los de front.
Me ha costado mucho encontrar un caso práctico en el que se compartiera la misma plantilla entre PHP y Javascript, y por eso he pensado que podría resultar útil crear este artículo.
Ejemplo de uso de los mismos templates entre PHP y JS
Crearemos un fichero llamado «hello.mustache» que tendrá el contenido de la plantilla a usar en esta demo:
<hr />
External File {{variable}}
<hr />
También crearemos el fichero index.php donde se mostrarán ambas plantillas, la renderizda en PHP y la renderizada en Javascript:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="lib/Mustache/mustache.js"></script>
</head>
<body>
<?php
require 'lib/Mustache/Autoloader.php';
Mustache_Autoloader::register();
$data = array('variable' => 'Loaded from PHP!');
$m = new Mustache_Engine(array(
'cache' => dirname(__FILE__).'/templates/cache/mustache'
));
echo "# load PHP template:";
echo $m->render(file_get_contents('templates/hello.mustache'),$data);
include('templates/templates.js.php');
?>
<script type="text/javascript">
/* save json in a JS variable */
var globalData= <?=json_encode($data)?>;
$(document).ready(function(){
var template = $("#helloTemplate").html(); //use jquery methods when possible
html = Mustache.to_html(template, globalData);
$('body').append("# load Javascript template: " + html);
});
</script>
</body>
</html>
Lo primero que haremos en el fichero index.php será cargar la librería de jquery y la de mustache.js (para renderizar las plantillas con Javascript). Luego iniciamos mustache para PHP, cargamos el array con los datos a usar ($data) y mostramos por pantalla la plantilla renderizada. Si queremos compartir esta plantilla en Javascript tenemos que realizar varios pasos:
- Guardar el json que hemos obtenido en una variable de Javascript
- Crear una fichero (tempaltes.js.php) que tendrá cada una de las plantillas que queramos usar en JS. Básicamente es el mismo template que hemos usado antes en PHP pero dentro de las etiqueta
<script id="Id_del_template" type="tmpl/js" >para que JS lo entienda y se pueda hacer referencia a él a través del Id_del_template. Si tenemos mas plantillas, cada una estará dentro de un<script>y con un ID único. El contenido de este fichero está mas adelante. - Cargar el contenido en el template deseado e insertarlo en la página.
Fichero contenedor de las plantillas JS (tempaltes.js.php):
<script id="helloTemplate" type="tmpl/js">
<?php include('hello.mustache'); ?>
</script>
Con este sistema conseguiremos tener nuestro código mucho mas reducido y organizado, y los maquetadores podremos trabajar de una manera más comoda con los desarrolladores de back.
Quieres verlo o usarlo?:
