Bower : un gestionnaire de dépendances pour le web

Bower

Si vous faites du développement web, vous utilisez certainement tout un tas de dépendances – bibliothèques et/ou frameworks JavaScript, CSS et autres joyeusetés packagées – dans vos projets. Il vous faut mettre à jour les versions, gérer les dépendances entre modules (par exemple charger jQuery avant ses plug-ins) et cela peut devenir vite fastidieux. C’est là que Bower intervient.

What is it about ?

En bref, Bower c’est quoi ?

Cargo de nuit !

Trente-cinq jours sans voir la terre.

Pull rayé, mal rasé.

On vient de débarquer…

Je vous vois venir ! Rien à voir avec Axel ou Jack, l’orthographe n’est pas la même… Mais, puisque vous venez de débarquer, attardez-vous un instant et profitez de ce moment pour découvrir ce que Bower peut vous apporter dans votre dur labeur web front-end.

D’abord c’est quoi un gestionnaire de dépendances ? C’est un outil qui gère les dépendances de votre projet (Captain Obvious à la rescousse), ce qui consiste principalement en l’installation, la désinstallation et la mise à jour de ces dépendances ; c’est un outil qui permet également la création d’un package (votre projet) qui pourra être distribué. Qu’est-ce qu’une dépendance en web ? Des fichiers JavaScript, CSS, HTML, etc.

Bower est donc un gestionnaire de packages, et plus précisément de dépendances web, créé par les équipes Twitter – d’où la référence oiselesque aux Bowerbirds –  avec entre autres contributeurs @fat (Bootstrap Twitter), James Burke (RequireJS), Paul Irish (spécialiste HTML5/CSS3 et évangélisateur de Google Chrome), Addy Osmani (Yeoman). Il permet de chercher, télécharger et installer les packages depuis leur dépôt (GitHub, SubVersion, URL, répertoire local, …) et de gérer leurs dépendances. Bower est optimisé pour le front-end, il utilise un arbre de dépendance plat ne nécessitant qu’une occurrence de chaque package et réduit ainsi le chargement de la page à son minimum.

Dans cet article, vous allez apprendre comment installer et utiliser Bower sous Windows. Bower s’utilise également sous Linux et les commandes présentées ici restent valables.

Bower, tout seul sur le marché ?

Bower n’est pas le seul outil disponible. Pour n’en citer que quelques-uns :

Tous sont des gestionnaires de packages, chacun ayant ses spécificités, ses avantages et ses inconvénients. Alors pourquoi Bower plutôt qu’un autre ?

  1. Parce que votre serviteur ne connait pour l’instant que Bower (BIM!)
  2. Parce que Bower est optimisé front-end et ne charge que le minimum (contrairement à npm, nous en reparlerons plus tard)
  3. Parce que Bower a le vent en poupe (simple ; efficace ; couplage GitHub ; estampillé Twitter, bonne promotion ^^)

Optimisé pour le front-end ?

Hé, hé, hé… Que dites-vous là, mon bon monsieur ?

Ce qu’on entend par là, c’est que Bower gère les packages – ou composants dans le vocable front-end de Bower – de manière à ce qu’il n’y ait qu’une seule occurrence de chaque. De cette façon, on évite des inclusions multiples d’un même composant (par exemple plusieurs jQuery, de la même version ou pas).

Comment cela se traduit-il ? Et bien contrairement à npm qui charge un package avec l’arbre complet de ses dépendances, Bower liste les dépendances de chaque package et indique s’ils sont installés (présents) dans le projet. A de l’utilisateur de charger les dépendances, mais Bower préserve ainsi l’unicité de chaque package/dépendance. De plus, comme chaque package peut indiquer les versions acceptées de ses dépendances (par exemple Bootstrap requiert jQuery >= 1.9.0), Bower est capable d’indiquer (via le listing des packages) les incompatibilités éventuelles dans votre projet.

Avant de commencer

Prérequis (1) : Node.js

Bower est un module Node.js.

Très (mais alors très) rapidement, qu’est-ce que Node.js ? Petite citation Wikipédique :

Node.js est une plateforme logicielle libre et événementielle en JavaScript orientée vers les applications réseau qui doivent pouvoir monter en charge. Elle utilise la machine virtuelle V8 et implémente sous licence MIT les spécifications CommonJS. Node.js contient une bibliothèque de serveur HTTP intégrée, ce qui rend possible de faire tourner un serveur web sans avoir besoin d’un logiciel externe comme Apache ou Lighttpd, et permettant de mieux contrôler la façon dont le serveur web fonctionne.

Bower étant – comme dit précédemment – un module Node.js, cela implique que :

  • Bower est un package – au sens Node.js/npm – JavaScript
  • l’installation de Bower passe par Node.js et son gestionnaire de package, npm (Node Package Manager)

Déduction faite de tout ceci ? Le prérequis à l’installation de Bower est que vous disposiez de Node.js et npm sur votre poste de travail !

Pour installer Node.js dans votre environnement préféré (Windows, Mac OS X, Linux, Solaris), visitez le site officiel de Node.js.

Pour vous documenter sur l’utilisation de npm, visitez le site officiel de npm.

Prérequis (2) : Git

Il n’est pas obligatoire d’installer Git, à moins évidemment que les packages à gérer proviennent de GitHub. Il est tout de même conseillé d’installer Git étant donné que Bower s’appuie sur le dépôt GitHub pour la recherche des packages.

Pour installer Git dans votre environnement préféré (Windows, Mac OS X, Linux, Solaris), visitez le site officiel de Git.

Installer Bower

Ouvrez une console Windows ou l’invite de commande et exécutez la commande suivante :
 

npm install -g bower

 
En quelques instants tout est installé.

 

That’s all, folks !

 

Ok c’est tout, c’est simple, et l’utilitaire npm de Node.js n’est pas le sujet de cette article, mais prenons tout de même un instant pour comprendre ce qu’il s’est passé… La commande est facile à comprendre à l’option « -g » près.

Vous avez deux manières d’installer des modules avec npm :

  1. Localement : la dépendance est installée dans le répertoire node_modules local au répertoire de travail courant.
  2. Globalement : la dépendance est installée dans le répertoire [PATH_NPM]/node_modules. L’option d’installation globale est « -g » ou « –global ».

Et la Lumière Divine vous éclaire et vous comprenez que nous installons Bower globalement car celui-ci n’est pas lié à un projet, mais sera utilisé comme outil transverse !

Débuter avec Bower

Environnement de travail

Votre serviteur travaillant sous Windows, les illustrations de cet article montrent des écrans Windows. Cependant, tous les concepts et toutes les commandes présentées sont applicables sous Mac OS X, Linux et Solaris. Ce dont vous avez besoin est d’une application en ligne de commande (invite de commande Windows, Windows PowerShell, Terminal, etc.).

Dans la suite de cet article, nous travaillerons dans le répertoire D:\Projets\demo_web.

Obtenir de l’aide

Bower est un utilitaire en ligne de commande. Dans cet article, vous seront présentées les principales commandes. Si vous avez besoin d’une aide :

  1. Utilisez la commande help
  2. Consultez la documentation de l’API bower
  3. Cherchez de l’aide via votre moteur de recherche favori avec les mots-clés adaptés.

Créer le manifeste de votre projet

Les packages sont définis dans un fichier manifeste bower.json à la racine de votre projet, de la même manière que le package.json de Node.js ou le GemFile de Ruby.

Sans ce fichier, vous pouvez quand même charger dans votre projet des packages. Par contre, vous ne pourrez pas les lister, les mettre à jour, les supprimer ou obtenir des informations sur ces packages avec Bower. Autant dire que, dans ce cas, Bower perd grandement – voire totalement – son intérêt. Les développeurs .NET, par exemple, pourront tout bonnement charger une partie de leurs dépendances web via NuGet et basta…

Vous pouvez créer ce fichier vous-même avec votre éditeur de texte préféré. Mais si avec l’Apple Store il existe aussi une application pour ça, avec Bower il existe aussi une commande pour ça :
 

bower init

 
Vous pouvez personnaliser le fichier à la création ou simplement garder les valeurs par défaut qui vous sont proposés.

bower-init

Les options basiques proposées à la création sont :

  • name (obligatoire) : Le nom de votre package/projet
  • version : Un numéro de version sémantique (MAJOR.MINOR.PATCH, voir semver)
  • main chaîne ou tableau : Les endpoints principaux de votre package/projet. Typiquement, les fichiers, non versionnés et non minifiés, nécessaires à l’utilisation de votre package
  • ignore tableau : Un tableau des chemins non nécessaires en production que vous voulez que Bower ignore quand vous installez votre package
  • dependencies hash : Les dépendances qui seront prises en compte dans le package de production
  • devDependencies hash : Les dépendances qui ne seront pas prises en compte dans le package de production
  • private booléen : true si vous voulez garder le package privé

Pour plus de détails sur les options de bower.json, je vous renvoie à la spécification :

Chercher un package

Vous pouvez rechercher vos packages préférés sur GitHub de deux manières :

  1. La page web de recherche de composants
  2. L’utilitaire en ligne de commande

 

bower search <package>

 
Dans les deux cas, la recherche vous donne l’url du dépôt GitHub du package recherché (d’où l’intérêt d’installer Git plus tôt).

Installer un package

Pour installer les dépendances du projet ou un ensemble spécifique d’endpoints :
 

bower install [<options>]
bower install <endpoint> [<endpoint> ...] [<options>]

 

Un endpoint peut prendre l’une des formes suivantes :

  • <package>
  • <package>#<version>
  • <name>=<package>#<version>

  • <package> est une URL, un répertoire physique, un endpoint ou un raccourci de endpoint Git
  • <version> est un intervalle valide, un tag, une branche, etc.
  • <name> est le nom qu’il devrait avoir localement

Par exemple, pour installer une version spécifique de jQuery (v1.5.0) :

jquery1.5.0

ou pour installer la dernière release sans en préciser la version (actuellement v2.1.1) :

jquery2.1.1

Si vous éditez le fichier bower.json de votre projet, vous remarquez qu’il n’a pas été modifié et que la dépendance jQuery n’a pas été ajoutée. Pour que les dépendances soient enregistrées, il faut le préciser par l’option « -S » ou « –save » !

Les options d’install :

  • -F–force-latest : Force la dernière version en cas de conflit
  • -p–production : N’installe pas les « devDependencies » du package
  • -S, –save : Enregistre les packages installés dans les « dependencies » du manifeste bower.json du projet
  • -D, –save-dev : Enregistre les packages installés dans les « devDependencies » du manifeste bower.json du projet

 Désinstaller un package

Pour désinstaller un package :
 

bower uninstall <name> [<name> ...] [<options>]

 
uninstall

Les options d’uninstall :

  • -S–save : Supprime les packages désinstallés des « dependencies » du manifeste bower.json du projet
  • -D–save-dev : Supprime les packages désinstallés des « devDependencies » du manifeste bower.json du projet

Lister les packages

Pour obtenir la liste des dépendances de votre projet sous forme arborescente – chaque dépendance listant ses propres dépendances :
 

bower list
bower ls

 
list

Ah ?! Notre ami Bower a détecté qu’il manque une dépendance à l’une de vos dépendancesJ. En effet, Bootstrap requiert l’installation de jQuery. Mieux encore, Bootstrap 3.2.0 requiert l’installation d’une version supérieure ou égale à jQuery 1.9.0 si vous regardez de plus près le manifeste bower.json du package Bootstrap :

 

"dependencies": {
  "jquery": ">= 1.9.0"
}

 

Listez vos dépendances après avoir installé jQuery et vous verrez qu’il n’y a plus d’alerte.

list2

A cet arbre de dépendances correspond l’arborescence de répertoires suivant :

arborescence

Les options de list :

  • -p–paths : Génère un hash JSON des dépendances avec pour chacune la liste des « main » ou le « main » (endpoints principaux du package, cf. bower.json du package)
  • -r–relative : Génère l’arborescence des dépendances avec des chemins relatifs au répertoire d’installation des composants bower, par défaut bower_components. (Fake ! Mettre ou ne pas mettre cette option vous donne le même résultat…)

J’ajoute à cette liste l’option « -j, –json » découverte par hasard (j’étais fatigué et j’ai confondu r et j… Ouais oh, ça va !) et non référencée :

  • -j, –json : Génère un hash JSON donnant des informations sur votre projet et toutes l’arborescence des dépendances. Ce hash contient entre autres l’intégralité des manifestes bower.json de tous les composants de votre projet.

Mettre à jour un package

Pour mettre à jour des packages dans leur version la plus récente :
 

bower update
bower update <name> [<name> ...] [<options>]

 
update

Si vous n’indiquez pas de package en particulier à mettre à jour, la commande s’applique à tous les packages.

Les options d’update :

  • -F–force-latest : Force la dernière version en cas de conflit
  • -p–production : N’installe pas les « devDependencies » du package

Voir les informations disponibles pour un package

Pour afficher le manifeste bower.json de la dernière version d’un package ou connaitre la liste des versions disponibles :
 

bower info <package>
bower info <package> [<property>]
bower info <package>#<version> [<property>]

 
info

Utiliser un package

Bower est une aide à la gestion des dépendances dans vos projets web. Il ne permet pas de gérer les inclusions de ces dépendances dans votre code (inclusion des scripts, feuilles de styles, etc. dans le HTML par exemple), de minifier des fichiers ou de les concaténer dans un seul fichier.

Il existe cependant d’autres utilitaires pour cela comme Grunt ou Yeoman (qui s’appuie sur Bower). Grunt, par exemple, est un outil permettant d’automatiser des tâches que vous définissez en JavaScript. Il dispose d’un grand nombre de plug-ins parmi lesquels :

  • grunt-bower-install : Injection des dépendances Bower directement dans les fichiers HTML spécifiés
  • grunt-contrib-uglify : Minification de fichiers avec UglifyJS
  • grunt-contrib-less : Compilation de fichiers LESS en CSS
  • grunt-contrib-sass : Compilation de fichiers SASS en CSS

Mais tant que vous n’avez pas d’outils de ce type, vous devrez inclure vous-même les dépendances à vos pages web.

 

<link rel="stylesheet" href="bower_component/jquery/dist/css/bootstrap.min.css" />
<script src="bower_component/jquery/dist/jquery.min.js"></script>
<script src="bower_component/bootstrap/dist/js/bootstrap.min.js"></script>

 

Créer un package

Pour créer un package Bower :

 

  1. Prérequis :
    1. Un manifeste bower.json valide à la racine de votre projet
    2. Un numéro de version semver valide (pour le Git tag)
    3. Un endpoint Git valide
  2. Enregistrement du package

 

bower register <name> <url>

 

Configurer Bower

Vous pouvez personnaliser la configuration de Bower en créant à la racine de votre projet, au même niveau que le manifeste bower.json, un fichier .bowerrc contenant un hash JSON des propriétés que vous souhaitez modifier (ici le répertoire d’installation des packages et le timeout en millisecondes lors des requêtes) :
 

{
  "directory": "mycustomfolder_bower_component",
  "timeout": 120000
}

 
Vous trouverez dans la documentation de la configuration la liste des propriétés que vous pouvez modifier.

Qu’en retenir ?

Bower est un package JavaScript Node.js et s’installe via le gestionnaire de package de Node.js, npm.

Bower et son manifeste bower.json sont supportés par nombre de projets sur GitHub, ce qui vous assure un pool non négligeable de dépendances facilement gérées par Bower.

Bower est un gestionnaire de dépendances web optimisé front-end. Il charge les packages sans leurs dépendances dont le chargement est laissé à vos bons soins et indique s’ils en manquent (soit parce que la dépendance n’est pas chargée, soit parce qu’elle est présente mais dans une version non compatible). Cela permet de réduire au strict minimum les packages dans votre projet, sans doublon.

Bower vous permet de gagner énormément de temps – en vous simplifiant notamment la recherche, l’ajout, la suppression et la mise à jour des dépendances de vos projets web – afin que vous puissiez vous recentrer sur votre cœur de métier : le développement web !
 

Nombre de vue : 1865

COMMENTAIRES 8 commentaires

  1. Rémi Doolaeghe dit :

    Très bon article pour apprendre et découvrir ce qu’est Bower.

    A mon sens, il manque néanmoins quelques points. A la lecture de cet article, et ne connaissant pas Bower, l’outil me donne l’impression de devoir installer moi-même les packages dont mon projet dépend. N’est-ce pas automatisable par l’outil, à l’instar d’un maven ?

    Il est également mentionné que les dépendances peuvent être gérées par grunt ou yeoman, par exemple. Quel est donc la force de l’outil Bower s’il lui fait un compagnon pour faire ce que sait de toute façon déja faire maven ?

    Je passe probablement à côté de tas de fonctionnalités proposées par Bower, mais l’impression qu’il me laisse est qu’il essaie de réinventer la roue, mais en la créant carrée. On risque de payer cher en amortisseur…

  2. Bonjour Rémi

    Tout dépend de la définition de la gestion des dépendances. Il s’agit ici de :
    – charger les packages dans le répertoire de la solution
    – gérer les versions
    – gérer les dépendances de chaque package

    C’est ce que fait Bower.

    Je ne peux pas me prononcer sur Maven, mais à mon sens Bower est meilleur que Nuget (Visual Studio) ou npm pour gérer des dépendances Web car il est optimisé et dédié à cette tâche.
    – Nuget est moins pratique pour la gestion des versions et met tout en vrac dans le répertoire Script
    – npm charge toute l’arborescence des dépendances de chaque package. Cela induit une redondance des packages

    Quant à Grunt et Yeoman, ils ne gèrent pas les dépendances. Ce sont des outils complémentaires de Bower pour aller plus loin dans l’automatisation d’un projet web :
    Bower pour gérer les dépendances
    Grunt pour automatiser certaines tâches via celles de vos dépendances qui sont des plugins Grunt
    Yo pour créer le squelette de l’application, écrire la configuration Grunt et déterminer les tâches Grunt et les dépendances Bower pertinentes
    Yeoman pour les contrôler tous !

  3. Rémi Doolaeghe dit :

    Bonjour Nourdine,

    Ce n’était pas tout à fait ma question. Je la reformule pour plus de clarté : De ce que je comprends, Bower permet d’installer des dépendances en un claquement de doigt avec une simple commande. Ca, c’est très bien pour le développeur qui ajoute une dépendance au projet. Ce développeur committe ensuite son développement avec cette nouvelle dépendance sur un gestionnaire de sources quelconque.
    Mettons maintenant qu’un autre développeur récupère ces sources. Lui n’a pas cette dépendance. Doit-il alors à son tour exécuter la même commande que son comparse pour installer la dépendance sur son poste ?

    Si c’est le cas, je crains un peu le plat de spaghetti, dans le sens où un checkout devra s’ensuivre de l’installation manuelle de toutes les dépendances du projet. Il faut donc non seulement les connaître, mais aussi les installer soi-même. Est-ce possible, avec Bower, d’éviter tout ce travail fastidieux ? A moins que Grunt ne s’en charge ?

    Si je compare avec Maven, c’est que cet outil fait aussi de la gestion de dépendance, mais de façon déclarative. Un fichier de configuration, appelé le POM, accompagne chaque projet et décrit les dépendances. C’est ensuite à Maven de se débrouiller pour télécharger lesdites dépendances sans aucune intervention de l’utilisateur. J’ai donc l’impression qu’il faut utiliser le couple Bower + Grunt pour obtenir un résultat au mieux aussi bon que ce que Maven sait déjà faire depuis des années.

    Qu’en penses-tu ? Peux-tu m’éclairer ?

  4. Si je comprend le fonctionnement de Maven, ce n’est pas très éloigné de Bower. Bower est autonome pour gérer ses dépendances.

    – le fichier de configuration accompagnant le projet et décrivant les dépendances se nomme bower.json
    – la commande bower install, sans préciser de endpoint, permet de lire ce fichier et d’installer toutes les dépendances qu’il décrit

    Résultat, pour un développeur qui récupère un projet sans les dépendances :

    – soit il lance manuellement la commande bower install
    – soit la commande est lancée de manière automatique à un moment donné : à la fin de la récupération des sources, au build de la solution (config Visual Studio pour un projet .NET), etc.

  5. Rémi Doolaeghe dit :

    Ca répond à mon interrogation initiale. Pour tout te dire, maven fonctionne sensiblement de la même façon. A l’instar d’un bower.json, maven a un descripteur appelé pom.xml (Project Object Model) qui indique une liste de dépendance et une liste de plugins à exécuter (les plugins maven servent à effectuer toute action qu’il est possible d’imaginer pour effectuer un build).

    Egalement à la façon de bower, maven installe l’ensemble de ses dépendances lors de la phase de compilation qu’il est possible de lancer (en vulgarisant légèrement) avec une commande mvn install.

    Je pense que les plugins maven, dans le cas de Bower, sont en fait équivalents aux plugins Grunt (si j’ai bien tout suivi). Je pense donc qu’on a une quasi-équivalence (à quelques détails près) entre maven et le couple Bower + Grunt.

    Merci pour ces éclaircissements !

  6. G. Ghez dit :

    C’est rare des articles aussi complets en français, beau travail.

  7. […] La gestion des dépendances web : cf. Bower […]

  8. […] Dans Yeoman, le gestionnaire de dépendances, c’est bower. Cet outil a récemment fait l’objet d’un article ici. […]

AJOUTER UN COMMENTAIRE