Dependencias sobre librerías de lado de cliente con Webjars en una aplicación web Java

Una aplicación web se compone de código de lado de servidor, en el caso de utilizar el lenguaje de programación Java de código Java normalmente utilizando algún de los muchos framework web, por otra parte se compone de código de lado de cliente con una gran variedad de librerías de JavaScript como jQuery, React, Underscore o Bootstrap para los estilos. En las aplicaciones Java las librerías de lado de servidor se gestionan como dependencias del proyecto y con herramientas como Gradle se puede automatizar el descargar la librería de repositorios como Maven Central y la versión que se necesite así como hacer sencillo actualizar a una nueva. En el caso de las librerías de lado del cliente con Webjars se consiguen los mismos beneficios.

Los webjars son librerías de extensión jar con los recursos de lado del cliente empaquetados en ellos que en el momento de ser requeridos pueden ser devueltos como un recurso estático por la aplicación, incluyen los archivos JavaScript sin minimizar y minimizados, los archivos map para depuración si minimizados están ofuscados, recursos de estilos CSS o imágenes. Se gestionan como cualquier otra dependencia del proyecto Java lo que proporciona las mismas ventajas de obtener las dependencias de forma automática y hace fácil actualizar a una nueva versión. Por si fuera poco es muy sencillo utilizar webjars, para los frameworks más populares se ofrece una pequeña guía de uso en la documentación.

Las librerías más populares de JavaScript o CSS están empaquetadas como webjars en las diferentes versiones y han sido publicadas de forma que es posible añadir la dependencia en la versión concreta que necesite la aplicación. Dado que los webjars se gestionan como una dependencia Java si estos a su vez tiene alguna dependencia sobre otra librería está se incluyen en el proyecto de forma transitiva. El contenido del webjar para jQuery es el siguiente.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

$ tree
.
├── META-INF
│   ├── MANIFEST.MF
│   ├── maven
│   │   └── org.webjars
│   │       └── jquery
│   │           ├── pom.properties
│   │           └── pom.xml
│   └── resources
│       └── webjars
│           └── jquery
│               └── 3.3.1-1
│                   ├── jquery.js
│                   ├── jquery.min.js
│                   ├── jquery.min.map
│                   └── webjars-requirejs.js
└── jquery-3.3.1-1.jar

En el caso del framework web Apache Tapestry basado en componentes para el desarrollo de aplicaciones web Java tan solo hay que incluir la dependencia en el proyecto y un poco de configuración en el módulo de la aplicación para el contenedor de dependencias como se indica en la guía de uso con el objetivo que los recursos de los webjars sean servidos.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

package io.github.picodotdev.plugintapestry.services;

public class AppModule {
    ...
    
    public static void contributeClasspathAssetAliasManager(MappedConfiguration configuration) {
        configuration.add("webjars", "META-INF/resources/webjars");
    }

    ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

...

dependencies {

    ...
    
    // Webjars
    runtime 'org.webjars:requirejs:2.3.5'
    runtime 'org.webjars:jquery:3.3.1-1'
    runtime 'org.webjars.bower:underscore:1.9.0'
    
    ...

}

...

Inspeccionando el código fuente de la página devuelta se observa que en el caso de Tapestry la URL generada al solicitar en un webjar es del estilo https://localhost:8443/assets/webjars/z941c28a3/requirejs/2.3.5/require.js.

Los webjars muy útiles para gestionar las librerías de lado cliente que hacen innecesario descargar manualmente las dependencias, automatizan la descarga, hacen muy sencillo actualizar a nuevas versiones y es muy fácil de usar al no requerir mucha configuración ni ser invasiva. Además, al estar como una dependencia en el archivo de construcción del proyecto queda indicado de forma explícita que el proyecto utiliza y necesita esa librería. Para mi son una herramienta imprescindible.

El código fuente completo del ejemplo puedes descargarlo del repositorio de ejemplos de Blog Bitix alojado en GitHub y probarlo en tu equipo ejecutando siguiente comando:
./gradlew run

Libro PlugIn Tapestry

Si te interesa Apache Tapestry descarga gratis el libro de más de 300 páginas que he escrito sobre este framework en el formato que prefieras, PlugIn Tapestry: Desarrollo de aplicaciones y páginas web con Apache Tapestry, y el código de ejemplo asociado. En el libro comento detalladamente muchos aspectos que son necesarios en una aplicación web como persistencia, pruebas unitarias y de integración, inicio rápido, seguridad, formularios, internacionalización (i18n) y localización (l10n), AJAX, ... y como abordarlos usando Apache Tapestry.

PDF Código fuente ejemplos