---
title: "Migration jQuery → Vanilla ES6"
description: "Migration de jQuery vers Vanilla ES6 sur Grav CMS : suppression de 87 Ko de dépendances, réécriture du menu mobile et tree-menu en JavaScript natif."
url: "https://www.arleo.eu/posts/jquery-migration/"
language: "fr"
datePublished: "2026-04-06T00:00:00+02:00"
dateModified: "2026-05-15T23:51:25+02:00"
tags: ["javascript","nginx","infrastructure","homelab"]
categories: ["infrastructure"]
contentSignal: "ai-train=no, search=yes, ai-input=yes"
---

# Migration jQuery → Vanilla ES6
Migration de jQuery vers Vanilla ES6 sur Grav CMS : suppression de 87 Ko de dépendances, réécriture du menu mobile et tree-menu en JavaScript natif.



## ⚡ 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 :**

```html
<!-- 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 :**

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

### ⚙️ Exemple de migration — menu mobile

**Avant (jQuery) :**

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

**Après (Vanilla ES6) :**

```javascript
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 :

```javascript
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

```bash
# 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

| Critère | Avant | Après |
|---|---|---|
| Scripts chargés | 3 (jQuery + treemenu + site.js) | 1 (site.js) |
| Poids JS externe | ~87 Ko | 0 Ko |
| Attribut `defer` | Non | Oui |
| Dépendances tierces | 2 | 0 |
| Compatible Trusted Types (CSP) | Non | Oui |
| Thème indépendant de Quark | Non | Oui |

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](https://www.arleo.eu/security.txt).



## Tags

- javascript
- nginx
- infrastructure
- homelab

## Categories

- infrastructure