Aujourd’hui plus de 70% des sites web et applications web incorporent la bibliothèque Bootstrap. Cette adoption par les développeurs web s’est faite dès les premières heures de la sortie officielle de la première version de la bibliothèque.
Comment Bootstrap a-t-elle pu accrocher les développeurs web dès son lancement et comment continue-t-elle de les séduire de nos jours? Comment se présentait l’écosystème du développement web avant sa venue? Quelles sont les fonctionnalités qui lui ont été implémentées au cours de ses différentes versions ?
La suite de l’article vous apporte des réponses concises à toutes ces questions, bref cet article retrace l’histoire de Bootstrap.
Le web design bien avant l’avènement de Bootstrap
L’abondance des bibliothèques dans l’univers du développement web ne date pas d’aujourd’hui, bien avant Bootstrap il en avait tout une panoplie, en exemple nous pourrons citer 1KB CSS GRID et SenCSS.
Mais toutes ces bibliothèques étaient incapables de fournir une structure de code à suivre pour les développeurs lors du développement d’une plateforme.
Et vu qu’elles n’arrivaient pas à fournir une directive à suivre et que les développeurs avaient chacun leur approche du développement, résultat : le travail des équipes de développement était non harmonieux et l’on notait de incohérence dans leur œuvre.
Les entreprises étaient alors confrontées aux problèmes importants de maintenance et du coup elles dépensaient énormément pour maintenir leur plateforme.
Cette situation qui exaspérait et les développeurs et les entreprises sera à l’origine de l’histoire de Bootstrap.
Bootstrap voit le jour suite à l’initiative de deux ingénieurs de Twitter
En 2010, l’idée survint chez Marc OTTO employé de Twitter, de créer un outil capable d’harmoniser le travail de toute l’équipe de développement de son entreprise, car ils s’heurtaient eux aussi aux mêmes problèmes.
Marc OTTO fut rejoint par Jacob THORTON dans le développement du projet, car ce dernier avait vu l’utilité du projet de son collègue et avait compris que l’outil leur permettrait de minimiser les incohérences et fournirait un cadre regroupant les éléments et fonctions nécessaires au développement d’une interface.
Le projet naquit sous le nom de Twitter Blueprint après plusieurs mois de travail acharné des deux ingénieurs. Pendant un an l’outil fut utilisé au sein de l’entreprise et toute l’équipe de développement et les dirigeants de l’entreprise constatèrent la valeur de la librairie crée par OTTO et THORTON, car elle avait limité les incohérences, avait permis une augmentation de la productivité et avait aussi solutionné bien nombres de problèmes de web design de l’époque.
Dans le but d’aider les développeurs web à profiter de la librairie conçue par les employés de Twitter, il fut décidé au sein de l’entreprise de la placer sous licence open source. C’est ainsi que le 19 août 2011 Twitter Blueprint fut mise à la disposition du public sous licence open source avec un nouveau nom : Bootstrap.
Les évènements bienheureux vont suivre pour Bootstrap, quelques mois après sa sortie c’est à dire en 2012 elle récolte plusieurs étoiles et devient le projet le plus populaire sur Github. Rapidement une grande communauté s’est formé autour du projet et a travaillé pour son évolution.
Bootstrap s’est fait adopter dès son lancement à cause des fonctionnalités proposées dans sa première version, et à la suite de cette version plusieurs autres versions ont été publiées adaptant ainsi la technologie à l’évolution de l’internet et accroissant le nombre de ses utilisateurs.
L’évolution de Bootstrap
La première version de Bootstrap
La sortie de cette première version avait apporté beaucoup de nouveautés dans l’écosystème du développement web à l’époque.
Elle offrait une structure de code de base bien solide autour de laquelle les développeurs pouvaient concevoir leur projet, ce qui réduisait le temps de travail, augmentait la productivité et le travail final était optimal.
Elle fournissait des composants prêts à l’emploi tels que les boutons, les tableaux, les formulaires ou encore une pagination pour la réalisation d’une interface graphique.
Elle supportait les navigateurs les plus utilisés de l’époque (Internet Explorer, Chrome, Firefox, Safari et Opera), ce qui permettait au projet dans lequel elle a été implémentée de s’afficher proprement sur tous ces navigateurs.
Les éléments HTML pour la typographie sont soignés par Bootstrap pour que leur présentation sur une page web soit convenable et attrayante.
La deuxième version de Bootstrap
Cette deuxième version qui fut sortie officiellement le 31 Janvier 2012 avait encore suscité beaucoup d’engouement autour du projet.
Car en effet il proposait deux systèmes de grille, un qui est fixe et l’autre qui est fluide. Et Les deux systèmes de grille étaient tous plus simplifiés que ceux proposés par les autres librairies. Bootstrap offrait le choix au développeur pour ses mises en pages d’utiliser les systèmes de grille ou non, car ils étaient intégrés dans un fichier différent du fichier principal.
Les composants non utilisés dans la première version furent retirés et les composants les moins utilisés furent retravaillés pour qu’ils répondent aux mieux aux attentes des développeurs.
Pour permettre une interaction facile et extensible, des plugins jQuery personnalisés furent ajoutés dans la bibliothèque pour donner vie aux projets qui l’implémentaient.
Elle proposait une documentation bien fournie qui montrait comment utiliser les composants de la bibliothèque avec des exemples clairs et précis, puis proposait aussi une gallérie des sites web de l’époque qui utilisaient Bootstrap.
La troisième version de Bootstrap
Elle fut publiée un 19 août 2013 après plusieurs mois de travail de l’équipe de maintenance. Et à la surprise générale de tout le monde, la bibliothèque a été totalement reconstruite.
C’était pour de bonne raison cette reconstruction, car à cette période l’intérêt pour les tablettes et smartphones était grandissant et pour être à la page il fallait penser à un outil capable de créer des applications web qui offraient un rendu impeccable sur ces petits supports.
C’est ainsi que la version 3 de Bootstrap offrait la priorité aux petits terminaux en passant à l’approche mobile-first. Ceci s’est fait en incluant dans le fichier principal de Bootstrap 3 le système de grille fluide basé sur un système de colonage et en abandonnant le système de grille fixe.
Bootstrap 3 passait désormais au style Flat design, mais proposait un thème optionnel pour les non amoureux du flat design. Ce dernier est un style basé sur le minimalisme, il limite le nombre d’élément graphique sur une page web pour que la priorité soit accordée aux éléments essentiels. Il utilise aussi les couleurs authentiques et dépourvoit des ombres.
Les glyphicons qui étaient des images dans la version 2 passent dans cette version au format font et plusieurs autres icônes ont été rajoutées, ainsi les développeurs avaient à leur disposition un total de 180 icônes au format font proposées par la bibliothèque glyphicons.
Les composants pannel et list group font leur apparition, d’autres composants tels que les submenus ou encore typeahead ont été abandonnés et certains composants se sont vu renforcés avec la fonctionnalité de la responsivité les adaptant aux petits support, c’est le cas de la Navbar et du Modal (boîte modale).
La documentation avait encore été mise à jour et comportait beaucoup plus d’exemples avec leur code source.
La quatrième version de Bootstrap
Après la sortie de la version 3.3.7 de Bootstrap le 25 juillet 2016, il a fallu patienter plus de 2ans avant d’assister à la sortie de la version stable de Bootstrap 4 un 19 janvier 2018. Au total 6 versions alpha de Bootstrap 4 et 3 versions bêta de Bootstrap ont précédé la version stable de Bootstrap 4.
La première remarque fut le retrait des glyphicons de Bootstrap, ils ne sont plus intégrés dans la nouvelle version car ils n’étaient pas utilisés par les développeurs.
Le préprocesseur LESS est abandonné au profit de SASS qui permet de compiler plus rapidement les fichiers CSS.
Les composants Well, Thumbnail et Pannel sont remplacés par le nouveau composant Card beaucoup plus flexible et qui offre plusieurs options de mise en page.
Bootstrap 4 intègre désormais le module Flexbox qui permet de disposer convenablement et naturellement des éléments dans un conteneur parent flexible avec la possibilité de modifier la direction des éléments enfants et de les aligner selon votre volonté.
Le système de grille conserve le système de colonage mais a été renforcé avec la flexbox, plusieurs composants tels que les Modals, la pagination, les Navs ou encore la Navbar ont implémenté la Flexbox.
Pour offrir un coup de jeune aux formulaires conçu avec Bootstrap 4, plusieurs classes permettant de réaliser un formulaire ont changé de nom et de nouvelles classes ont été ajoutées.
Les avantages et les inconvénients de Bootstrap
Les avantages
Les avantages offerts par Bootstrap sont énormes, voici quelques-uns de ces avantages :
- Son premier grand atout est son adaptation aux différents terminaux et sa compatibilité avec tous les navigateurs modernes, elle offre la possibilité d’écrire un seul programme qui offre un rendu net sur les écrans des smartphones, tablettes et PC.
- Sa prise en main est facile et rapide, elle fait gagner un temps considérable et permet d’augmenter la productivité du développeur
- L’équipe de maintenance de Bootstrap est composée de développeurs et designers très compétents qui œuvrent à son amélioration, de plus elle possède une importante communauté très active.
- Bootstrap permet l’optimisation d’intégration d’un site grâce à ses classes, elle permet de réduire les coûts de création d’un site et de sa maintenance.
- Elle vous permet de créer une application web optimisée pour le référencement naturel SEO (vous pouvez approfondir vos connaissances sur le SEO via cet article).
- Elle est facilement personnalisable et modulable.
- Elle propose une documentation bien garnie qui propose des exemples concrets et concis de l’utilisation des composants de la bibliothèque avec les codes sources à l’appui.
- Plusieurs thèmes gratuits et premiums conçus à l’aide de Bootstrap sont proposés aux développeurs pour leur faciliter la réalisation d’un site web
Les inconvénients
Comparés aux avantages, les inconvénients de Bootstrap sont minimes et sont contournables
- Bootstrap est une bibliothèque lourde à charger, c’est dû aux composants non utilisés dans la bibliothèque qui sont chargés au même moment que Bootstrap.
Vous pouvez remédier à ça en faisant appel à Bootstrap depuis leur serveur au lieu de la charger vous-même sur votre page web.
- La majorité des sites web utilise Bootstrap lors de leur conception sans faire des réajustements, du coup certains sites se ressemblent.
Mais vous n’avez qu’à ajouter quelques lignes de code CSS pour offrir un design personnalisé à votre site.
Bootstrap tout au long de son histoire s’est toujours adaptée à l’évolution de l’internet en mettant à la disposition de ces utilisateurs les outils et gadgets répondant aux besoins spécifiques.
Si vous désirez approfondir votre connaissance sur la nouvelle version de Bootstrap, acquérez le livre gratuit Prise en Main de Bootstrap 4 qui présente Bootstrap 4 et comment utiliser ses composants pour créer une application web responsive et lui ajouter des effets d’animation.
Laisser un commentaire