Gestion des ressources client-side : WebJars & CDN

Webjars

Nous sommes maintenant habitués à utiliser Maven, Gradle, SBT ou tout autre outil de build pour gérer les dépendances d’un projet, avec tout ce que cela apporte :

  • Meilleure visibilité sur les librairies utilisées
  • Gestion des dépendances transitives
  • Mise à jour vers une nouvelle version plus rapide (dependencyManagement est votre ami !)

Il est possible cependant que, pour vos diverses librairies client-side (libs JS, frameworks CSS…), votre gestion de ces librairies soit la suivante :

  • Aller sur le site de la librarie
  • Télécharger un zip ou les sources
  • mettre tout ça WEB-INF (ou son équivalent Play 2, Grails,etc…)
  • Recommencer l’opération en cas de dépendance transitive

Pourquoi ne pourrait-on pas gérer une librairie client-side comme n’importe quel autre librairie ? C’est maintenant possible, grâce aux WebJars !

WebJars à la rescousse !

Le projet WebJars, initié par James Ward, part d’une idée simple : en packageant les ressources d’une librairie client-side dans un JAR publié sur Maven Central,  on peut ainsi profiter de tout les avantages des divers outils de build (dont la gestion des dépendances transitives) et gérer ces librairies comme n’importe quel autre.

Ajouter une dépendance à Twitter Boostrap revient alors à ajouter dans le POM de votre projet :

1
2
3
4
5
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>2.3.2</version>
</dependency>

Le site Webjars.org recense plus d’une centaine de librairies qui ont été ainsi packagées et disponibles sur Central, mises à jour régulièrement.Et si LA librairie dont vous avez à tout prix besoin n’est pas disponible ou n’est pas à jour, vous pouvez tout à fait créer une issue ou faire une pull request pour corriger cela !

J’ai ma lib, mais j’en fais quoi maintenant ?

Vous avez donc choisi d’utiliser WebJars pour gérer vos gérer vos librairies client-side. Comment utiliser ces ressources dans vos JSP ou templates ?

Dans le cas d’une web app deployée sur un conteneur compatible Servlet 3, les webjars sont directement accessible en tant que ressources statiques. Vous pouvez donc y faire référence ainsi :

1
<link rel='stylesheet' href='webjars/bootstrap/2.1.1/css/bootstrap.min.css'>

Dans le cas de Spring MVC, il vous faudra ajouter :

1
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>

ou, si l’application est deployée sur un conteur compatible Servlet 3 :

1
<mvc:resources mapping="/webjars/**" location="/webjars/"/>

WebJars fournit également des plugins pour Play2 et Wicket, ainsi que des instructions détaillées pour intégrer les WebJars dans un project Grails, Tapestry, Dropwizard (que Bastien Lemale vous a récemment présenté) et même Ring (framework Web pour Clojure).

Pour de plus amples détails, je vous renvoie à la documentation des WebJars.

Les CDN

Qu’est-ce qu’un CDN ? Un CDN (ou Content Delivery Network) est en fait tout un ensemble de serveurs à travers le monde, dont le but est de servir des ressources telles que les librairies client side.

Votre SI aime les CDN

Bien qu’un CDN ne règle pas le problème des dépendances transitives,  il épargne néanmoins la gymnastique du téléchargement/unzip à répétition mais offre surtout de nombreux avantages en termes de performance :

  • Vous épargnez à votre serveur et à votre infrastructure réseau le besoin de servir de multiples ressources en déléguant cette tâche à d’autres serveurs
  • Les CDN étant par essence distribués à travers le monde, vous minimisez ainsi les temps de réponse : le CDN se chargera de séléctionner le serveur le plus proche, le plus disponible…
  • Vous ne seriez pas le premier à faire appel à un CDN : il y a de grandes chances pour que la ressource dans déjà dans le cache du client de votre webapp.

Il peut être souhaitable d’avoir les ressources en local lors du développement (en utilisant des WebJars, par exemple ;)) , mais je ne saurais que vous conseiller d’utiliser un CDN en production !

Où trouver des CDN ?

L’un des CDN les plus connus est celui de Google, mais il ne sert que les librairies les plus connues. Si vous voulez un large choix de librairies, cdnjs est tout designé : au moment de l’écriture de cet article, 414 librairies sont disponibles (dont des librairies CSS, malgré son nom).

VN:R_U [1.9.22_1171]
Rating: +1 (from 1 vote)
Share
Ce contenu a été publié dans Non classé. Vous pouvez le mettre en favoris avec ce permalien.

Une réponse à Gestion des ressources client-side : WebJars & CDN

  1. C’est pratique les Webjars, on peut les utiliser dans Play 2.0 aussi.

    Sinon côté client aussi, JavaScript commence à être outillé. notamment avec Bower (de twitter) qui fait de la gestion de dépendances. :-)

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)

Laisser un commentaire