Blog technique Wizaplace

Migration du Starter Kit vers Bootstrap 4

Par Serge le 4 April 2018

Passage de Bootstrap 3 à bootstrap 4

TL;DR: Franchement ça va, on s’attendait à pire.

Dans notre workflow, le Starter Kit est l’élément qui sert de base de départ à tous les projets ‘fronts’ réalisés sur-mesure. Il définit donc la stack sur laquelle vont s’appuyer les développeurs et intégrateurs d’un nouveau projet, ce qui comprend les composants développés en interne mais également les bibliothèques CSS et Javascript open source du marché. —

Nous avons récemment décidé de mettre à jour cette stack et notamment de passer de Bootstrap 3 à Bootstrap 4 pour bénéficier des pratiques modernes du développement front.
Les premières annonces de développement de cette version datant d’un peu plus de trois ans (du 29 octobre 2014 selon Wikipedia), soit la moitié d’une éternité dans le monde du développement web de nos jours, nous appréhendions quelque peu cette opération de mise à jour.

Pendant que l’expérience est encore chaude, voici donc un aperçu de la manière dont nous nous y sommes pris pour réaliser la migration.

N’ayant pas vraiment besoin de customiser la partie javascript de Bootstrap, l’un des plus gros changements à prendre en compte était le passage du pré-processeur css du format less au format sass.
La première étape a donc été de faire le tour du code existant pour voir l’impact de ce changement.

Première bonne surprise, dans l’ensemble du code spécifique du Starter Kit, la seule modification a été de “convertir” l’interpolation des variables.
Au delà du terme savant, il faut en réalité comprendre que le travail a seulement consisté à remplacer des @ par des $ un peu à droite à gauche, et à modifier les extensions de fichiers .less en .scss

Pour dire, la plus grosse difficulté de cette étape a été la conversion de cette ligne :
width: calc(~'100% - (@{handle-width} + (@{handle-border-width}))');
en
width: calc(100% - (#{$handle-width} + #{$handle-border-width}));
Le point à prendre en compte étant le fonctionnement différent de sass par raport à less dans une fonction css calc().

Par design le Starter Kit inclut de toute façon assez peu de code spécifique.
Sa mission est de fournir une base minimum sur laquelle vont venir s’appuyer les intégrateurs.

C’est donc plutôt du côté des bibliothèques externes que nous pensions avoir le plus de travail.
Mais, seconde bonne surprise, n’ayant quasiment pas besoin de personnaliser les bibliothèques, nous utilisons des versions déjà compilées, sur lesquelles aucune intervention n’est nécessaire…
Après en avoir fait le tour, seule la bibliothèque bootstrap-star-rating utilisait des icones désormais indisponibles dans Bootstrap 4.
Il nous a suffit en réalité de remplacer ces icones avec ceux d’une autre bibliothèque que nous utilisions déjà par ailleurs : Font Awesome, et le tour était joué.

Comme les fichiers .less, les fichiers .scss ne sont pas utilisables tels quels par un navigateur Web, il faut donc les transformer en .css.
Pour cela nous utilisons le task runner Gulp qui était de toute façon déjà configuré pour compiler des fichiers .less. La tâche qui réalisait cette opération utilisait la bibliothèque gulp-less que nous avons simplement remplacé par la bibliothèque gulp-sass.
Après avoir mis à jour le fichier package.json, modifié deux ou trois commentaires et extensions écrites en dur dans le fichier gulpfile.js, l’opération était terminée.

Nous avions désormais de quoi travailler vraiment sur les différences apportées par Bootstrap 4.
Là encore le travail a été plutôt simple et les différences se repéraient visuellement assez facilement, comme par exemple l’inversion du titre et du bouton de fermeture d’une modale ou les classes de pagination dont les noms ont changés.
La modification qui nous a demandé le plus de concentration correspond à un changement de philosophie de la bibliothèque. Au lieu de cibler uniquement une dimension d’écran précise, désormais les helpers concernent le breakpoint ciblé par un mot clé, comme avant, mais également tous les breakpoints supérieurs.
Avant, si nous voulions avant cacher un élément à partir d’un certain breakpoint, il fallait par exemple lui ajouter les classes hidden-md et hidden-lg.
Aujourd’hui, il suffirait d’utiliser la classe d-md-none qui s’appliquera aux écran md et supérieurs.

Pour faire un bilan rapide, la migration qui pouvait faire un peu peur au premier abord s’est finalement assez bien passée. Il faut bien avouer que le Starter Kit ne comporte que très peu de code concernant le design, ce qui a grandement limité les manipulations de type recherche/remplace.
Le plus long reste désormais à s’approprier les nouveautés de Bootstrap 4, ce que nous avons déjà commencé à faire avec beaucoup d’enthousiasme.