pug

Descripción general

Pug es un motor de plantillas (template engine) para node.js que permite generar HTML de forma declarativa y concisa. Se caracteriza por una sintaxis basada en indentación, eliminando la necesidad de etiquetas de cierre explícitas y reduciendo considerablemente el ruido visual del HTML tradicional.

Está ampliamente utilizado en aplicaciones Node.js + Express, sistemas MVC, SSR (Server-Side Rendering) y generación de vistas dinámicas.

Enlaces y recursos oficiales

Características principales

  • Sintaxis compacta basada en indentación
  • Generación de HTML dinámico
  • Soporte nativo para layouts y herencia de plantillas
  • Variables, condiciones y bucles
  • Mixins reutilizables
  • Inclusión de archivos parciales
  • Integración directa con Express y otros frameworks
  • Compilación a HTML estático

Sintaxis básica

  • Las etiquetas HTML se representan por su nombre
  • Los atributos se definen entre paréntesis
  • El contenido se escribe en la misma línea o anidado por indentación
  • El texto plano se escribe directamente

Ejemplo conceptual:

  • div define un <div>
  • div.container define un <div class="container">
  • #id define un identificador
  • La jerarquía depende de la indentación

Variables y datos dinámicos

Pug permite inyectar variables desde el backend y utilizarlas directamente en la vista.

  • Acceso a variables mediante interpolación
  • Soporte para expresiones JavaScript
  • Escapado automático de HTML por defecto
  • Posibilidad de renderizado sin escape explícito

Casos comunes:

  • Renderizado de datos de base de datos
  • Personalización de vistas por usuario
  • Construcción dinámica de listas y tablas

Condicionales

Soporta estructuras de control similares a JavaScript:

  • if
  • else if
  • else
  • Operadores lógicos y comparaciones

Uso típico:

  • Mostrar u ocultar secciones según permisos
  • Renderizar mensajes de error o éxito
  • Controlar flujos de interfaz

Bucles e iteraciones

Permite recorrer arrays y objetos:

  • each
  • for

Aplicaciones habituales:

  • Listados de usuarios
  • Menús dinámicos
  • Tablas de resultados
  • Logs y eventos

Mixins (componentes reutilizables)

Los mixins funcionan como funciones de plantilla reutilizables.

Características:

  • Aceptan parámetros
  • Permiten bloques anidados
  • Reducen duplicación de código
  • Facilitan la creación de componentes UI

Ejemplos de uso:

  • Botones
  • Cards
  • Formularios
  • Modales

Layouts y herencia de plantillas

Pug permite definir una plantilla base y extenderla.

Conceptos clave:

  • extends para heredar de un layout
  • block para definir secciones reemplazables
  • Reutilización de cabeceras y footers
  • Estructuración clara de vistas grandes

Includes y parciales

Permite dividir vistas en archivos más pequeños:

  • Inclusión de fragmentos HTML/Pug
  • Organización modular
  • Facilita mantenimiento

Usos típicos:

  • Navbar
  • Footer
  • Sidebars
  • Componentes comunes

Comentarios

Pug soporta dos tipos de comentarios:

  • Comentarios visibles en HTML
  • Comentarios solo para Pug (no renderizados)

Esto permite:

  • Documentar plantillas
  • Desactivar bloques temporalmente
  • Mantener notas internas de desarrollo

Integración con Express

Pug es uno de los motores más usados con Express.

Flujo típico:

  • Configurar Pug como view engine
  • Definir carpeta de vistas
  • Renderizar con res.render()
  • Pasar variables desde el controlador

Ventajas:

  • Renderizado rápido
  • Curva de aprendizaje moderada
  • Integración nativa y estable

Seguridad

Aspectos relevantes:

  • Escapado automático de HTML (prevención de XSS)
  • Renderizado sin escape solo bajo control explícito
  • Separación lógica entre datos y presentación

Buenas prácticas:

  • No renderizar HTML sin sanitizar
  • Validar datos antes de pasarlos a la vista
  • Mantener lógica compleja fuera de la plantilla

Casos de uso comunes

  • Aplicaciones web SSR
  • Dashboards administrativos
  • Prototipado rápido de interfaces
  • Generación de HTML estático
  • Sistemas internos y backoffice

Ventajas

  • Código más legible y corto
  • Menor repetición
  • Alta productividad
  • Ecosistema maduro
  • Amplio soporte comunitario

Limitaciones

  • Dependencia fuerte de la indentación
  • Menos popular en arquitecturas SPA modernas
  • Curva inicial para desarrolladores acostumbrados a HTML puro
  • No orientado a frontend reactivo sin SSR

Comparación con otros motores

  • Frente a EJS: sintaxis más compacta
  • Frente a Handlebars: mayor expresividad
  • Frente a JSX: menos acoplado a frameworks frontend
  • Frente a HTML puro: mayor dinamismo y reutilización

pug — casos de uso con ejemplos y alternativas actuales (2025)

Renderizado de vistas en Express (SSR clásico)

Uso típico de Pug como motor de vistas en aplicaciones node.js con Express.

Ejemplo de configuración Express

const express = require("express")
const app = express()

app.set("view engine", "pug")
app.set("views", "./views")

app.get("/", (req, res) => {
	res.render("index", {
		title: "Dashboard",
		user: { name: "Eduardo", role: "admin" }
	})
})

app.listen(3000)

`

Ejemplo de plantilla Pug

doctype html
html
	head
		title= title
	body
		h1 Hola #{user.name}
		if user.role === "admin"
			p Acceso administrativo habilitado

Dashboards internos y backoffice

Muy común en:

  • Paneles administrativos
  • Herramientas internas
  • Sistemas de gestión

Ventaja clave:

  • HTML limpio
  • Poco JavaScript en frontend
  • Renderizado rápido

Ejemplo de listado dinámico

h2 Usuarios
ul
	each user in users
		li #{user.email} — #{user.status}

Generación de HTML estático

Pug puede usarse como generador de HTML estático para documentación o sitios simples.

Ejemplo de compilación estática

pug src/views --out dist --pretty

Casos habituales:

  • Documentación técnica
  • Landings simples
  • Prototipos rápidos

Emails transaccionales

Uso frecuente de Pug para generar plantillas de correo HTML.

Ventajas:

  • Reutilización de layouts
  • Separación clara de lógica y contenido
  • Fácil integración con nodemailer

Ejemplo de template de email

table
	tr
		td
			h2 Hola #{name}
			p Tu pedido #{orderId} ha sido confirmado

Prototipado rápido de UI

Ideal para:

  • Wireframes funcionales
  • Pruebas de diseño
  • Validación rápida con negocio

Razón:

  • Menos ruido que HTML
  • Escritura muy rápida
  • Fácil refactor

Microservicios de renderizado

Arquitectura donde un servicio se dedica solo a:

  • Renderizar HTML
  • Devolver fragmentos
  • Generar PDFs

Pug encaja bien por:

  • Simplicidad
  • Rendimiento
  • Bajo overhead

Sistemas legacy o híbridos

Muy usado cuando:

  • No se quiere SPA
  • El frontend es mínimo
  • El backend controla el flujo

Ejemplo:

  • Apps corporativas
  • Intranets
  • Herramientas IT

Alternativas actuales a Pug (2025)

EJS

Motor de plantillas clásico basado en HTML.

Ventajas:

  • HTML casi puro
  • Curva de aprendizaje mínima
  • Muy estable

Limitaciones:

  • Más verboso
  • Menos reutilización que Pug

Caso recomendado:

  • Equipos muy orientados a HTML tradicional

Handlebars

Motor declarativo y restrictivo.

Ventajas:

  • Separación estricta de lógica
  • Templates predecibles
  • Muy usado en entornos grandes

Limitaciones:

  • Menos expresivo
  • Helpers necesarios para lógica compleja

Caso recomendado:

  • Equipos grandes
  • Proyectos con normas estrictas

Nunjucks

Motor inspirado en Jinja2.

Ventajas:

  • Potente sistema de herencia
  • Sintaxis clara
  • Muy flexible

Limitaciones:

  • Más verboso que Pug
  • Menos popular que antes

Caso recomendado:

  • Proyectos complejos sin SPA

JSX (React / Next.js)

Renderizado mediante componentes.

Ventajas:

  • Ecosistema dominante
  • UI reactiva
  • SSR avanzado con Next.js

Limitaciones:

  • Mayor complejidad
  • Overkill para apps simples

Caso recomendado:

  • Frontend moderno
  • SPAs y SSR avanzados

Astro

Framework moderno orientado a contenido.

Ventajas:

  • HTML estático optimizado
  • Mínimo JavaScript
  • Excelente rendimiento

Limitaciones:

  • No es solo un template engine
  • Nuevo paradigma

Caso recomendado:

  • Sitios de contenido
  • Documentación
  • Marketing sites

Marko

Motor de eBay orientado a rendimiento.

Ventajas:

  • Muy rápido
  • Soporta componentes
  • SSR eficiente

Limitaciones:

  • Ecosistema pequeño
  • Menos comunidad

Caso recomendado:

  • Apps SSR de alto rendimiento

Comparativa rápida de decisión

  • Backoffice / SSR simple → Pug
  • HTML clásico → EJS
  • Control estricto → Handlebars
  • SSR moderno / SPA → JSX + Next.js
  • Sitios estáticos modernos → Astro
  • Alto rendimiento SSR → Marko

Criterios para elegir Pug en 2025

  • Backend-driven UI
  • Poco frontend reactivo
  • Equipo Node.js
  • Necesidad de velocidad y simplicidad
  • Preferencia por sintaxis concisa