Analyse approfondie des différences entre /v2 et /v3

8 min

Cette analyse intègre également les recommandations du guide de migration officiel (/v3/docs/Migration/Migration-v3.md).

Ce document détaille les différences majeures entre les deux versions, en se concentrant sur les modifications de structure et de contenu des fichiers principaux.

1. Fichiers de configuration et dépendances (package.json)

Modernisation des dépendances :

/v3 utilise des versions plus récentes de Node.js (>=22) et de nombreuses librairies (React 19, Vite, ESLint 9, etc.).

/v2 utilise Webpack, /v3 migre vers Vite pour le front-end.

Les scripts sont simplifiés dans /v3 (moins de scripts personnalisés, plus d'automatisation via des outils comme Husky, lint-staged).

/v3 introduit des outils de qualité de code (Prettier, ESLint, Husky) et des tests avec Vitest.

Les dépendances métier sont rationalisées (moins de packages, plus de centralisation sur @fasstech/oip-*).

2. Application principale (App.jsx)

/v2/app/App.jsx :

Structure très simple, exporte un composant App qui retourne le Router local.

Utilise PropTypes pour typer les props.

/v3/app/App.jsx :

Structure enrichie, intègre le provider TextitProvider pour la gestion des textes/locales.

Utilise un Router importé d'un utilitaire partagé, et charge dynamiquement les vues et locales.

Plus modulaire et extensible.

3. Fichiers de styles (css)

/v2/app/css/tailwind.css :

Fichier minimal, inclut uniquement les directives Tailwind.

/v3/app/css/main.css :

Ajout de commentaires d'avertissement et d'espace pour des règles CSS personnalisées.

Toujours basé sur Tailwind, mais prêt à être enrichi.

4. Configuration JS (jsconfig.json)

/v2/jsconfig.json :

Beaucoup d'alias personnalisés pour les imports (ex: @@appHooks/*, @@appGraphQL/*, etc.).

/v3/jsconfig.json :

Rationalisation des alias, simplification pour ne garder que l'essentiel.

5. Backend principal (server/index.mjs)

/v2/server/index.mjs :

Fichier vide (semble inutilisé ou placeholder).

/v3/server/index.mjs :

Fichier complet, initialise le serveur avec des modules utilitaires, charge dynamiquement les types GraphQL, les routes, les mocks, etc.

Utilisation de la configuration centralisée et d'une architecture modulaire.

6. Vues (views/client.js)

/v2/views/client.js :

Exporte un objet views avec les vues START et HOME.

/v3/views/client.js :

Exporte un objet views avec summary et home (plus de modularité, noms en minuscules).

7. Configuration Tailwind (tailwind.config.js)

/v2/tailwind.config.js :

Syntaxe CommonJS, configuration basique.

/v3/tailwind.config.js :

Syntaxe ES module, configuration similaire mais plus moderne.

8. Migration vers v3 : points clés du guide officiel

Externalisation du setup :

Le setup du serveur et de l'app React est désormais externalisé dans la dépendance @fasstech/oip-starter-utils.

Les dossiers business/server et business/app deviennent respectivement server et app à la racine.

Migration simplifiée :

Cloner la nouvelle version du starter v3, puis copier/coller vos fichiers de configuration, vues, code métier, et config OIP dans la nouvelle structure.

Adapter la variable d'environnement OIP_WORK_DIR (./business/server → ./server).

Adapter les imports :

useProcess → @fasstech/oip-starter-utils/app.

Helpers OK, KO → @fasstech/oip-starter-utils/server.

pubsub → getPubSub de la même dépendance.

Déplacer la logique d'initialisation backend dans server/index.mjs.

Vues et configuration :

Les dossiers views et viewsConfig sont à récupérer sans modification majeure.

Adapter les imports dans les composants et resolvers selon la nouvelle structure.

Synthèse des évolutions majeures

Modernisation : /v3 adopte des outils modernes (Vite, Vitest, Husky, Prettier, etc.) et des versions récentes de Node/React.

Rationalisation : Moins de scripts personnalisés, plus d'automatisation et de centralisation.

Modularité : Les composants, vues, et configurations sont plus modulaires et extensibles.

Qualité de code : Introduction d'outils de linting, formatage, et tests plus avancés.

Internationalisation : Gestion des locales et textes intégrée dès l'App.

Remarque : Cette analyse se concentre sur les fichiers principaux, la structure et intègre les conseils du guide de migration. Pour une migration réussie, suivez les instructions du guide /v3/docs/Migration/Migration-v3.md et adaptez vos imports et initialisations selon la nouvelle architecture.