Motores de Plantillas
En Node.js, los motores de plantillas son herramientas fundamentales para generar contenido HTML dinámico basado en datos del servidor. Permiten separar la lógica de negocio de la presentación, mejorando la mantenibilidad, escalabilidad y legibilidad de las aplicaciones. Con un motor de plantillas, se pueden usar bucles, condiciones y funciones auxiliares directamente en los archivos de plantilla, generando contenido de manera eficiente y segura.
Su uso es crucial cuando se manejan datos provenientes de bases de datos, APIs o cálculos en el servidor que deben mostrarse al usuario. En este tutorial, se abordarán conceptos clave de Node.js: sintaxis, estructuras de datos, algoritmos y principios de programación orientada a objetos (POO), aplicados directamente en el desarrollo con motores de plantillas.
Al finalizar este contenido, el lector podrá crear páginas dinámicas usando motores de plantillas, enviar datos a las plantillas, gestionar errores y optimizar el rendimiento. Además, entenderá cómo se integran estas técnicas dentro de la arquitectura de aplicaciones web modernas, aplicando las mejores prácticas de Node.js en proyectos reales.
Ejemplo Básico
textconst express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;
// Configuración del motor de plantillas EJS
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// Datos de ejemplo
const usuarios = [
{ nombre: 'Juan', edad: 28 },
{ nombre: 'María', edad: 34 },
{ nombre: 'Pedro', edad: 22 }
];
// Ruta principal
app.get('/', (req, res) => {
res.render('index', { usuarios });
});
// Iniciar servidor
app.listen(PORT, () => {
console.log(`Servidor ejecutándose en http://localhost:${PORT}`);
});En este ejemplo básico se utiliza Express junto con el motor de plantillas EJS. Puntos clave:
- app.set('view engine', 'ejs') define EJS como motor de plantillas.
- app.set('views', path.join(__dirname, 'views')) indica la carpeta de las plantillas.
- El array usuarios contiene los datos que se pasan a la plantilla y pueden ser usados para bucles o condiciones.
- res.render('index', { usuarios }) envía los datos al motor de plantillas para generar el HTML, manteniendo separada la lógica de presentación.
Este enfoque evita problemas de memoria, mejora la legibilidad y sigue las mejores prácticas de Node.js.
Ejemplo Práctico
textconst express = require('express');
const path = require('path');
class Usuario {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
esAdulto() {
return this.edad >= 18;
}
}
const app = express();
const PORT = 3000;
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
const usuarios = [
new Usuario('Juan', 28),
new Usuario('María', 34),
new Usuario('Pedro', 15)
];
app.get('/', (req, res) => {
try {
res.render('index', { usuarios });
} catch (error) {
console.error('Error al renderizar la plantilla:', error);
res.status(500).send('Error interno del servidor');
}
});
app.listen(PORT, () => {
console.log(`Servidor ejecutándose en http://localhost:${PORT}`);
});En este ejemplo avanzado se demuestra el uso de clases para aplicar POO. El método esAdulto encapsula la lógica, separándola de la plantilla.
- Se usa try/catch alrededor de res.render para manejar errores de renderizado y proteger la estabilidad del servidor.
- Pasar objetos a la plantilla permite usar métodos de cada instancia, mejorando la organización del código.
- Este enfoque evita fugas de memoria, bucles ineficientes y mezcla de lógica y presentación, incrementando rendimiento y legibilidad.
📊 Tabla de Referencia
| Node.js Element/Concept | Description | Usage Example |
|---|---|---|
| Motor de plantillas EJS | Generación de HTML dinámico | app.set('view engine', 'ejs') |
| Paso de datos a plantillas | Enviar datos desde el servidor | res.render('index', { usuarios }) |
| POO e encapsulación | Organización de lógica y datos | class Usuario { esAdulto() {...} } |
| Manejo de errores | Control de fallos en renderizado | try { res.render(...) } catch(err) {...} |
| Separación de responsabilidades | Mantener lógica y presentación separadas | Controlador prepara datos, plantilla renderiza |
Aprender motores de plantillas en Node.js permite crear HTML dinámico, aplicar principios de POO y manejar datos de manera eficiente. Los siguientes pasos incluyen estudiar Pug y Handlebars, integración con bases de datos, caching y optimización de renderizado. Recursos recomendados: documentación oficial, repositorios en GitHub y tutoriales de la comunidad Node.js, que facilitan profundizar conocimientos y aplicarlos en proyectos reales.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior