Bower : un gestionnaire de dépendances pour le web

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 :

• npm (Node.js)
• Volo
• Jam
• Ender

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.

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
• dependencieshash : 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
• privatebooléen : true si vous voulez garder le package privé

bower search <package>

bower install [<options>]

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

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

bower list

bower ls

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

bower update

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

bower info <package>

bower info <package> [<property>]

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

<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>

bower register <name> <url>

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