Bootstrap et AngularJS

Le projet

Parti d’une idée révolutionnaire : coder en VB.NET une application pour proposer des cours et des QCMs en ligne incluant des fonctionnalités incontournables telles que la météo, des pronostics hippiques et une liste de provisions animée en 3D. Au final : un petit QCM introduisant d’ennuyeux outils tels que Bootstrap, LESS et AngularJS.

Pour ceux qui n’aiment pas la littérature, voici déjà le code.

Bootstrap

Qu’est-ce qu’un bootstrap?

D’après wikipedia des bootstraps sont “les anneaux, en cuir ou en tissu, cousus sur le rebord des bottes et dans lesquels on passe les doigts pour s’aider à les enfiler”.

En logiciel c’est aussi le petit bout de code qui va servir à en amorcer un plus important, on en trouve par exemple parmi les classloaders d’un serveur Tomcat.

Qu’est-ce que Bootstrap?

Bootstrap est un framework CSS dévelopé par et pour Twitter. La page d’accueil du projet vante de nombreuses qualités, parmi lesquelles son support du design “en grille”, son utilisation de LESS et son support cross-browser.

Bootstrap (ou Twitter Bootstrap ou BS) est conçu comme son nom l’indique pour permettre le démarrage rapide d’un projet d’interface web. Grâce à de tels frameworks (voir également Blueprint) le développeur web n’est plus seul face à sa feuille CSS vide, repartant perpétuellement de zéro ou presque. Il a la possibilité de mettre en place très rapidement la structure de ses vues avec un design simple et standard, quitte à entrer par la suite dans des détails de personnalisation.

Le design avec Bootstrap

Arrivé ici comment commencer? Ironiquement, au moment où ces lignes sont écrites, le framework CSS à “démarrage rapide” manque toujours d’un bête “Getting started” sur son site officiel pour savoir comment se lancer. A défaut, on démarre donc en récupérant le code d’un des exemples fournis.

La navbar

La navbar, souvent de couleur sombre, est une des premières choses qui trahit l’utilisation du framework par un site. En effet celui-ci, bien que totalement personnalisable, suggère fortement un certain design “à la Twitter” dont la barre de navigation sombre et large est un des éléments les plus reconnaissables. Soit.

La grille

Le reste de la page se met en place sous forme de grille : la grille standard fait 12 cases de large (valeur paramétrable), réparties sur un nombre indéfini de lignes. On peut regrouper ces 12 cases pour former, sur chaque ligne, autant de blocs que souhaité. Chacun de ces blocs est ensuite lui-même divisible en lignes et en blocs.Le résultat est visible sur l’écran des questions.

Techniquement cette grille se matérialise à l’aide de classes fournies par le framework : principalement row pour une ligne et spanN où N est le nombre de cases qu’un bloc donné doit occuper en largeur.

<div class="row"></div>

On constate avec émerveillement que tout se met en place assez facilement et s’aligne au pixel près, les options proposées dans la doc fonctionnent comme prévu: on monte ses premiers écrans sans difficultés particulières. Evidemment le design nous rappelle vaguement quelque-chose mais on se garde la customisation pour plus tard.

Les petits pictogrammes

Sympathique mini-feature du framework, des sprites contenant plusieurs dizaines d’icônes prêtes à l’emploi sont fournies, ainsi que les classes CSS qui permettent de les mettre en place rapidement.

Très léger car la sprite pèse entre 8 et 13Ko, mais expressif et plutôt élégant. exemple d’utilisation : encore la liste des questions. En dehors de ces trois exemples il reste encore de nombreux outils dans la boîte: tableaux, validation, boutons …

LESS : mise en place et customisation

Une fois le projet de base “Bootstrappé”, nous vient l’envie de nous écarter un tant soit peu du design par défaut. Il est bien sûr tout à fait possible de se contenter d’ajouter une feuille CSS supplémentaire regroupant ces customisations. Il serait cependant dommage de partir sans avoir fait un petit tour dans LESS.

L’usage de LESS est manifestement encouragé par les développeurs de Bootstrap, une section du site officiel lui étant dédiée. Si vous avez lu l’article parlant de SASS sur ce même blog, vous savez déjà ce qu’est LESS : un “préprocessor” pour CSS conçu pour étendre un langage souvent un peu limité.

Dans la pratique on va écrire des fichiers .less qui sont ensuite transformés en fichiers .css. En mode développement, afin d’automatiser l’étape de compilation, on pourra directement inclure les fichiers .less dans le HTML comme des .css, en ajoutant également le compilateur Javascript qui effectuera la transformation automatiquement au chargement de la page.

1
2
<link rel="stylesheet/less" href="less/main.less" /> 
<script src="js/lib/less-1.3.0.min.js"></script>

Il existe également un compilateur LESS en ligne de commande : lessc qui permet d’inclure cette étape de manière automatisée dans un cycle de build par exemple.

Parmi les quelques dizaines de fichiers .less que fournit Bootstrap (pour la version intégrale car une partie est optionnelle) on en trouve deux principaux.

Le fichier “racine” bootstrap.less qui est celui qu’il faudra inclure dans le HTML car c’est lui qui importe (via le mécanisme LESS des @import) le reste des .less du framework. Il est aussi possible de l’importer à son tour dans notre fichier .less (qu’on a originalement nommé “main.less” dans l’exemple) afin de l’étendre.

Le second fichier .less à noter s’appelle variables.less. Il regroupe comme son nom l’indique un ensemble de variables LESS représentant les principaux paramètres du design mis en place par BS : la taille de la grille, les couleurs, les marges standard … c’est le fichier de configuration du framework.

Angular

Qu’est-ce qu’Angular?

Un autre membre de la famille des frameworks javascript MVC. Qu’a-t-il de différent? Il se vante d’étendre le HTML plutôt que de l’abstraire. D’après son nom, il est voué à être l’élément indispensable de l’interface d’un projet. Rien que ça.

La logique avec Angular

Armés de notre beau HTML statique et riches de toute cette nouvelle expérience CSS/LESS, on se dit que tout cela est un peu triste si on ne peut pas cliquer partout. C’est là qu’intervient Angular, qui va nous permettre d’insuffler un peu de vie dans ce triste monde minéral.

Intégration HTML

Angular s’insère dans les pages HTML de deux manières : via des directives et des expressions.

Les directives sont des attributs HTML regroupés dans le namespace ng-* et qui permettent d’ajouter du comportement. Dans le code suivant :

1
<span ng-repeat="label in labels" >{{label}}</span>

la directive ng-repeat permettra d’obtenir autant de <span /> que de labels dans le tableau du même nom, issu du modèle.

Il existe dans le framework toute une collection de directives de ce genre prêtes à l’emploi et il est également possible d’en créer d’autres au besoin. La force de cette notation est qu’il est alors très simple d’ajouter de la logique dans des pages tout en conservant un HTML valide; les puristes iront jusqu’à utiliser la notation data-ng-* plutôt que ng-* qui bien qu’équivalente n’est pas strictement valide HTML5.

La seconde méthode d’injection du modèle dans les vues, complémentaire de la première, se fait sous forme d’expressions entre {{ }}, un mécanisme omniprésent sur le web, cf. les JSP, pour ne parler que d’elles.

Dans les deux cas le framework assure un binding bidirectionnel entre une vue donnée et le modèle qui y est déclaré. Une fonctionnalité qui se retrouve dans d’autres frameworks Javascript modernes, ou même dans Flex.

La modularité

Angular nous permet de (et nous enjoint à) découper notre code javascript en modules interdépendants et aux responsabilités distinctes.

Dans l’application d’exemple on trouvera donc des modules de “services” distincts pour les codes correspondant respectivement au compte utilisateur (playerService) et à la partie QCM proprement dire (questionService). Chacun de ces deux modules dépendront d’autres modules permettant la communication avec un serveur (playerResource et questionResource).

Angular ne fournit pas de mécanisme permettant de charger les fichiers JS de manière asynchrone. En revanche le fait de déclarer chaque module sous forme de factory fait qu’il n’est instancié que lorsqu’un autre module le déclarant en tant que dépendance est lui-même utilisé.

https://github.com/amdjs/amdjs-api/wiki/AMD

En outre ce découpage facilite l’écriture de tests unitaires.

MVC

Si vous êtes un minimum familier de frameworks MVC (Spring MVC?), vous ne serez pas déroutés en ouvrant le fichier controllers.js.

Comme son nom l’indique, il regroupe le code des contrôleurs, éléments en charge de faire le lien entre le modèle provenant des services et les vues. Dans ce projet on trouve donc un “SetupCtrl” pour l’écran des infos personnelles, un “QuestionCtrl” pour la vue des questions et un troisième “MainCtrl” qui pilote la barre de statut. Chacun de ces controllers gère son propre scope. Les mappings d’urls (routes) vers ces différents contrôleurs sont configurés dans le module principal qcm-app, dans app.js.

angular.module('qcm-app', ['question-service', 'player-service'])
.config(function ($routeProvider) {
$routeProvider.
when('/index', {controller:SetupCtrl, templateUrl:'setup.html'}).
when('/start', {controller:QuestionCtrl, templateUrl:'questions.html'}).
when('/scores', {controller:ScoresCtrl, templateUrl:'scores.html'}).
otherwise({redirectTo:'/index'});
});

Ce module principal déclare comme dépendances les modules de services “question-service” et “player-service” utilisés pendant le setup et la phase de questions. Dans le cadre de ce mini-projet les interactions avec le serveur sont bouchonnées par facilité (d’où le peu d’intérêt de ses fichiers *-resource.js). Le framework propose toutefois des services facilitant la communication HTTP : $resource conçu pour s’interfacer avec des ressources RESTful et $http, de plus bas niveau.

Conclusion

Cet article est encore loin d’aborder tous les points intéressants de ces deux frameworks.

Bootstrap, malgré un démarrage pas tout à fait évident, possède une documentation très complète, ce framework regorge de petits (et grands) composants élégants et prêts à l’emploi, à un point qu’on en est presque tenté d’en remplir ses pages pour le plaisir de les voir s’imbriquer magiquement.

La documentation d’Angular fait assez pâle figure de mon point de vue, d’autant qu’elle est réputée ne pas être mise à jour aussi souvent que le code qu’elle décrit. Bien qu’un peu moins facile à prendre en main que Bootstrap, le binding, la modularité et la simplicité de l’intégration HTML m’ont beaucoup plu.

 

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

Laisser un commentaire