Comment j'ai utilisé l'ia pour développer un module jahia en javascript en un temps record

Accélérer le développement front-end sur jahia grâce à l'ia, en s'inspirant de projets existants

Depuis la version 8.2, Jahia a ouvert une nouvelle voie passionnante pour les développeurs front-end : la possibilité de créer des modules entièrement en JavaScript (TypeScript/React). Cette évolution majeure signifie qu'il n'est plus nécessaire d'être un expert Java pour construire des expériences riches et intégrées sur la plateforme.

La philosophie de Jahia est astucieuse : le rendu se fait principalement côté serveur (Server-Side Rendering) en utilisant des helpers JavaScript pour accéder au contexte Jahia et aux données du JCR (le référentiel de contenu). Ensuite, grâce à un mécanisme d'hydratation sélective appelé "Island Architecture", les composants peuvent devenir interactifs côté client. Cela offre une liberté totale aux développeurs pour animer leur front-end tout en conservant des performances optimales.

Le point de départ : le projet de référence 'jahia-luxe-demo'

Pour démontrer la puissance de cette nouvelle approche, les équipes de Jahia ont mis à disposition un site de référence complet : 'Jahia-luxe-demo'. Ce projet, disponible sur GitHub (https://github.com/Jahia/luxe-jahia-demo), simule un site d'annonces immobilières de luxe. Il constitue une mine d'or pour comprendre les bonnes pratiques du développement JavaScript sur Jahia.

Inspiré par cette démo, je me suis lancé un défi : utiliser une IA de code pour recréer un front-end similaire, mais pour des annonces entre particuliers. Le mécanisme de base (affichage, recherche, filtres) est très proche, mais les types de contenu sont totalement différents.

Le contexte est roi : donner à l'ia les clés du royaume

L'un des facteurs de succès les plus importants lorsqu'on travaille avec une IA pour générer du code est sa capacité à comprendre le contexte complet de l'application. Dans mon cas, cela signifiait deux choses :

1.  L'IA devait avoir accès à l'intégralité du code source de ma nouvelle application, que j'ai nommée 'ClassifiedAds'. 
2.  Plus important encore, elle devait pouvoir s'inspirer activement du code de 'Jahia-luxe-demo'.

Pour ce faire, j'ai mis en place un environnement de développement local simple mais efficace avec VSCode :
*   J'ai cloné le dépôt 'Jahia-luxe-demo'.
*   Au même niveau dans mon arborescence de fichiers, j'ai créé le projet de mon module 'ClassifiedAds'.

Cette structure a permis à l'assistant IA (dans mon cas, un outil de type Codex/Copilot) de "voir" et d'analyser les deux projets simultanément.

Pour démarrer un module Jahia Javascript, suivre le tutoriel : https://academy.jahia.com/tutorials-get-started/front-end-developer/introduction

Première étape : définir le modèle de contenu avec l'ia

La première tâche a été de demander à l'IA de générer la définition de mon type de contenu 'ClassifiedAd' (une petite annonce). Pour guider sa créativité, je lui ai demandé de s'inspirer du standard bien connu schema.org. En quelques secondes, j'obtenais une définition de contenu structurée et pertinente, prête à être intégrée dans Jahia.

Le cœur du réacteur : répliquer la logique de recherche et d'affichage

Le principal défi consistait à reproduire la fonctionnalité de recherche à facettes présente dans Jahia-luxe-demo. Dans ce projet, les composants qui m'intéressaient le plus étaient :
*   'Estate' : La vue détaillée d'un bien immobilier.
*   'SearchEstate' : Le composant de recherche qui exécute une requête GraphQL avec des filtres pour affiner les résultats.

J'ai alors utilisé un prompt très direct dans mon éditeur, en indiquant les chemins locaux des fichiers à analyser :

> "Explore '../jahia-luxe-demo/packages/template-set/src/components/Estate' et 'SearchEstate'. Inspire-t'en et applique la même logique à mon composant 'ClassifiedAds'. Considère comme facettes de recherche les propriétés suivantes : 'category', 'condition', 'type', 'availability' et 'price'."

Le résultat a été spectaculaire. L'IA a :
1.  Analysé la structure des composants React de la démo.
2.  Compris comment la requête GraphQL était construite dynamiquement à partir des filtres sélectionnés.
3.  Généré un nouveau composant 'SearchClassifiedAds' et les vues associées (serveur et client), en adaptant la logique aux nouvelles facettes que je lui avais fournies.

La base de mon application était désormais solide, (https://github.com/smonier/classifiedads) directement calquée sur l'implémentation de référence fournie par les experts de Jahia.

Conclusion : une nouvelle ère de productivité

Cette expérience démontre un changement de paradigme. En fournissant à une IA un contexte riche et pertinent (ici, un projet de référence de haute qualité), on peut dépasser la simple génération de snippets de code pour assembler des fonctionnalités complexes en un temps record.

Le rôle du développeur évolue : il devient un architecte qui guide l'IA, valide ses propositions et itère rapidement pour affiner le produit final. Pour les développements sur des plateformes comme Jahia, cette approche est incroyablement puissante. Elle permet de s'approprier rapidement les bonnes pratiques et de se concentrer sur la valeur ajoutée métier plutôt que sur la réécriture de logiques complexes.