Une association de formation professionnelle nous a contactés avec un besoin clair et un budget qui l’était tout autant : un thème WordPress classique, gardé pour l’essentiel du contenu, mais avec un module de recherche de formations dynamique, filtrable en direct sans recharger la page. Le devis initial en React complet, avec build Webpack, gestion d’état et composants réutilisables, atteignait trente-cinq jours de développement. Le budget du client en autorisait douze.
Ce retour d’expérience ne traite pas du headless partiel avec React et ses îlots interactifs, une approche déjà couverte ailleurs sur ce blog pour des projets à budget plus confortable. Il documente un choix différent, fait par nécessité, et ce qu’il a réellement donné une fois livré.
Le choix d’Alpine.js, par élimination
Alpine.js s’est imposé pour une raison simple : aucune étape de build n’est nécessaire pour l’utiliser. Une simple balise script chargée depuis un CDN, et la directive x-data suffit à rendre n’importe quel bloc HTML du thème interactif, directement dans les templates PHP existants. Pas de package.json, pas de webpack.config.js, pas de pipeline de déploiement à faire évoluer pour une association qui gère elle-même la maintenance courante de son site entre deux missions de l’agence.
Le module de recherche, tel qu’il a été construit
<div x-data="rechercheFormations()" x-init="charger()">
<input type="text" x-model="filtre" placeholder="Rechercher une formation">
<ul>
<template x-for="formation in formationsFiltrees" :key="formation.id">
<li x-text="formation.title.rendered"></li>
</template>
</ul>
</div>
<script>
function rechercheFormations() {
return {
filtre: '',
formations: [],
async charger() {
const reponse = await fetch('/wp-json/wp/v2/formation?per_page=100')
this.formations = await reponse.json()
},
get formationsFiltrees() {
return this.formations.filter(f =>
f.title.rendered.toLowerCase().includes(this.filtre.toLowerCase())
)
}
}
}
</script>
Ce bloc s’insère directement dans le template page-formations.php du thème classique, sans rien changer au reste du site : en-tête, pied de page, menu et articles restent gérés par WordPress comme avant, seul ce module précis devient un îlot interactif consommant l’API REST native.
Le temps réellement passé
Le module complet, filtre par mot-clé et filtre par catégorie de formation combinés, a été livré en douze jours, contre les trente-cinq initialement estimés pour une version React équivalente avec build et tests. La majeure partie de l’écart s’explique par l’absence totale de configuration d’outillage : aucun temps passé sur un pipeline de build, aucune dépendance à mettre à jour, aucun composant à découper pour un cas d’usage aussi restreint.
| Poste de travail | Estimation React | Réalisé Alpine.js |
|---|---|---|
| Mise en place de l’outillage | 4 jours | 0 jour |
| Développement du module | 18 jours | 9 jours |
| Intégration au thème existant | 8 jours | 2 jours |
| Tests et corrections | 5 jours | 1 jour |
Ce qu’Alpine.js ne sait pas faire aussi bien
- Aucune gestion de routage côté client : chaque page reste une page WordPress classique, ce qui convenait parfaitement ici mais aurait limité un projet plus ambitieux.
- La réutilisation de composants entre plusieurs pages reste plus artisanale qu’avec un vrai système de composants React ou Vue.
- Le débogage d’un état complexe, avec plusieurs directives
x-dataimbriquées, devient vite plus difficile à suivre qu’avec les outils de développement dédiés à React.
Alpine.js n’est pas un concurrent de React, c’est un outil pour un problème différent : un site majoritairement classique avec quelques poches d’interactivité, pas une application front complète.
Notre verdict
Pour ce client précis, avec ce budget précis et ce besoin précis, Alpine.js a été le bon choix, sans hésitation a posteriori. Le site est resté un thème WordPress classique pour l’essentiel, l’association continue de le gérer sans compétence technique particulière, et le module de recherche fonctionne exactement comme prévu. La bascule vers un framework complet ne se justifiera que si le nombre d’îlots interactifs se multiplie au point de justifier l’investissement dans un vrai outillage de build, ce qui n’est pas le cas aujourd’hui sur ce projet.
