L’équipe Bootstrap a annoncé mardi l’arrivée du tout premier alpha de la version 5 du framework. Après plusieurs mois de travail, l’équipe a lancé le top départ pour la prochaine version stable du framework avec des améliorations comme l’utilisation des propriétés CSS personnalisées, une nouvelle apparence de la documentation, des formulaires mis à jour et autres. Mais Bootstrap 5 Ahpla 1 supprime jQuery en tant que dépendance et apporte des changements et améliorations à JavaScript. Cette version alpha supprime également le support d'Internet Explorer. Ces derniers changements avaient été annoncés l’année dernière. L’équipe dit avoir fait des efforts pour rendre la migration de la version 4 à la version 5 de la collection d’outils plus accessible, et se concentre maintenant sur la création d'outils plus conviviaux et sur la réalisation des promesses des variables CSS, d'un JavaScript plus rapide, de moins de dépendances et de meilleures API, bien que le chemin à parcourir est encore long. L’équipe indique également que Bootstrap 5 n’est qu’à l’étape alpha et qu’elle continuera à supprimer et ajouter d’autres éléments jusqu’à la première version bêta. Voici, ci-dessous, quelques faits marquants des cette mise à jour :
Abandon de jQuery et amélioration de JavaScript
Selon Mark Otto, créateur du framework et auteur du billet de blog qui a annoncé cette version alpha 1, « jQuery a apporté un accès sans précédent à des comportements JavaScript complexes pour des millions (milliards ?) de personnes au cours des quinze dernières années », et « peut-être qu'il a changé à jamais le JavaScript lui-même », mais le temps était venu pour l’équipe d’abandonner jQuery en tant que dépendance. Selon le billet, ce changement est rendu possible grâce aux progrès réalisés dans les outils de développement front-end et la prise en charge des navigateurs. Selon l’équipe, cette suppression est l’un des plus grands changements apportés à Bootstrap depuis des années et cela signifie que les projets construits sur Bootstrap 5 seront nettement plus légers en termes de taille de fichier et de chargement de pages à l'avenir.
L'équipe Bootstrap a décidé d'aborder la question de la suppression de jQuery dans la version 5 pour le remplacer par du pur JavaScript juste après la livraison de la v4.3. « Le chat est sorti du sac - nous abandonnons notre plus grande dépendance côté client pour du JavaScript pur. Nous y travaillons depuis longtemps et un pull request est en cours et presque terminé », a affirmé l'équipe Bootstrap l’année dernière. L'argument général pour justifier la suppression de jQuery dans Bootstrap v5 est que maintenant que plus de 95 % des fonctionnalités de jQuery sont désormais natives dans les navigateurs, donc ajouter une dépendance JS serait "stupide" ou un gaspillage de bande passante.
En plus de l'abandon de jQuery, l’équipe Bootstrap a apporté des changements et améliorations au JavaScript dans la version 5, qui se concentrent maintenant sur la qualité du code et sur le rapprochement entre les versions 4 et 5. L'un des autres grands changements a été l'abandon de la majeure partie du plugin Button pour une approche de basculement d'états uniquement en HTML et CSS. Les boutons sont désormais alimentés par des cases à cocher et des boutons radio et sont beaucoup plus fiables, lit-on. Plusieurs autres changements ont été apportés au JavaScript dont la liste complète peut être consultée sur GitHub.
Propriétés CSS personnalisées
Grâce à l'abandon de la prise en charge d'Internet Explorer, l’équipe a commencé à utiliser les propriétés CSS personnalisées dans Bootstrap 5. Dans la version 4, elle n'avait inclus qu'une poignée de variables racines pour la couleur et les polices, et maintenant, elle les a ajoutées pour une poignée de composants et d'options de mise en page.
Prenons l’exemple, ci-dessous, du composant .table, dans lequel une poignée de variables locales a été ajoutée pour faciliter les styles de tableaux à bandes, survolables et actifs :
L’équipe est également en train de travailler « à l'utilisation des super-pouvoirs des propriétés personnalisées de Sass et CSS pour un système plus flexible ».
Amélioration de la personnalisation des documents
La page d'accueil du site a été améliorée en s’appuyant sur la documentation dans la version 4.5.0, et l'aspect et de la convivialité du reste de la documentation ont également été revus. Les pages du site ne sont plus en pleine largeur afin d’améliorer la lisibilité et faire en sorte que le site ressemble moins à une application et davantage à du contenu. De plus, la barre latérale a été améliorée pour utiliser des sections extensibles pour une navigation plus rapide.
Bootstrap a également un tout nouveau logo. « Inspiré par le CSS qui a créé les tout débuts de ce projet, notre logo incarne le sentiment d'un ensemble de règles délimité par des accolades bouclées ». L’équipe va déployer le nouveau logo dans la documentation de la version 4, sur le blog et continuera à l’utiliser dans la documentation à venir.
La documentation a été réduite et améliorée à plusieurs endroits, en donnant plus d'explications, en supprimant l'ambiguïté et en fournissant beaucoup plus de soutien pour étendre Bootstrap. Tout ce changement commence avec une toute nouvelle section "Personnaliser".
L’équipe a également élargi la palette de couleurs dans la version 5. Vous pouvez plus facilement personnaliser l'aspect et la convivialité de votre application dorénavant sans jamais quitter la base de code, grâce à un système de couleurs étendu intégré, lit-on. Le contraste des couleurs a été revu de sorte que l’équipe a même fourni des mesures de contraste des couleurs dans la documentation sur les couleurs.
Formulaires mis à jour
En plus de la nouvelle section "Personnaliser", l’équipe a remanié la documentation et les composants de ses formulaires. Tous les styles de formulaires ont été regroupés dans une nouvelle section "Formulaires" (y compris le groupe de saisie) pour leur donner l'importance.
L’équipe a revu et réduit tous les contrôles de formulaires. Dans la version 4, elle avait déjà introduit une série complète de contrôles de formulaires personnalisés – vérifications, radios, switches, fichiers, etc. –, mais ceux-ci s'ajoutaient aux paramètres par défaut de chaque navigateur. Chaque case à cocher, radio, sélection, fichier, champ et autre comprend maintenant une apparence personnalisée pour unifier le style et le comportement des contrôles de formulaires dans le système d'exploitation et le navigateur, lit-on. Ces nouveaux contrôles de formulaires sont tous basés sur des contrôles de formulaires standard entièrement sémantiques - plus de balises superflues, juste des contrôles de formulaires et des étiquettes.
API utilitaires
« Depuis que les utilitaires sont devenus un moyen privilégié de construire, nous nous sommes efforcés de trouver le bon équilibre pour les mettre en œuvre dans Bootstrap tout en assurant le contrôle et la personnalisation », a écrit l’équipe. Par ailleurs, elle l'avait fait avec les classes globales $enable-* dans la version 4, et cette approche a même été reprise dans la version 5. « Mais avec une approche basée sur l'API, nous avons créé un langage et une syntaxe en Sass pour créer vos propres utilitaires à la volée tout en étant capable de modifier ou de supprimer ceux que nous fournissons », lit-on.
Le système de grille de Bootstrap a également été amélioré à partir de l’existant dans la version 4. Beaucoup de changements ont été apportés, y compris l’ajout d’une nouvelle grille baptisée xxl ; les classes .gutter ont été remplacées par des utilitaires .g* ; les options de mise en page des formulaires ont été remplacées par le nouveau système de grille et des classes d'espacement vertical ont été ajoutées.
Voici un exemple de l'utilisation des nouvelles classes de grille gutter :
L’équipe n’a pas pu aborder tous les changements dans cette version alpha. Des ajouts comme RTL, offcanvas, et plus encore sont à venir dans les prochaines versions alpha. L’objectif de l’équipe est d'expédier une autre version alpha dans les 3 ou 4 semaines, et probablement quelques autres après cela. L’équipe prévoit également de publier une version 4.5.1 pour corriger quelques régressions et continuer à combler le fossé entre les versions 4 et 5.
Source : Bootstrap
Et vous ?
Que pensez-vous des changements apportés dans Bootstrap 5 Alpha 1 ? Utilisez-vous Bootstrap ? Que pensez-vous de la suppression de jQuery dans Bootstrap ? Cela va-t-il vous affecter ? De quelle manière ? Que pensez-vous de coder en JavaScript pur au lieu d'utiliser des bibliothèques comme jQuery ? Quels sont les avantages et inconvénients dans chaque cas ? Lire aussi
La version 5.0 du framework Bootstrap va supprimer jQuery, sa plus grande dépendance côté client, pour du pur JavaScript La version 5.0 de Bootstrap supprimera le support d'Internet Explorer 11, cela fait suite à l'annonce de supprimer jQuery pour du pur JavaScript Bootstrap 4.0 est officiellement disponible : un aperçu des changements notables dans la collection d'outils pour la création de sites Web Bootstrap 4.4.0 est disponible et apporte de nouvelles fonctionnalités, et corrections de bogues 
pourquoi ?