Migration jQuery → Vanilla ES6

⚡ En bref

Ce site a été migré de jQuery vers du JavaScript natif (Vanilla ES6). Une dépendance externe de 87 Ko supprimée, remplacée par du code moderne qui fait exactement la même chose — sans téléchargement supplémentaire, sans bibliothèque tierce.

Pour les visiteurs, rien ne change. Pour la sécurité et les performances, c’est une amélioration mesurable.

🧠 Pourquoi

jQuery était indispensable en 2010 quand les navigateurs étaient tous différents. En 2026, les navigateurs modernes supportent nativement tout ce que jQuery faisait :

• $(selector) → document.querySelector()
• $.ajax() → fetch()
• $(el).on('click', fn) → el.addEventListener('click', fn)
• $(document).ready() → document.addEventListener('DOMContentLoaded', fn)

Conserver jQuery aujourd’hui, c’est charger 87 Ko de code dont on n’a plus besoin.

🔧 Ce qui a été fait

Le thème Grav par défaut (Quark) utilisait jQuery pour quatre fonctions :

• L’en-tête scrollée — ajouter/retirer une classe CSS quand on fait défiler la page
• L’effet parallaxe — décaler le fond en fonction du scroll
• Le menu mobile — ouvrir/fermer l’overlay de navigation au clic
• Le tree menu — gérer l’ouverture des sous-menus dans la navigation mobile

Chacune a été réécrite en JavaScript ES6 natif, sans aucune dépendance externe. Un thème indépendant arleo a été créé à partir de Quark, puis Quark a été supprimé du serveur.

🔍 Avant / Après — chargement JS

Avant :

<!-- Chargement de jQuery (87 Ko) -->
<script src="/system/assets/jquery/jquery-3.x.min.js"></script>
<!-- Plugin treemenu dépendant de jQuery -->
<script src="/user/themes/quark/js/jquery.treemenu.js"></script>
<!-- Code applicatif utilisant $ -->
<script src="/user/themes/quark/js/site.js"></script>

Après :

<!-- Un seul fichier, chargé en différé -->
<script src="/user/themes/arleo/js/site.js" defer></script>

⚙️ Exemple de migration — menu mobile

Avant (jQuery) :

jQuery(document).ready(function($) {
    $('#toggle').click(function() {
        $(this).toggleClass('active');
        $('#overlay').toggleClass('open');
        $('body').toggleClass('mobile-nav-open');
    });
});

Après (Vanilla ES6) :

document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('toggle');
    const overlay = document.getElementById('overlay');
    if (toggle && overlay) {
        toggle.addEventListener('click', () => {
            toggle.classList.toggle('active');
            overlay.classList.toggle('open');
            document.body.classList.toggle('mobile-nav-open');
        });
    }
});

⚙️ Tree menu sans plugin

Le plugin jquery.treemenu.js a été remplacé par une implémentation native :

document.querySelectorAll('.tree li').forEach(item => {
    const children = item.querySelector('ul');
    if (children) {
        item.classList.add('tree-closed');
        const toggler = document.createElement('span');
        toggler.className = 'toggler';
        item.insertBefore(toggler, item.firstChild);
        toggler.addEventListener('click', () => {
            setTimeout(() => {
                item.classList.toggle('tree-closed');
                item.classList.toggle('tree-opened');
            }, 300);
        });
    }
});

⚙️ Création du thème indépendant

# Copie de Quark vers arleo
cp -r /var/www/grav/user/themes/quark /var/www/grav/user/themes/arleo

# Suppression de jQuery du template de base
# partials/base.html.twig : bloc javascripts réécrit

# Activation du thème
sed -i 's/theme: quark/theme: arleo/' /var/www/grav/user/config/system.yaml

# Suppression de Quark
rm -rf /var/www/grav/user/themes/quark

🏁 Conclusion

Cette migration s’inscrit dans un effort plus large de durcissement de la sécurité du serveur arleo.eu, incluant la configuration d’un security.txt signé PGP, l’optimisation de la CSP, et la suppression des dépendances inutiles.

💡 Code source du thème disponible sur demande via security.txt.