JQuery commence à se faire vieux, avec quelle technologie le remplacer ?

Salut par ici 🙂

Suite à certains de mes derniers articles, vous avez été quelques-uns à m'envoyer un petit mail pour me demander “Mais … dans les applications legacy, par quoi je remplace JQuery ?”

Du coup, quand une question revient, vous savez ce qu’on fait ? On écrit un article … pour en faire profiter tout le monde.

Bootstrap 5, la dernière étape de la fin de JQuery ?

Faisons rapidement un peu d’histoire.
JQuery est arrivé sur la planète Terre en 2006, pour rappel à l’époque, dans le web il y avait un gros problème (il s’appelait Internet Explorer 🤣, roh ça va, on blague 😝), ce problème c’est que chaque navigateur avait sa façon très personnelle d'interpréter le JavaScript, le même code JavaScript était interprété de manière différente par Firefox et Internet Explorer (Chrome n’existait pas encore).

JQuery est arrivé et a permis “d’unifier tout ça”, il fait le relais entre le code du développeur et le navigateur, une seule base de code permet d’être fonctionnel “partout”, bon, avec quelques petites exceptions … (je refais la blague sur IE ?)

Il est encore utilisé aujourd’hui même si souvent “raillé” par les développeurs, d’une part car un dev aime la nouveauté et qu’il n’y a pas plus “legacy” que JQuery, mais également pour d’autres raisons : 

• L'interopérabilité de JavaScript entre chaque navigateur n’est plus si désastreuse
• Les applications web modernes utilisent des outils plus poussés comme React / Redux ou encore Angular

Jusqu'à Bootstrap 4, JQuery était encore une dépendance, mais, depuis la version 5 les développeurs de Bootstrap ont supprimé cette dépendance, selon moi c’était la dernière étape pour que JQuery s’en aille.

Perso; dans certains projets il est encore là et je n’ai pas vraiment de problème avec lui, je l’en sortirais quand j’en sentirais le besoin.

React / Redux ou encore Angular ou VueJS ne sont pas des remplaçants de JQuery, ils ont été créés pour résoudre des problèmes plus complexes.

Il est tout à fait possible d’écrire une application web complexe avec JQuery, mais cela ferait vraiment beaucoup de lignes de code pour pas grand-chose … 

JQuery était top pour les petits sites internet, ce type de site ou la page recharge entièrement quand on clique sur un lien, mais qu’on veut un peu de dynamisme quand même … du coup, dans ce cas-là, par quoi on le remplace ?

Les outils pour remplacer JQuery

Fetch, pour faire des requêtes HTTP (Ajax)

L’un des usages de JQuery est de faire des requêtes HTTP, pour aller chercher des informations complémentaires une fois la page chargée, ou pour mettre à jour le contenu après une action de l’utilisateur.

L’API fetch() fait maintenant complètement parti des navigateurs, elle permet de faire des requêtes HTTP et vu que c’est intégré au moteur des navigateurs pas besoin d'importer d’autres librairies, c’est top !

Pour ceux qui veulent plus de possibilités et se sentent limités par les possibilités offertes par fetch, jetez un œil auprès de la “lib” “axios”.

Le JavaScript natif pour changer le contenu de la page

Pour cette partie-là,à savoir mettre à jour le contenu d’un élément, il n’y a pas à chercher loin non plus, il suffit d’utiliser par exemple la méthode innerHTML disponible sur tous les éléments de votre DOM, fonctionne également partout, donc, pas de soucis à se faire de ce côté-là.

Et pour les événements (click, hover, focus … etc.)

Ici cela peut être très simple également, il suffit d’ajouter un “event listener” avec la méthode addEventListener(), sur un élément, sur le “body”, la logique reste la même qu’avec JQuery en fait, ce sont juste les noms des méthodes qui changent.

Stimulus pour aller plus loin
Je suis personnellement très fan de Stimulus, elle permet notamment via le HTML de suivre beaucoup d'événements sans se prendre la tête et sans écrire des millions de lignes de code (inutile).

Pour aller plus loin, jetez un œil à Stimulus Use, avec plein d'événements, faciles à importer, sans prise de tête.
Je suis un très grand fan de Stimulus et je l’utilise dans de plus en plus de projets, une fois qu’on y a goûté, c’est difficile de revenir en arrière, de simples attributs HTML permettent déjà de faire plein de choses… 

Pour aller encore plus loin ?
Avec JQuery j’ai déjà vu des sites, qui remplaçaient la quasi-totalité de la page en faisant une requête AJAX et en écrivant sur le DOM le contenu récupéré auprès du serveur.

La librairie grande sœur de Stimulus permettant de faire ça est Turbo, dont je vous ai déjà parlé.

Mais ici je pense qu’on sort d’un cas d’usage “Normal” de JQuery donc je ne m’y attarde pas.

Conclusion

En fait, si on regarde bien, globalement, il suffit d’utiliser les API des navigateurs pour remplacer ce que fait JQuery.
C’est pour ça qu’il est aujourd’hui souvent “raillé” par les dev, c’est devenu une surcouche dont on peut se passer.
Mais les gars, n’oublions pas les services qu'ils nous ont rendus (Non par ce qu’Internet Explorer 6 c’était quelque chose !!!!)

À la prochaine 😁