Bootstrap 5 est arrivé

yule

WRInaute occasionnel
Hello,

Pour ceux et celles qui adorent / utilisent ce framework, Bootstrap vient de de passer à la version 5 ! Passablement de changement et du job en perspective pour se mettre à jour...

Je m'étais un peux amusé avec la version alpha mais depuis hier ou aujourd'hui, la version v5.0.0-beta1 est sur la place ! A vos claviers.. Enfin ça va être mon cas, je vais profiter pour mettre à jour mon site (à la mano) avec celle nouvelle version qui en substance offrira ou pas

- Plus de bibliothèque jQuery (pageSpeed Insight devrait apprécier..)
- Introduction des propriétés personnalisées CSS (Ciaoooo IE !!!)
- Extension des grids (plus de classes et de dimensions à choix)
- Une doc toujours aussi précise et utile (bon j'aime tellement que ce n'est que mon avis..)

Du job en perspective pour s'adapter aux avantages qu'offre cette nouvelle mouture (il y a aussi des inconvénients mais bon.. )

Bonne bonne
Yule
 

rick38

WRInaute passionné
Mais "beta" c'est pas une release finale, du moins de mon temps les beta c'était juste pour les testeurs o_O
Je vois qu'ils ont ajouté des icônes SVG surtout.
 

nicodak

WRInaute occasionnel
Enfin ça va être mon cas, je vais profiter pour mettre à jour mon site (à la mano)
salut, est-ce que vous utilisiez Bootstrap via un CDN ou hébergé sur votre propre serveur ?

Dans le cas d'une utilisation via CDN vous mettez à jour le lien positionné dans les balises <head> puis vous mettez à jour votre code ? C'est cela ?
Les classes restent les mêmes d'une version à l'autre je suppose ?

A bientôt.
 

passion

WRInaute accro
C'est bien d'utiliser des frameworks mais comme tout open-source, bah ça change trop souvent !
Perso, je préfère héberger le code pour une question de stabilité et maintenabilité.
 

nicodak

WRInaute occasionnel
Cool on va pouvoir s'écarter un peu plus de jQuery.
J'attends la version Bootswatch pour mes sides projects.

@nicodak j'installe tous les packages JS avec npm et compilés avec Webpack.

Moi ça ne va pas me permettre d'enlever jQuery, j'en ai besoin pour mon code à moi :D

@rick38 progressivement, je remplace les libs par leur équivalent Vanilla JS.
Exemple: https://getdatepicker.com/4/ => https://flatpickr.js.org/

:rolleyes:

Ce sont des membres comme vous dont j'ai besoin dans ma communauté... Mais ça viendra, avec le temps...
Merci pour les réponses (et pour les nouvelles questions que je me pose ! :D)

nb: trouver un tuto sur npm.
 

nicodak

WRInaute occasionnel
Plus sérieusement, j'ai un peu de mal à suivre comment sont gérés les CDN des différents Framework et Bibliothèques de développement.

Par exemple pour Bootstrap, pourquoi il y a tant de CDN différents ? Certains sont délivrés par JSdeliver, d'autres par MaxCDN, quelle est la différence ? Aucune ? ils délivrent le même contenu ?
Pourquoi il n'y a pas un CDN officielle Bootstrap fourni par Bootstrap ?

Le fait que ce soit open-source avec des ajouts/modifications par des centaines de développeurs, est-ce que tout le monde utilise, par exemple pour Bootstrap 4, exactement le même outil ?

@nicodak j'installe tous les packages JS avec npm et compilés avec Webpack.
Ok les packages JS de Bootstrap vous voulez dire ? Il y en a plusieurs ?
Pourquoi les compiler ?

Merci pour vos éclairages.
 

spout

WRInaute accro
Par exemple pour Bootstrap, pourquoi il y a tant de CDN différents ? Certains sont délivrés par JSdeliver, d'autres par MaxCDN, quelle est la différence ? Aucune ? ils délivrent le même contenu ?
Concurrents qui se servent de ça pour faire leur pub. C'est les mêmes fichiers.

Pourquoi il n'y a pas un CDN officielle Bootstrap fourni par Bootstrap ?
Ca coûte de l'argent, dans la doc ils mettent les exemples avec JSDelivr.

Le fait que ce soit open-source avec des ajouts/modifications par des centaines de développeurs, est-ce que tout le monde utilise, par exemple pour Bootstrap 4, exactement le même outil ?
Oui la plupart, d'autres font leur propres bundles spécifiques.

Ok les packages JS de Bootstrap vous voulez dire ? Il y en a plusieurs ?
Des milliers ! https://www.npmjs.com/

Les langages on chacun leur gestionnaire de dépendances :
- PHP: Composer
- Python: PyPI
- .NET: NuGet
- JS: NPM
- ...

Pourquoi les compiler ?
https://medium.com/jsjitsu/webpack-à-quoi-ça-sert-et-comment-sen-servir-a5e4ecee8815
 

rick38

WRInaute passionné
Perso je n'utilise pas de CND, je génère 1 fichier JS et 1 fichier CSS en y concaténant dedans toutes les librairies.
Ca évite d'ouvrir une connexion à un autre domaine, la résolution peut parfois prendre du temps théoriquement.

Ce sont des membres comme vous dont j'ai besoin dans ma communauté...

Rachète WRI, en plus ça parle trop de seo ici et pas assez de dev, d'autant que Google a tué le seo alors que le dev est immortel.
 

nicodak

WRInaute occasionnel
Rachète WRI, en plus ça parle trop de seo ici et pas assez de dev, d'autant que Google a tué le seo alors que le dev est immortel.
C'est surement pas dans mes moyens... :)
Mais je suppose que les dev qui trainent sur WRI on déjà leurs habitudes sur des forums dev : developpez.net, commentçamarche ou alsacréations, j'en oublie surement...
Ou encore sur les forums en anglais comme ceux de stackoverflow...
 

yule

WRInaute occasionnel
Hello,

Comme @rick38 je garde le tout chez moi , pas de CND.

Oui @rick38 je te l'accorde, c'est pas une version release finale, toutefois, je viens de refaire tout le front de mon site avec la version "Alpha", Je bug sur le toogle (version mobile) avec la version "Bêta" mais pour moi et mon utilisation , c'est pas trop grave, on dira surtout que mon site n'est plus accessible sur IE:rolleyes: pour le reste ç'est que cosmétique.

Chrome, Opéra, Mozilla et Edge ok (ça me suffit)

Je viens de faire un test avec Google Insight (mobile)

Bootstrap 4.5.3 pour mon index et selon l'image en backround qui se charge..==> de 88 à 93
Boostrap 5 (Alpha) pour mon index et selon l'image en backround qui se charge.. ==> 88 et 98 !

Version ordinateur, je flirt avec le max !

J'en ai donc profité de lui refaire une beauté : https://freejungle.me (on aime ou on aime pas
;)) mais sans jquery je ne peux qu'approuver.

De bonnes fêtes à vous tous !
Bonne bonne
Yule
 

nicodak

WRInaute occasionnel
J'en ai donc profité de lui refaire une beauté : https://freejungle.me (on aime ou on aime pas
;))
C'est propre ! L'effet smooth sur la barre de navigation lorsque l'on scroll rend bien, Je ne me souviens plus mais elle était colorée avant n'est-ce pas ? En tout le site est toujours aussi agréable à l'œil.
(Les background sont fait-maison ?)

mais sans jquery je ne peux qu'approuver.
Plus de bibliothèque jQuery (pageSpeed Insight devrait apprécier..)
Pourquoi ces remarques sur jQuery ? Il faut éviter de l'utiliser, il ralentirait les sites c'est ça ?
Merci !
 

yule

WRInaute occasionnel
C'est propre ! L'effet smooth sur la barre de navigation lorsque l'on scroll rend bien, Je ne me souviens plus mais elle était colorée avant n'est-ce pas ? En tout le site est toujours aussi agréable à l'œil.
(Les background sont fait-maison ?)

Merci ! Oui elle était noir. (bonne mémoire !)
Pour les Backround, malheureusement pas (acheté en grande partie sur EnvatoMarket) prix correct...

S'agissant de Jquery, te connaissant, tu vas pas te suffire d'un mini résumé, dès lors, voici une belle explication ici

En substance, Un de ces changements majeurs sera la disparition de jQuery de Boostrap, au profit du framework Vanilla JS. Pour ceux qui ne le connaitraient pas, Vanilla JS est un framework orienté pour procurer la meilleure performance possible à l'exécution. Vanilla JS est extrêmement léger. C'est même, incontestablement, le plus léger framework JavaScript.

A+
Yule

NB: J'ai non plus pas assez de connaissances dans la prog, je suis autodidacte qui aime avoir les mains dans le camboui... Après si la réparation fonctionne, c'est une autre paire de manche.. Mais je table énormément sur la rapidité de mon site.. pour le reste et comme je vends rien, ça n'a pas d'importance
 
Dernière édition:

nicodak

WRInaute occasionnel
S'agissant de Jquery, te connaissant, tu vas pas te suffire d'un mini résumé, dès lors, voici une belle explication ici
Merci pour le lien, même si tout ça me dépasse un peu (beaucoup) c'est intéressant. De ce que je comprends c'est une façon d'apurer Bootstrap en supprimant une couche qui apportaient des fonctionnalités qui peuvent être finalement gérées nativement par JS.

Pourtant Bootstrap 4 pouvait fonctionner sans jQuery déjà non ? (puisqu'en plus du CDN Bootstrap il fallait si besoin charger également le CDN jQuery)
Mais dans ce cas là Bootstrap avait moins de fonctionnalités, c'est cela ?

Donc c'est une mauvaise nouvelle pour jQuery parce que Bootstrap semble très populaire.
Hier j'ai fini de migrer mon premier site de Bootstrap 4 à Bootstrap 5, donc surtout de jQuery à Vanilla JS.
C'est à dire qu'il a fallu réécrire les fonction jQuery en Vanilla ?
 

spout

WRInaute accro
Pourtant Bootstrap 4 pouvait fonctionner sans jQuery déjà non ?
Oui sauf certains composants (tabs, tooltip, ...)

C'est à dire qu'il a fallu réécrire les fonction jQuery en Vanilla ?
Oui, mais assez simple dans l'ensemble.

Code:
$(function () {})
document.addEventListener('DOMContentLoaded', function () {})

$('#foobar')
document.getElementById('foobar')

$('.foobar')
document.querySelectorAll('.foobar').forEach(element => {})

$('#foobar').append('<p>Test</p>')
document.getElementById('foobar').insertAdjacentHTML('beforeend', '<p>Test</p>')

// etc
 

yule

WRInaute occasionnel
@spout j'ai vu aussi que tu as pris les icons de Bootstrap.. Tu en penses quoi pour rester dans du "léger.." ?

J'ai essayé icofont mais plus rien d'actualisé depuis 2018 et maintenant j'essaye lineicons mais à part la version payante, bof...

A+
Yule
 

spout

WRInaute accro
@yule je n'ai pas comparé la taille, j'ai pris celles de Bootstrap au lieu de Font-Awesome parce que c'est intégré comme dans la version 2 (glyphicons) et qu'il y en a qd même 1200.
 

Discussions similaires

Haut