Sommaire

• Pourquoi remplacer JQuery ?
• Par quoi remplacer JQuery ?
• Remplacer JQuery par du Vanilla JavaScript
• Pensez différemment
• WordPress, Bootstrap et ES6
• Conclusion
• FAQ

Pourquoi remplacer JQuery ?

Dans cette vidéo, nous allons découvrir comment vous pouvez vous détacher de certaines bibliothèques JavaScript comme JQuery ou Lodash et remplacer toute une série de fonctionnalités par du JavaScript pur. Cela vous permettra d’alléger votre code source tout en perfectionnant votre connaissance du langage.

Comme je l’ai mentionné dans une précédente vidéo sur le choix d’une technologie web, il est bénéfique pour votre carrière de développeur web d’être capable d’utiliser l’HTML, le CSS et le JavaScript en version « Vanilla », c’est-à-dire sans framework ou bibliothèque simplifiante. Cela vous permet d’appliquer votre maîtrise du langage pur à tous les nouveaux outils et frameworks qui sortiront au fil du temps.

Si vous maîtrisez le JavaScript de base, il vous sera plus simple d’appréhender toutes les évolutions de React, Vue ou Angular par exemple. Et bien souvent, cela vous permettra de vous passer totalement de ces bibliothèques dans de nombreux cas. C’est ce que nous allons voir aujourd’hui en vous présentant les alternatives à de nombreuses fonctionnalités que vous réalisez jusqu’à présent probablement en JQuery ou AlpineJS.

Par quoi remplacer JQuery ?

Commençons par ce qui fait le succès de JQuery, encore à ce jour, c’est-à-dire la sélection des éléments du DOM. Nous avons tous pris l’habitude d’utiliser le signe dollar et de cibler ensuite un élément du DOM via une classe ou un ID.

Remplacer JQuery par du Vanilla JavaScript

Depuis IE9, vous pouvez facilement récupérer une liste de nœuds du DOM qui correspond au sélecteur spécifié via « querySelectorAll ». Tout comme dans JQuery, vous pouvez cibler un élément en HTML, un ID ou une classe.

Sélection des éléments du DOM

Pour manipuler les éléments trouvés, contrairement à JQuery, vous devez faire une boucle sur chaque élément à l’aide d’un « forEach ». La méthode la plus simple et la compatible est d’utiliser la fonction native à JavaScript qui est « Array.forEach() ».

Il est également possible de retourner seulement la première occurrence trouvée dans le DOM en utilisant « querySelector ».

Array.ForEach()

Maintenant que vous savez nativement sélectionner des éléments, il est courant de vouloir leur ajouter une classe CSS. Dans JQuery vous utilisiez la fonction « addClass ».

Ajouter et modifier des classes via ClassList

En Vanilla JS, vous pouvez parler à la liste des classes via la propriété « classList » d’un élément du DOM. Vous avez ensuite accès aux méthodes « add » et « remove » pour ajouter ou supprimer une classe de la liste. Il existe même la méthode « toggle » qui enlèvera une classe si elle existe et l’ajoutera si elle n’existe pas.

Fade-In et Fade-Out en Vanilla JavaScript

Utilisons nos connaissances pour réaliser un effet de fondu entrant et sortant en Vanilla JS. Au chargement de la page, attendons 2 secondes via un timer puis faisons disparaître l’image. L’animation est simplement gérée via une transition CSS.

Écouter des événements en Vanilla JS

Vous utilisiez probablement les fonctions « click » et « on click » dans JQuery. Sachez que cela fonctionne quasi de la même manière en JavaScript pur. Une fois l’élément du DOM sélectionné, vous pouvez utiliser la méthode « addEventListener » et y passer l’événement que vous souhaitez écouter ainsi que la fonction à exécuter lorsque l’événement est déclenché.

Remplacer .ready() de JQuery par DOMContentLoaded

Si vous souhaitez attendre le chargement complet de la page avant de commencer à exécuter votre code JavaScript, comme vous le faisiez avec jQuery et la méthode « .ready() », vous pouvez ajouter un « addEventListener » sur le document global de la page et écouter l’événement nommé « DOMContentLoaded ».

Modifier le style d’un élément du DOM en JavaScript

Si nous avons vu comment modifier les classes CSS d’un élément, il est tout à fait possible de modifier directement son style. Remplaçons la méthode « hide() » de jQuery par son équivalent en Vanilla Javascript en accédant à la propriété « style » de l’élément et en mettant la valeur pour « display » sur « none ».

Insérer des éléments dans le DOM en JS

Pour ajouter des éléments avant ou après un élément du DOM, remplacez la méthode « after() » et « before() » de jQuery par la méthode « insertAdjacentElement » avec le paramètre ‘afterend’ ou ‘beforebegin’.

Modifier des éléments dans le DOM en JavaScript

Tant que nous parlons de la manipulation du DOM, il existe également la méthode « AppendChild » pour remplacer le « append() de JQuery.

Pour éditer ou accéder au texte ou à l’HTML d’un élément du DOM, vous pouvez utiliser la propriété « textContent » et « innerHTML » en JavaScript. Cette propriété vous permet à la fois de récupérer la valeur ou d’en assigner une nouvelle valeur.

Pensez différemment

Je vais arrêter les exemples ici car le but de cette vidéo n’est pas d’être une liste exhaustive des méthodes existantes ni même un cours complet sur le JavaScript. J’espère toutefois vous avoir permis de vous rendre compte qu’il est désormais tout à possible de se passer complètement de bibliothèques qui étaient jusqu’ici indispensables.

WordPress, Bootstrap et ES6

Même si des CMS comme WordPress continuent d’utiliser JQuery, de nombreux frameworks comme Bootstrap ont fait le choix de ne plus l’utiliser. Ce choix fait d’autant plus sens que les nouvelles normes comme Ecma Script 6 sont désormais supportées par tous les navigateurs et rendent l’écriture du JavaScript encore plus efficace.

Conclusion

Si vous souhaitez vous assurer qu’une méthode en JavaScript est bien compatible avec les navigateurs, je vous invite à regarder cette autre vidéo et être certain de ne pas vous tromper dans la lecture des résultats de compatibilité comme je le vois encore trop souvent.

En attendant, pour vous former et rester informés des dernières technologies de développement internet, abonnez-vous à Parfaitement web.

FAQ