Lenguajes de Programación

Thymeleaf Vs. JSP ¿Cuál usar?

Te contamos todo sobre Thymeleaf y JSP, aprende qué es cada tecnología, sus ventajas y un ejemplo de cada uno para que tu mismo saques conclusiones de cuál se adapta mejor a tu proyecto,

Luis Miguel López Magaña

Experto en Java

Lectura 2 minutos

Publicado el 9 de julio de 2018

Tabla de contenidos

En este video vemos dos tecnologías que se suelen utilizar con JAVA, también con Spring, en la parte de la vista, siempre que trabajemos bajo el patrón de vista controlador, como son Thymeleaf y JSP.

Vamos a comparar ambas y ver las bondades o las dificultades que podamos tener con cada una de ellas.

Qué es JSP y sus características

JSP es una tecnología que nos va a permitir crear contenido web dinámico.

En algunos sitios se dice que es un motor de plantillas, aunque realmente, y hablando de manera estricta, no lo es. Lo que hace es transformar un documento web, en una serie de expresiones en un servlet, y a partir del mismo sirve el contenido web.

Junto con JSP, se suele trabajar también con JSTL (JavaServer Pages Standard Tag Library), una de las muchas librerías de etiquetas que podemos utilizar, que sirve para extenderla.

Se puede integrar con otros frameworks, en particular con Spring, aunque se puede trabajar con JSP de manera independiente.

Ejemplo de JSP

Aquí tenemos un ejemplo de lo que sería un formulario de JSP y JSTL.

Lo que hace JSP es añadir un juego de etiquetas propio, en este caso cuando trabajamos en conjunción con Spring.

Este juego de etiquetas hace que, cuando estamos trabajando aquí con un formulario, no trabajemos con el formulario de HTML directamente, sino con una etiqueta especial del conjunto de etiquetas de formularios de Spring:

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h3>Bienvenido, introduzca los detalles del empleado</h3>
        <form:form method="POST" action="addEmpleado" modelAttribute="empleadoForm">
             <table>
                <tr>
                    <td><form:label path="nombre">Nombre</form:label></td>
                    <td><form:input path="nombre"/></td>
                </tr>
                <tr>
                    <td><form:label path="id">Id</form:label></td>
                    <td><form:input path="id"/></td>
                </tr>
                <tr>
                    <td><form:label path="Email">Email</form:label></td>
                    <td><form:input path="Email"/></td>
                </tr>
                <tr>
                    <td><input type="submit" value="Submit"/></td>
                </tr>
            </table>
        </form:form>
    </body>
</html>

De esta forma podemos definir nuevas etiquetas, que nos van a permitir, en este caso por ejemplo, hacer el binding rápido de datos entre un objeto bean de Spring con los campos del formulario, para después hacer un tratamiento de una manera más sencilla.

Sin embargo, si queremos visualizar a nivel local, sin pasar por el servidor, nuestro fichero de JSP, se mostraría así:

Imagen 0 en THYMELEAF Vs. JSP

Por este motivo vamos a tener grandes problemas para hacer tareas sencillas como son, por ejemplo, la maquetación, la aplicación de estilos o algún tipo de cambio rápido.

Thymeleaf y sus características

Thymeleaf es, estrictamente hablando, un motor de plantillas, que se suele utilizar sobre todo en el contexto de HTML.

Lo que hace es coger un documento HTML, que tiene dentro algunas expresiones, le aplica un procesamiento y produce contenido, que en este caso sería contenido web.

No añade prácticamente ninguna etiqueta nueva (si no queremos, ninguna), sino lo que hace es añadir nuevos atributos a etiquetas ya conocidas.

Es mucho más legible o entendible en formato HTML, es decir, no parece que no sea HTML, como pasa con JSP. Thymelife es casi tan legible como si fuera un documento HTML.

Ejemplo de Thymeleaf

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
    <head>
    </head>
    <body>
        <h3>Bienvenido, introduzca los detalles del empleado</h3>
        <form method="POST" th:action="@{/addEmpleado}" th:object="${empleadoForm}">
             <table>
                <tr>
                    <td><label for="nombre">Nombre</label></td>
                    <td><input type="text" th:field="*{nombre}"/></td>
                </tr>
                <tr>
                  <td><label for="id">Id</label></td>
                  <td><input type="text" th:field="*{id}"/></td>
                </tr>
                <tr>
                  <td><label for="email">Nombre</label></td>
                  <td><input type="text" th:field="*{email}"/></td>
                </tr>
                <tr>
                    <td><input type="submit" value="Submit"/></td>
                </tr>
            </table>
        </form>
    </body>
</html>

Aquí tenemos el mismo formulario anterior hecho con Thymelife, donde encontramos algunos nuevos atributos pero no encontramos ninguna etiqueta que no sea HTML.

Esto nos va a dar muchas facilidades, no solamente a la hora de la lectura, sino también a la hora de la visualización.

Imagen 1 en THYMELEAF Vs. JSP

El formulario de ejemplo se va a ver tal cual lo vemos a ver finalmente renderizado, lo que es una gran ventaja.

Ventajas de Thymeleaf

Las ventajas que nos ofrece Thymeleaf son:

Podemos prototipar sin necesidad de ejecutar la aplicación.
Si nuestra aplicación está corriendo y solo modificamos las plantillas, no es necesario volver a desplegarla, cambiando la propiedad cache a false.
El dialecto estándar, o el dialecto de Spring si trabajamos con Thymeleaf conjuntamente con Spring, es mucho más potente y rico en funcionalidades que la librería de etiquetas de JSTL.

Ventajas de JSP

Las ventajas que ofrece JSP son estas:

Es una tecnología que tiene mucho más recorrido, porque lleva en el mercado muchos más años.
El procesamiento de las plantillas o del contenido, es mucho más rápido que la velocidad de procesamiento que puede conseguir Thymeleaf, por lo que en un sitio donde la velocidad sea critica quizás sea planteable la posibilidad de usar JPS.

Compartir este post