Besoin Client
Le projet HRnet consistait en une refonte complète d'une application de gestion des ressources humaines. Initialement développée avec jQuery, l'objectif était de moderniser l'architecture en adoptant React pour améliorer la maintenabilité, réduire la dette technique et offrir une expérience utilisateur optimisée.
Contexte et Objectifs du Projet
L'application existante présentait des limitations en termes de performance et de flexibilité. Le principal défi consistait à migrer le code source tout en préservant les fonctionnalités. En plus de cette migration, les plugins jQuery obsolètes ont été remplacés par des bibliothèques React modernes.
Technologies et Bibliothèques Utilisées
- React : Interface utilisateur dynamique et modulaire.
- react-datepicker : Sélection de dates intuitive.
- andyrama-modal : Gestion des fenêtres modales personnalisées.
- react-select : Menus déroulants avancés.
- react-table : Gestion efficace des tables de données.
Processus de Migration et Développement
- Analyse et Planification : Identification des composants critiques.
- Environnement React : Configuration de Webpack et Babel.
- Migration Progressive : Conversion des composants jQuery en React.
- Tests et Validation : Tests unitaires et fonctionnels pour garantir la qualité.
- Optimisation : Réduction des goulots d'étranglement pour améliorer la réactivité.
Résultats et Bénéfices
- Réduction de la Dette Technique : Architecture moderne et maintenance simplifiée.
- Performances Améliorées : Temps de chargement réduits et fluidité accrue.
- Expérience Utilisateur Améliorée : Interface intuitive et rapide.
Compétences Développées
- Migration d'applications legacy.
- Intégration de bibliothèques React.
- Gestion et optimisation de projets complexes.
Ressources et Outils
- Maquettes : Figma.
- Gestion de Projet : Trello.
- Éditeur : Visual Studio Code.
- Contrôle de Version : Git et GitHub.
Prérequis
- Git.
- Node.js (18.18.1).
- npm (6.14.17).
Accès au Projet
- Code Source : GitHub.
- Production : WealthHealth.com.
Conclusion
Ce projet met en avant une transition réussie vers des technologies modernes tout en maintenant les fonctionnalités existantes. Il témoigne de l'expertise en développement web et en optimisation d'applications legacy.
Technologies utilisées
- React
- Webpack
- Babel