10.4 — Le monde sans jQuery

⏱️ TL;DR — Bootstrap 5 a supprimé jQuery. Le JS est réécrit en modules ES vanilla. Concrètement : on n’écrit plus $('#m').modal('show') mais new bootstrap.Modal('#m').show(). Les data-attributes passent de data-toggle (v4) à data-bs-toggle (v5). C’est plus léger, plus standard, et sans dépendance externe (hors Popper).

🎯 Objectifs

• Traduire du code v4 (jQuery) en v5 (vanilla).
• Connaître les changements de nommage.
• Comprendre pourquoi ce choix.

Avant / après

// Bootstrap 4 (jQuery)
$('#m').modal('show')
$('.tip').tooltip()
$('#m').on('shown.bs.modal', () => { … })
 
// Bootstrap 5 (vanilla)
new bootstrap.Modal('#m').show()
document.querySelectorAll('.tip').forEach(el => new bootstrap.Tooltip(el))
document.querySelector('#m').addEventListener('shown.bs.modal', () => { … })

Changements de nommage

Le passage left/right → start/end prépare le support RTL (voir Partie 12).

Pourquoi supprimer jQuery ?

• Poids : jQuery pesait ~30 ko gzip pour des fonctionnalités désormais natives (querySelectorAll, classList, fetch, addEventListener).
• Standards : le DOM moderne rend jQuery superflu.
• Interop : plus de conflit de versions jQuery, meilleure cohabitation avec React/Vue.

Sélecteurs et manipulation en vanilla

document.querySelector('.card')                 // $('.card')
document.querySelectorAll('.item')              // $('.item')
el.classList.add('active')                      // .addClass('active')
el.classList.toggle('d-none')                   // .toggleClass('d-none')
el.addEventListener('click', fn)                // .on('click', fn)

⚠️ Piège — Migrer un projet v4→v5 sans mettre à jour les data-attributes : data-toggle="modal" (v4) ne fait rien en v5, il faut data-bs-toggle="modal". C’est la cause n°1 des « composants qui ne réagissent plus » après migration.

💡 Pour un dev React — L’abandon de jQuery est une bonne nouvelle : plus de manipulation directe du DOM qui entre en conflit avec le virtual DOM de React. Le JS vanilla de Bootstrap reste toutefois impératif ; dans React, react-bootstrap reste préférable.

✏️ Exercices

1. Traduire $('#t').tab('show') en Bootstrap 5.

2. Un composant migré de v4 ne réagit plus. Quelle vérification en premier ?

🧠 Quiz de révision

🎉 Fin de la Partie 10 ! Partie suivante : Partie 11 — Bootstrap avec React & Next.js