Dire qu'il n'y a pas si longtemps c'était cool de mettre le logo de Bootstrap sur son CV, juste à côté des logos HTML5 et CSS3.
Mais cette époque a changée non ?
Bootstrap n'a plus autant la côte on dirait, j'entends beaucoup de devs dirent que c'est nul, que c'est une grosse erreur de l'apprendre quand on débute, il semblerait même que peu de monde aujourd'hui disent du bien de cette librairie.
Et pourtant.. 3,5 millions de sites utilisent Bootstrap selon Wappalyser. PayPal par exemple l'utilise.
Et d'après StackShare, plus de 40 000 entreprises (dont de très grosses comme Twitter, Spotify, Linkedin, Udemy..) utilise Bootstrap.
Ces chiffres on en fait ce qu'on veut, mais c'est tout de même impressionnant !
Pourtant j'ai l'impression qu'il existe un Bootstrap bashing, comme il existe aussi un PHP bashing ou un WordPress bashing, mais en attendant PHP fait tourner 80% des sites Web et WordPress détient environ 60% des parts du marché des CMS.
J'exagère un peu en parlant de bashing, on pourrait plutôt parler de critiques acerbes. 😁
Bootstrap a des défauts, mais il a aussi des qualités. Dans cet article je vais essayer d'aborder le sujet en me mettant dans les deux camps, d'abord pour dire que Bootstrap c'est trop nul, puis pour dire que Bootstrap c'est trop bien m'voyez ? 🤔
Car on trouve des bons arguments des deux côtés !
Si tu débutes en inté, cet article devrait t'aider à te faire un avis sur Bootstrap et à y voir plus clair !
Mais avant, si on faisait un peu d'histoire ?
Déjà est-ce que tu savais qu'à la base Bootstrap s'appelait Twitter Blueprint avant d'être open-source.
Oui car il a été crée chez Twitter par @mdo (Mark Otto) et @fat (Jacob Thornton).
Twitter Blueprint a servit de guide pour les projets interne chez Twitter pour standardiser et simplifier la phase de design et d'inté.
C'était en 2010, donc à l'échelle du Web, Bootstrap n'est pas jeune du tout alors un peu de respect vous voulez bien ? 👴🏻
La première version publique et open source de Bootstrap se nommait Twitter Bootstrap, elle est sortie en Août 2011. Dès la première version la grille était présente, mais pas encore de prise en charge du responsive. On y trouvait aussi le préprocesseur Less !
La grille était basée sur 960 Grid System, les anciens s'en rappellent peut-être ?
La v2 sort en 2012 et intègre un support du responsive design. Je n'ai pas connu cette époque en tant que dev mais j'imagine que le responsive n'était encore qu'à ses balbutiements et était loin d'être la norme comme aujourd'hui.
La v3 voit le jour en 2013 avec un redesign (flat design) complet des composants avec une approche mobile-first.
En 2018, donc 5 ans après la v3 quand même, sort Bootstrap 4 avec le remplacement de Less par Sass et un support de Flexbox.
Et enfin la v5 en 2021 avec entre autres le composant offcanvas, l'API utilities, une grille améliorée, l'arrêt du support de IE et la réécriture du JS sans jQuery.
Tu peux retrouver les docs des anciennes versions sur le site BootstrapDocs pour faire un petit voyage dans le temps.
Pourquoi Bootstrap c'est trop nul ?
À l'époque de l'âge d'or de Bootstrap, Flexbox et CSS Grid n'étaient pas aussi populaire que maintenant. Aujourd'hui c'est beaucoup plus facile de se passer de la grille de Bootstrap.
À la base Bootstrap devait être utilisé pour créer des prototypes, pour ensuite monter des sites par-dessus. Sans personnalisation et sans un minimum de CSS custom, tous les sites fait avec Bootstrap se ressemblent..
Je ne sais pas toi mais moi je n'en peux plus de voir le composant Navbar, Carousel, ou Alerts réutilisés tout le temps.. Beaucoup de thèmes WordPress ou templates sont basés sur Bootstrap et ça commence à devenir lassant.
Même avec de la personnalisation on peut "voir" Bootstrap quand on est habitué à la librairie. Mais je te rassure c'est aussi le cas de Tailwind, mais il faut reconnaître que le design façon Tailwind apporte beaucoup de fraîcheur.
Bootstrap est orienté composant, et ils sont très génériques et sans âme, il faut le dire, mais au moins ils font le job.
Si tu ne sais pas ce qu'est un composant, c'est tout simplement un bloc HTML réutilisable. Dans Bootstrap on va avoir le composant Navbar pour créer une navigation responsive ou bien le composant Buttons pour les boutons.
Les débutants sont très vite tentés de copier-coller les exemples d'utilisation des composants de la doc sans comprendre la logique qui se cache derrière, c'est dommage.
Les composants avaient de l'intérêt il y a quelques années car on devait charger pleins de plugins jQuery pour faire fonctionner des pop-in, des carrousels etc.. Bootstrap embarquait tous ces composants et ça c'était cool, mais aujourd'hui l'intérêt est moindre car c'est très simple d'importer une petite librairie JS pour créer un carrousel ou une pop-in.
Beaucoup de sites "malicieux" sont basés sur du Bootstrap sans personnalisation, cela donne une mauvaise image de la librairie.
À une époque, le Cross Browser c'était l'enfer, avoir une librairie CSS qui s'occupait de la compatibilité entre les navigateurs c'était du confort et du temps pour gérer le reste.
Mais aujourd'hui c'est quand même beaucoup plus simple. Il faut dire qu'il y a seulement quelques années, mettre un border-radius sur une div c'était la folie. 😅
On pourrait se dire que Bootstrap a fait son temps, mais même en 2022 il a encore de quoi séduire bon nombre de développeurs..
Pourquoi Bootstrap c'est trop bien ?
Bootstrap est pratique pour faire des démos ou monter très vite un wireframe.
En effet, on peut donner rapidement vie à un projet avec la grille et tous les composants de la librairie.
Bootstrap fonctionne très bien pour les dashboard. Je connais des devs back qui ont construit un dashboard complet avec la grille et les composants de Bootstrap pour aller plus vite et ne pas s'embêter à coder le front-end, ils n'avait pas le temps, pas de design et pas la compétence pour le faire.
Pour les sites qui ont un petit budget, il existe des tas de templates et des thèmes WordPress basés sur Bootstrap, ça dépanne pour ne pas avoir à passer trop de temps sur un site Web vendu pas cher.
Sur ce site tu trouveras des templates qui sont plutôt chouette visuellement.
Non mais il n'est pas magnifique ce site avec ce joli formulaire ?
Et celui-ci alors avec toutes ces couleurs ?
Ce dashboard est super propre ! On pourrait croire que c'est du Tailwind, mais non ! C'est bien du Bootstrap !
Oui j'en fait des caisses.. 🤡
Cela vaut le coup de connaitre Bootstrap car pleins de sites et thèmes sont basés dessus. Si tu connais déjà bien le CSS, tu ne devrais pas avoir de problèmes pour l'apprendre.
On peut aussi faire du beau front-end avec Bootstrap, à condition de personnaliser la librairie.. et d'utiliser les fichiers sources bien sûr, je vois pas mal d'exemples de code avec une surcharge des class avec des !important à chaque ligne. 😮
Même si c'est facile de créer des pop-in et des carrousels en installant des librairies JS modernes, le côté orienté composant (composants personnalisables surtout) peut encore avoir de l'intérêt. Un exemple : tu dois maintenir un site Web basé sur du Bootstrap, ton client te demande en urgence de mettre une pop-in pour indiquer à ses visiteurs une info de dernière minute, toi de ton côté tu peux très vite récupérer un bout de code sur la doc et le faire très rapidement.
Les sites fait avec Bootstrap finissent par se ressembler, car l'ossature est la même, mais ce n'est pas forcément un problème. Tu ne dev pas que pour toi ou pour les autres devs, tu dev surtout pour le client et les utilisateurs. Ce qui compte c'est que le contenu soit accessible, c'est la priorité, si tu n'as pas trop de contraintes de temps alors oui tu peux te permettre de faire quelque chose d'un peu plus from scratch.
L'approche 100% utilitaire de Tailwind ne va pas forcément convenir aux devs qui n'ont pas le sens du design.
Les class de Bootstrap sont orientées composants (on peut aussi parler de CSS orienté objet), cela donne de bonnes pratiques pour reproduire ensuite la même chose soi-même ou avec Tailwind pour construire ses propres composants.
Sans une bonne expérience du CSS et de la construction de composants réutilisables, un intégrateur débutant peut prendre de mauvaises habitudes avec Tailwind, avec des class chargées pour rien et dans n'importe quel ordre.
On dit que Bootstrap est lourd, c'est vrai, mais Tailwind aussi, mais avec un coup de PurgeCSS ce n'est plus un problème.
J'ai découvert l'accessibilité du Web avec Bootstrap, c'est quand même une bonne chose qu'une librairie CSS mette cela en avant.
Plus d'infos sur ARIA sur le site de Bootstrap.
Beaucoup de devs utilisent Bootstrap, donc forcément tu trouveras la plupart du temps réponse à tes questions, il existe même des sites sur lesquels tu trouveras des composants crées par la communauté.
La librairie évolue bien
On est quand même passé de 146 !important dans la v4 à seulement 19 !important dans la v5.
Depuis la v5, Bootstrap ne dépend plus de jQuery et il n'y a plus de support de IE.
La v5 embarque une API pour générer des class utilitaires, le but n'est pas de copier Tailwind mais d'offrir aux intégrateurs qui aiment cette façon de travailler la possibilité de continuer d'utiliser Bootstrap avec un petit côté utilitaire en plus !
Bootstrap reste un modèle d'accessibilité pour les débutants avec une documentation claire souvent citée en exemple.
Avec le temps on aurait pu penser que Bootstrap proposerait beaucoup plus de composants, et pourtant la librairie reste sobre et ne propose que des améliorations qui ont du sens.
C'est trop nul ou c'est trop bien du coup ?
Cela va dépendre du projet (complexité du design, temps imparti..) et de tes affinités avec la librairie.
C'est un outil, on a tendance à dire du mal des outils et technos que l'on ne connait pas, je suis passé par là, à une époque j'apprenais NodeJS et j'aimais bien dire du mal de PHP, alors que je ne connaissais strictement rien au PHP, c'était débile.
Bootstrap ne prétend pas être la meilleure librairie front-end, contrairement à ce gros prétentieux de Foundation 🤡
Non mais regardez ce qu'on peut lire sur la page d'accueil du site de Foundation.
"The most advanced responsive front-end framework in the world."
Non mais on est où là ? 😂
Bref.. Bootstrap propose ce qu'il a à proposer, si ça répond à tes besoins, c'est cool, sinon utilise un autre outil ! Tu as Foundation, Bulma, Materialize, Semantic UI ou Tailwind.. tu peux aussi bosser sans librairie et faire du CSS from scratch !
Si tu débutes, Bootstrap reste un outil front-end à connaître car il est encore beaucoup cité dans les offres d'emploi.
J'espère aussi que cet article t'as plu, n'hésites surtout pas à le partager pour m'aider à donner plus de visibilité à mon travail. 🥰
À bientôt pour le prochain article !
Seb.
