Retour d’expérience sur la migration vers Bootstrap 5
Cela fait maintenant un mois que Bootstrap 5 est sorti et que je l’utilise. Il est donc temps de partager mon retour d’expérience concernant la migration vers cette nouvelle monture.
Première chose à noter : il s’agit là de la migration de Bootstrap la moins douloureuse que j’ai eu à effectuer. Les modifications sont nombreuses, mais elles sont logiques et raisonnées (changements de noms, attributs plus explicites, scripts moins nombreux … etc. ...).
Comment préparer la migration ?
Avant de commencer, il convient de faire le point concernant le site ou l’application à migrer. Il faut alors établir la liste des composants actuellement utilisés et identifier ceux qui peuvent être impactés par la migration.
Pour faciliter ce travail, Bootstrap fournit une documentation très détaillée https://getbootstrap.com/docs/5.0/migration/.
Celle-ci liste l’ensemble des composants, styles et scripts impactés. Prenez bien le temps de consulter cette page avant de vous lancer. Il est possible que certains changements vous demandent de prendre de nouvelles décisions (ex : pour le système de Grid devez-vous utiliser le nouveau breakpoint xxl situé à 1400px ?).
Comment procéder ?
Le plan le plus aisé consiste à procéder comme suit :
- Mise à jour via NPM
- Adapter les styles et bundles css :
- Mettre jour ses imports Sass.
- Adapter les mixins utilisés ou les remplacer.
- Adapter les couleurs.
- Mettre à jour les attributs data utilisés via JavaScript : tous commencent maintenant par "data-bs-".
- Mettre à jour les class utilisées : attention plusieurs classes "non visibles" ont changé de nom, comme les classes liées à l’accessibilité.
- Adapter les formulaires de saisie : plusieurs classes ne sont plus utiles, le layout est simplifié.
- Mettre à jour les scripts et bundles JavaScripts (la plupart du temps, pour utiliser les nouveaux attributs data, ou plus simplement pour supprimer des scripts devenus inutiles).
Est-ce compliqué ?
Contrairement aux précédentes migrations, celle-ci est relativement facile. Le plan de migration présenté ci-dessus en est un bel exemple.
On est très loin de la migration vers Bootstrap 4 durant laquelle notre site ne ressemblait à rien tant que la migration n’est pas terminée. De plus, le temps consacré à celle-ci est bien plus court.
Conclusion
La migration vers Bootstrap 5 est une migration "douce". Le fait de ne plus dépendre de jQuery et d’utiliser moins de scripts peut aussi être l’occasion de simplifier et d’optimiser son site.
Par exemple : le poids d’une page type de ce blog a été réduit d’un peu plus de 100ko (scripts et styles).