Suppression de jQuery

Posté le 28/10/2022 | 0 commentaire non classé | Retour à la liste

C'était une idée voulue depuis le départ, la suppression de jQuery dans 299Ko. Faute de temps, et de priorité, cela n'a pas pu être fait dans la version 1. Mais j'ai pu avoir un énorme coup de main 😃

jQuery

Pour ceux qui ne connaissent pas, jQuery est une bibliothèque JavaScript permettant de simplifier l'écriture des scripts coté navigateur. De façon moins théorique, il facilite les effets visuels des pages Internet comme un affichage progressif des éléments masqués (Slide), ou une manipulation des éléments du DOM.

Il faut avouer que lorsqu'on est plutôt comme moi orienté back-end, comprenez langage serveur (PHP ici), jQuery a grandement facilité ce coté des choses, puisqu'il possédait une courbe d'apprentissage bien plus rapide que le JavaScript pur (vanilla JS). De plus, à la création de 99ko (2010 je crois), certaines fonctionnalités de cette librairie était très difficiles à mettre en place pour les non initiés.

Alors, pourquoi s'en passer ?

Notez bien que j'ai dit "possédait". Et oui, si jQuery n'a pas énormément changé depuis 2010, les navigateurs l'ont fait, et surtout depuis 2015, avec la norme ECMAScript 2015. Concrètement, cela signifie que les navigateurs ont dû implémenter la majorité des fonctionnalités de jQuery en natif. Et ça ça change la donne. A tel point qu'à présent, sans trop peu d'efforts, on peut se permettre de s'en passer.

Car il y a toujours un revers de médaille. Forcément, même si 299Ko appelait jQuery depuis un CDN, cela ajoutait malgré tout une latence supplémentaire, comme à chaque appel de fichier. De plus, celui-ci charge énormément de fonctions alors que notre CMS n'en utilise peut-être que 3 ou 4.

Aussi, c'était déjà décidé, encore fallait-il le faire.

Merci

Pour cela, j'ai pu compter sans même lui demander sur un blogueur que je connaissais déjà depuis 4 ou 5 ans. Il s'agit de ShevAbam, qui a réécrit quasiment toute la partie JS de 299Ko, faisant bondir le projet de suppression de jQuery d'un énorme pas en avant.

Par exemple :

// jQuery
$(document).ready(function () {
    $(".msg").each(function (index) {
        $(this).children(".msg-button-close").click(function () {
            $(this).parent().dequeue();
        });
        $(this).delay(5000 + index * 5000).slideUp();
    });

// vanilla

    function fadeOut(el) {
        el.style.opacity = 1;
        (function fade() {
                if ((el.style.opacity -= .03) < 0) {
                        el.style.display = "none";
                } else {
                        requestAnimationFrame(fade);
                }
        })();
    }

document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll('.msg').forEach(function (item, index) {
        item.querySelector('.msg-button-close').addEventListener('click', function () {
            fadeOut(item);
        });
        setTimeout(function () {
            fadeOut(item);
        }, 5000 + index * 5000);
    });

Il n'y avait plus qu'à supprimer l'appel à la librairie dans le cœur du CMS, et c'est fini.

Un énorme merci à ce touche à tout. Je vous incite d'ailleurs à jeter un œil à son blog, plein de bonnes lectures. Vous y trouverez des réalisations persos ou des liens intéressants, comme de la génération de données JSON que j'utilise souvent :)

Normalize

Pendant qu'on y était, la librairie CSS normalize a également été supprimée au profit d'un simple Reset CSS inclut directement dans le thème, afin de pouvoir supprimer ce reset dans le thème utilisateur et encore et surtout, gagner encore un peu de temps à l'affichage d'une page :)