Introduction aux WebJars

1. Vue d'ensemble

Ce didacticiel présente les WebJars et comment les utiliser dans une application Java.

En termes simples, les WebJars sont des dépendances côté client regroupées dans des fichiers d'archive JAR. Ils fonctionnent avec la plupart des conteneurs JVM et des frameworks Web.

Voici quelques WebJars populaires: Twitter Bootstrap , jQuery , Angular JS , Chart.js, etc. une liste complète est disponible sur le site officiel.

2. Pourquoi utiliser les WebJars?

Cette question a une réponse très simple - parce que c'est facile.

L'ajout et la gestion manuels des dépendances côté client se traduisent souvent par des bases de code difficiles à maintenir .

De plus, la plupart des développeurs Java préfèrent utiliser Maven et Gradle comme outils de gestion de build et de dépendance.

Le principal problème que WebJars résout est de rendre les dépendances côté client disponibles sur Maven Central et utilisables dans n'importe quel projet Maven standard.

Voici quelques avantages intéressants des WebJars:

  1. Nous pouvons gérer explicitement et facilement les dépendances côté client dans les applications Web basées sur JVM
  2. Nous pouvons les utiliser avec n'importe quel outil de construction couramment utilisé, par exemple: Maven, Gradle, etc.
  3. Les WebJars se comportent comme n'importe quelle autre dépendance Maven - ce qui signifie que nous obtenons également des dépendances transitives

3. La dépendance Maven

Allons-y directement et ajoutons Twitter Bootstrap et jQuery à pom.xml :

 org.webjars bootstrap 3.3.7-1 org.webjars jquery 3.1.1 

Désormais, Twitter Bootstrap et jQuery sont disponibles sur le chemin de classe du projet; nous pouvons simplement les référencer et les utiliser dans notre application.

Remarque: vous pouvez vérifier la dernière version de Twitter Bootstrap et les dépendances jQuery sur Maven Central.

4. L'application simple

Une fois ces deux dépendances WebJar définies, configurons maintenant un simple projet Spring MVC pour pouvoir utiliser les dépendances côté client.

Avant d'arriver à cela, cependant, il est important de comprendre que les WebJars n'ont rien à voir avec Spring , et nous n'utilisons que Spring ici car c'est un moyen très rapide et simple de configurer un projet MVC.

Voici un bon point de départ pour configurer le projet Spring MVC et Spring Boot.

Et, avec la configuration simple du projet, nous définirons quelques mappages pour nos nouvelles dépendances client:

@Configuration @EnableWebMvc public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/webjars/**") .addResourceLocations("/webjars/"); } }

Nous pouvons bien sûr le faire également via XML:

5. Dépendances indépendantes de la version

Lorsque vous utilisez Spring Framework version 4.2 ou supérieure, il détecte automatiquement la bibliothèque webjars-locator sur le chemin de classe et l'utilise pour résoudre automatiquement la version de tous les actifs WebJars.

Afin d'activer cette fonctionnalité, nous allons ajouter la bibliothèque webjars-locator en tant que dépendance de l'application:

 org.webjars webjars-locator 0.30 

Dans ce cas, nous pouvons référencer les actifs WebJars sans utiliser la version; voir la section suivante pour quelques exemples réels.

6. WebJars sur le client

Ajoutons une simple page d'accueil HTML à notre application (c'est index.html ):

 WebJars Demo 

Nous pouvons maintenant utiliser Twitter Bootstrap et jQuery dans le projet - utilisons les deux dans notre page d'accueil, en commençant par Bootstrap:

Pour une approche indépendante de la version:

Ajouter jQuery:

Et l'approche indépendante de la version:

7. Test

Maintenant que nous avons ajouté Twitter Bootstrap et jQuery dans notre page HTML, testons-les.

Nous ajouterons une alerte bootstrap dans notre page:

Success! It is working as we expected.

Notez qu'une certaine compréhension de base de Twitter Bootstrap est supposée ici; voici les guides de démarrage sur le fonctionnaire.

Cela affichera une alerte comme indiqué ci-dessous, ce qui signifie que nous avons ajouté avec succès Twitter Bootstrap à notre chemin de classe.

Utilisons jQuery maintenant. Nous ajouterons un bouton de fermeture à cette alerte:

× 

Nous devons maintenant ajouter jQuery et bootstrap.min.js pour la fonctionnalité de bouton de fermeture, alors ajoutez-les à l'intérieur de la balise body de index.html, comme ci-dessous:

Note: If you are using version-agnostic approach, be sure to remove only the version from the path, otherwise, relative imports may not work:

This is how our final welcome page should look like:

 WebJars Demo

× Success! It is working as we expected.

This is how the application should look like. (And the alert should disappear when clicking the close button.)

8. Conclusion

In this quick article, we focused on the basics of using WebJars in a JVM-based project, which makes development and maintenance a lot easier.

We implemented a Spring Boot backed project and used Twitter Bootstrap and jQuery in our project using WebJars.

The source code of the above-used example can be found in the Github project – this is a Maven project, so it should be easy to import and build.