Generalidades de Thymeleaf¶
📎 Material de apoyo del módulo: Thymeleaf y JPA con Spring Boot.pptx
Ruta de la sección¶
Esta sección recorre dos etapas: primero las vistas dinámicas y luego la persistencia de los datos que muestran.
| # | Página | Qué se aprende |
|---|---|---|
| 1 | Generalidades (esta página) | Qué es Thymeleaf, para qué sirve, cuándo conviene usarlo |
| 2 | Creación del proyecto | Generar el proyecto Spring Boot desde VS Code |
| 3 | Templates | Estructura de templates/ y static/, fragmentos reutilizables |
| 4 | Expresiones y atributos | th:text, th:each, th:if, @{...} y los objetos de utilidad |
| 5 | Controladores | @Controller, Model, ModelAndView y recepción de datos |
| 6 | Formularios | th:object, th:field, validación, errores y Post/Redirect/Get |
| 7 | CRUD con JPA | Entidad, repositorio y un CRUD completo con datos persistentes |
| 8 | Librerías extras | Dependencias adicionales y base de datos H2 |
Objetivo final: construir una aplicación web que renderice y persista datos.
¿Qué es?¶
Thymeleaf es un motor de plantillas (template engine) para Java, diseñado para generar vistas (principalmente HTML) en el servidor a partir de plantillas y un modelo de datos (variables/objetos) entregado por el backend.
En términos simples: te permite escribir HTML “casi normal” y luego “inyectar” datos dinámicos usando atributos como th:text, th:each, th:if, etc.
¿Para qué sirve?¶
Thymeleaf se usa para construir aplicaciones web server-side rendering (SSR), especialmente bajo el patrón MVC (Modelo–Vista–Controlador).
Casos típicos:
- Páginas dinámicas: mostrar información del usuario, catálogos, tablas, reportes.
- Listados y tablas: iterar colecciones (th:each) para renderizar filas.
- Condicionales de UI: mostrar/ocultar secciones (th:if, th:unless).
- Formularios: enlazar inputs a objetos (th:field) y mostrar validaciones/errores.
- Reutilización de UI: layouts, fragmentos y componentes (headers, menús, footers).
- Integración con seguridad e i18n: roles/permisos, mensajes traducibles.
¿Por qué?¶
Thymeleaf existe como respuesta a necesidades prácticas que aparecieron con otros motores de plantillas en Java:
HTML “natural” (Natural Templating)¶
Una de sus ideas clave es que la plantilla debe ser HTML válido y se debe poder abrir directamente en el navegador (sin servidor) para previsualizarla.
Esto mejora mucho: - colaboración con diseñadores - prototipado rápido - legibilidad y mantenibilidad - flujo de trabajo frontend/back
Mejor experiencia que JSP en aplicaciones modernas¶
Antes, JSP y JSTL fueron muy comunes, pero con el tiempo mostraron limitaciones: - mezcla fuerte de lógica/etiquetas con la vista - experiencia menos “HTML-friendly” - fricción con buenas prácticas modernas de MVC
Thymeleaf propone un enfoque más limpio, basado en atributos HTML (th:*), con una sintaxis que tiende a ser más legible.
Integración sólida con Spring (especialmente Spring MVC / Spring Boot)¶
Aunque no es exclusivo de Spring, Thymeleaf se volvió popular porque: - encaja perfecto con Spring MVC - el “modelo” del controlador se mapea naturalmente a la plantilla - facilita formularios, validaciones y seguridad
Un poco de historia (resumen)¶
- Nace en el ecosistema Java como alternativa moderna a motores de vista tradicionales (como JSP).
- Su propuesta diferencial fue el “Natural Templating”: plantillas HTML válidas, fáciles de diseñar y probar.
- Con la masificación de Spring Boot y el desarrollo de aplicaciones web server-side más simples y rápidas de levantar, Thymeleaf se consolidó como una opción muy usada para MVC (y especialmente para paneles administrativos, intranets y CRUDs).
> Nota: No es un framework frontend (como Angular/React). Es una tecnología para renderizar HTML desde el backend.
¿Dónde encaja en arquitectura?¶
En una aplicación MVC (server-side)¶
- Navegador solicita una URL
- Controlador (Spring MVC) procesa
- El controlador envía un modelo (datos)
- Thymeleaf renderiza la vista HTML con esos datos
- El navegador recibe HTML completo ya armado
En una SPA (Angular/React)¶
Normalmente no se usa Thymeleaf para la UI (porque la UI la renderiza el frontend), y el backend se expone como API REST.
Ventajas típicas¶
- Plantillas HTML válidas y legibles
- Muy buena integración con Spring
- Excelente para formularios y CRUDs
- Reutilización de fragmentos/layouts
- Curva de aprendizaje razonable
Consideraciones / límites¶
- No reemplaza un framework SPA moderno si necesitas UI altamente interactiva tipo app.
- Si tu enfoque es 100% API + frontend separado, Thymeleaf suele ser innecesario.