Bonjour,
Dans un article précédent, nous avons parlé du côté back-end de notre application. Mais si vous nous lisez et que vous ne venez pas du monde de l’informatique, alors cela ne vous a peut-être pas vraiment interessé. Après tout, nous avons parlé d’une application API que vous n’utiliserez jamais ! Du moins, pas directement. :p
En effet, l’application que vous utilisez est notre application dite « front-end », et c’est elle qui communique avec l’API ! Nous allons vous présenter un peu les technologies utilisées pour cette partie.
Nous avons choisi AngularJS
AngularJS est un framework complet pour le développement d’applications web dynamiques. Via un service assez simplement mis en place, l’application AngularJS envoie des requêtes à notre application côté serveur et affiche les données à l’utilisateur.
AngularJS est un outil utilisé par beaucoup et je l’utilise notamment moi-même en entreprise. Nous avons aussi eu des cours d’initiation à ce framework lors du Master.
Angular est maintenu en grande partie par Google. Plus d’infos à cette adresse : https://angularjs.org/.
Et pourquoi pas Angular 2 ?
Angular2 est sorti déjà depuis quelques temps mais n’est pas réellement la suite de Angular car cette version se base sur beaucoup de concepts différents. De ce fait, connaître AngularJS premier-du-nom n’est pas forcément d’une grande aide pour l’apprentissage d’Angular2 et ce dernier demande du temps pour se former.
Nous avons donc décidé de continuer sur une technologie dont on avait déjà eu une initiation, sachant qu’elle était encore grandement utilisée dans le web et que celle-ci convenait amplement à notre projet.
Outils divers pour AngularJS
Yeoman
Pour construire notre application, nous avons utilisé un outil nommé Yeoman (http://yeoman.io/). Ce programme est installable sur NodeJS avec NPM et permet en une ligne de commande de générer un squelette d’application AngularJS (ou autre framework) fonctionnel et prêt à coder. Nous avons gagné du temps grâce à cet outil pour les configurations pour le déploiement etc… tout en nous assurant de placer nos fichiers de façon propre en utilisant l’arborescence générée par Yeoman.
Grunt
Yeoman génère aussi les fichiers de configuration de Grunt (https://gruntjs.com/) qui est un automatiseur de tâches. En définissant des tâches simples telles que « Construire » ou « Lancer », il nous suffit d’une seule commande (par exemple grunt build) pour que Grunt lise les différentes actions à effectuer (dans notre exemple: minifier le code, compiler le code SASS, etc…) et ainsi récupérer une application prête à être déposée en production !
Sass
Yeoman nous propose aussi d’intégrer dans notre projet, le pré-processeur CSS nommé Sass (http://sass-lang.com/). CSS étant un langage peu flexible, il est possible d’écrire son code de style en SCSS et Sass s’occupe de faire la traduction. Nous l’avons utilisé majoritairement pour les variables de couleurs (qui fonctionnent de la même que les variables dans les langages de programmation) ainsi que pour les règles de style imbriquées.
Conclusion
Côté front, nous avons utilisé des technologies connues et éprouvées et sommes contents du résultat. Nous avons passé peu de temps à l’installation du projet côté front, et permis de nous consacrer sur le développement.
A bientôt ! 🙂