Mustache — Fundamentos, Integración y Casos Prácticos

Conceptos Clave

• motor de plantillas
• Mustache es un motor logic-less que separa completamente la lógica de la presentación.
• Sintaxis simple basada en “mustaches” (``), portable entre lenguajes.
• Compatible con entornos como PHP, java, Moodle y sistemas basados en JS.
• Ideal para:
  • Generar HTML, configuraciones, clases, ficheros y documentación.
  • Integrarse con frameworks (p. ej. Springboot).

Recursos

• mustache(5) - Logic-less templates.
• Mustache playground
• The Ultimate Mustache Tutorial

• [Introduction to Mustache

  Baeldung](https://www.baeldung.com/mustache)

• mustache - npm
• Parecido a Nunjucks doc oficial:
  • Nunjucks

Videos

• How to implement Mustache with Spring boot - YouTube — Springboot java
• Code generation with Mustache Templates - YouTube — JS
  • csv, configs, clases, types, converters, api, code from inputs
• Mustache Templates in Block: A Step-by-Step Tutorial - YouTube — PHP
• Mastering Mustache and PHP for SPA Development #105 - YouTube 🔥 PHP
• Creating A Single Page Application Using Mustache and PHP - DEV Community

---

Sintaxis Mustache

Variables

### Secciones

{{#items}} {{name}} {{/items}}

### Inversas

{{^items}} No hay datos. {{/items}}

### Comentarios

{{! Esto es un comentario }}

### Filtros (dependen del lenguaje)

{{{html_content}}}

---

## Mustache en PHP
- Motor muy ligero, ideal para SPAs con backend liviano.
- Se suele combinar con:
	- Routers minimalistas.
	- JSON como transporte y Mustache como render.
- Casos fuertes:
	- Render dinámico por componentes.
	- Reutilización de vistas.
	- Plantillas anidadas.

### Ejemplo PHP

`<?php require ‘vendor/autoload.php’; $mustache = new Mustache_Engine;

$template = “Hola {{nombre}}”; $data = [“nombre” => “Eduardo”];

echo $mustache->render($template, $data);`

## Mustache en Java
- Integración típica con [Springboot](/backend/springboot/) y controladores MVC.
- Ideal para:
	- Renderizar vistas ligeras.
	- Generar código basado en plantillas (DTOs, configs, etc.).

### Ejemplo Java

MustacheFactory mf = new DefaultMustacheFactory(); Mustache mustache = mf.compile(“saludo.mustache”);

Map<String, Object> data = new HashMap<>(); data.put(“nombre”, “Eduardo”);

StringWriter writer = new StringWriter(); mustache.execute(writer, data).flush(); System.out.println(writer.toString());

---

## Mustache en JavaScript
- Muy usado en generación de archivos y herramientas de CLI.
- Flexible para pipelines de DevOps donde se generan configuraciones.

### Ejemplo JS

const Mustache = require(“mustache”);

const template = “Hola {{user}}”; const data = { user: “Eduardo” };

console.log(Mustache.render(template, data));

---

## Mustache en Moodle
- Sistema de plantillas oficial para UI.
- Permite separar completamente el HTML del PHP del core.
- Procesa datos provenientes de consultas SQL, APIs y formularios.
- Patrón estándar:
	- PHP obtiene datos → Formatea el array → Mustache renderiza.

### Enlaces Moodle
- [Moodle](/desarrollo%20web/moodle/)
- Ej: SQL → template (transformación en array asociativo).
- [GitHub - ramsharma12345/moodle_tutorial](https://github.com/ramsharma12345/moodle_tutorial/tree/main)
- [Moodle Tutorial for Developers (Part-1…) - YouTube](https://youtu.be/uJm9DoBCN1Q?list=PL5Kzdf98ofLtKCgtAqA3Xtz5bub_GZ5DI)

### Ejemplo Moodle

$templatecontext = [ ‘users’ => $DB->get_records_sql(‘SELECT id, firstname FROM {user}’) ];

echo $OUTPUT->render_from_template(‘local_plugin/userlist’, $templatecontext); ```

---

Diseño y Organización de Plantillas

• Separar layout en:
  • cabecera.mustache
  • footer.mustache
  • bloques reutilizables
• Usar contextos bien formados:
  • No lógica, solo datos procesados.
• Mantener coherencia semántica:
  • `` siempre con nombre plural.
  • Los ítems internos deben ser objetos uniformes.

Patrones Avanzados

• Generación de código desde CSV:
  • Leer CSV → generar DTO, clases, configs.
• Generación de APIs:
  • Definir estructura en JSON → renderizar endpoints.
• Componentes plug-and-play:
  • Mustache como capa de presentación compartida entre microservicios.
• Plantillas multilayer:
  • Plantilla base → secciones → subcomponentes.

Ventajas

• Portabilidad total.
• Rendimiento alto.
• Adecuado para sistemas legacy, LMS como Moodle, o microservicios.

Comparativa con Nunjucks

• Nunjucks ofrece más lógica y es más “plantilla completa”.
• Mustache es minimalista, ideal para entornos que necesitan neutralidad entre lenguajes.