Fervent utilisateur de Bootstrap jusqu’il y a peu, j’ai récemment évolué vers d’autres alternatives. En effet, après avoir discuté avec de nombreux développeurs plus expérimentés que moi, je me suis rendu compte des failles et des problématiques que présentait Bootstrap. Que ce soit en terme de performance mais aussi de « propreté » du code, Bootstrap n’est finalement pas l’idéal.
Cependant, il m’arrive encore de l’utiliser pour certains projets. Je vais vous expliquer lesquels et pourquoi il me parait parfois intéressant.
Qu’est-ce que Bootstrap ?
Avant toute chose il est intéressant de définir correctement Bootstrap : c’est un framework CSS front-end qui permet de mettre en place des interfaces utilisateurs très rapidement. Développé par Twitter, il est l’un des plus répandus sur internet. Lorsque vous utilisez Bootstrap vous importez donc un fichier énorme. Étant massivement utilisé, il a l’avantage de disposer de nombreuses documentations en ligne et de proposer un grand nombre de templates permettants de mettre en place vos projets rapidement.
Des performances pas toujours au rendez-vous
En utilisant un framework comme celui-ci, il faut bien souvent laisser de côté l’aspect performance. En effet, en utilisant Bootstrap on se retrouve à charger un grand nombre de fichier CSS qui ne sont pas toujours utilisés à 100%. On perd donc du temps de chargement inutilement. De plus, pour pouvoir modifier le design de base du framework, on va généralement passer par des surcharges CSS. Cela signifie que l’on va définir un élément à deux endroits différents et donc le chargement d’une des deux définitions sera inutile.
Enfin, dans les anciennes versions Bootstrap (3 & 4) on utilisait aussi des librairies tel que jQuery qui ne sont pas non plus réputées pour leurs performances. Le framework imposait d’utiliser ces bibliothèques et donc d’alourdir à nouveau le chargement.
Un code simplifié
Lorsque vous écrivez votre code vous-même et avec un peu d’expérience, vous essayez d’aller à l’essentiel. Là où Bootstrap aura besoin de 2 ou 3 div imbriquées, vous n’allez peut être en utiliser qu’une seule. Cela simplifie donc significativement le HTML mais aussi le CSS.
En vous passant de ce framework, vous allez donc rédiger un code simplifié, qui sera soumis à moins de bugs, et qui sera surtout plus facile à gérer en maintenance. Et bien évidemment il se chargera aussi beaucoup plus rapidement.
Bootstrap, conseillé pour les débutants ?
Certains déconseillent complètement Bootstrap pour les débutants, arguant qu’il est nécessaire de coder soi-même pour comprendre exactement le fonctionnement des propriétés CSS.
De mon côté je pense qu’il peut être intéressant d’utiliser Bootstrap pour pouvoir mettre en place des projets qui soient sympa visuellement, et ce de manière assez simple. On va généralement commencer par prendre un template, puis devoir le modifier et donc se forcer à comprendre le comportement de Bootstrap et de ses propriétés CSS.
A force de développer de nombreux sites avec Bootstrap on va se rendre compte que certains fonctionnements ne sont pas des plus simples, ni des plus logiques. C’est personnellement l’expérience que j’ai eu avec Bootstrap. Sur mes premiers projets je ne pouvais pas m’en passer, et désormais j’ai du mal à l’utiliser tellement je m’aperçois des faiblesses de ce dernier.
Bootstrap pour simplifier la gestion du « responsive »
C’est l’un des arguments les plus populaires des pro-Bootstrap : la simplification de la gestion du responsive et des différentes tailles d’écrans. Est-ce un réel avantage dans les faits ? Oui et non.
En théorie oui, car sans passer par le CSS directement, on peut construire un site entier en utilisant uniquement les class CSS créées par Bootstrap. Cependant, depuis l’arrivée de technos comme grid ou flex il est désormais assez simple de gérer le responsive sur un site internet.
En pratique ça n’est pas réellement le cas, car comme je vous le disais plus tôt, on va utiliser 3 à 4 lignes de HTML qui peuvent en fait être résumées en 1 ligne si l’on se passe de Bootstrap. Ça revient donc à simplifier le CSS pour complexifier le HTML.
Est-ce que ces besoins de performances sont toujours nécessaires ?
La quête de performance est un objectif que l’on se fixe très souvent sur un projet web. Cependant il faut être réaliste et se rendre compte qu’il n’est pas toujours nécessaire d’avoir un site internet qui charge en moins de 3 secondes. Il peut arriver que l’on choisisse d’aller à l’essentiel, sur du back-office notamment.
C’est le choix que j’ai fais, par exemple, pour le projet BACK ipln. Toute la partie front-office (espace utilisateur) a été développée sans framework afin d’optimiser au mieux les performances. Cependant, pour la partie administration nous avons fais le choix d’utiliser un template Bootstrap. Celui-ci nous a permis de gagner du temps de développement et d’importer un grand nombre de librairies JavaScript telles que table.js dès le début du projet.
Cela n’est pas si dérangeant, et avec une bonne mise en cache on arrive à obtenir des performances tout à fait correctes (chargement entre 2 et 3 secondes par page).
Comme vous pouvez le voir, il y a de nombreuses raisons de se passer d’un framework tel que Bootstrap. J’ai pris celui-ci en exemple car il fait parti des plus utilisés, mais on peut retrouver certaines de ces problématiques chez ses concurrents (Tailwind, Materialize, …).
Il ne faut toutefois pas être complètement fermé à l’idée de les utiliser, car ils peuvent permettre de mettre en place rapidement un projet, de prototyper des solutions ou encore de mettre en place des interfaces complexes très rapidement via des templates.
