Vue.js à l’Assurance Maladie
L’Assurance Maladie est une branche de la Sécurité Sociale qui a pour mission de garantir l’accès universel aux soins.
Afin de répondre à cette mission, la filière Digital met en place des outils pour faciliter le travail des agents et les démarches des assurés. Depuis quelques temps, nous avons commencé à utiliser Vue.js, voici un état des lieux de nos travaux.
Notre premier projet avec Vue.js
Notre premier projet réalisé avec Vue.js a été lancé en mars 2018, il s’agit du site Étudiants étrangers qui a pour but de faciliter l’inscription des étudiants étrangers à la Sécurité Sociale. Le site est composé d’un front-office accessible via l’extérieur et d’un back-office accessible en interne pour les agents.
Nous avions utilisé un template Vue CLI 2, et c’est à ce moment que nous avons choisi Vuetify comme librairie de composants pour son nombre important de composants existants.
Grâce à la courbe d’apprentissage de Vue.js et la simplicité d’utilisation dont Vuetify faisait déjà preuve à l’époque, les développeurs Symfony ont pu commencer à créer les interfaces du projet assez rapidement, en utilisant les composants comme des briques LEGO.
Le site est passé en maintenance opératoire et compte plus de 60 000 utilisateurs, l’expérience Vue.js fut un succès !
Un retour sur expérience nous a permis de confirmer l’intérêt des développeur·se·s pour la technologie, et de remonter quelques points à améliorer, comme par exemple l’intégration avec Twig que nous ne trouvions pas optimale.
Projet Questionnaire Risque Pro
En parallèle, un autre projet a commencé à intégrer Vue.js dans son architecture. Il s’agit du projet Questionnaire Risque Pro qui permet de compléter un questionnaire pour les employés et employeurs suite à une déclaration de risque professionnel.
Nous sommes parti d’un Proof of Concept dans une page du back-office pour au final le refaire entièrement petit à petit avec Vue.js.
C’est ainsi que nous avons constaté la flexibilité qu’offre ce framework. En effet, nous avons pu refaire certaines parties du site sans repartir de zéro, ce qui a permis une adoption progressive de Vue.js par l’équipe.
Une refonte du front-office est programmée en début d’année prochaine. Ainsi, le site sera entièrement réalisé avec Vue.js et le code front et l’API seront entièrement séparés, pour correspondre aux dernières recommandations au niveau de l’architecture.
Stack technique
Dans le but de simplifier le démarrage de nouveaux projets, nous avons travaillé sur une stack technique afin de répondre d’une manière standard aux problématiques rencontrées lors du développement des applications avec Vue.js.
Le framework Vue.js est vraiment flexible et vient sans architecture prédéfinie, ce qui a des avantages mais aussi des inconvénients. On peut le rendre aussi complexe que l’on souhaite !
Nous avons donc créé une application standard utilisant Vue CLI 3, Vuetify, TypeScript et incluant les dépendances habituelles comme Vue router ou Vuex.
Nous avons choisi d’utiliser TypeScript pour faciliter l’adoption et le développement pour les développeur·se·s venant de langages typés comme Java, et également car il permet de rendre le code plus robuste et s’intègre bien avec les éditeurs comme VS Code.
Il existe toujours une version de l’application standard en JavaScript qui est utilisée lorsque l’on estime trop important le coût de la montée en compétences d’une équipe sur TypeScript.
Cette application standard a d’abord pris la forme d’un outil personnalisé en ligne de commande nommé Vue Dash, et est actuellement en train d’être réécrite pour utiliser un plugin et un preset Vue CLI, ce qui réduira le coût de la maintenance.
La mise en place de cet outil est un succès car il réduit significativement le temps de configuration d’un nouveau projet.
Adoption par d’autres équipes
Suite à l’utilisation de Vue.js par plusieurs projets dans la filière, d’autres acteurs de l’Assurance Maladie ont essayé puis adopté le framework. C’est le cas notamment d’une autre filière qui travaille avec les développeur·se·s dans les CPAM.
Nous travaillons également avec les développeuses d’une CPAM pour réaliser un outil destiné aux agents. Son objectif est de simplifier le travail de contrôle des anomalies lié à la Protection Universelle Maladie.
Nous avons accompagné et formé les développeuses pendant environ six mois, elles sont maintenant complètement autonomes et sont capables d’assurer la maintenance opérative de l’application et d’ajouter de nouvelles fonctionnalités. L’expérience d’accompagnement s’est révélée très concluante, c’est pour cela que nous avons décidé de continuer dans ce sens et de nous rapprocher d’autres équipes.
Ainsi, nous avons accompagné une équipe dans la réalisation d’une application destinée aux médecins qui a pour but de simplifier les déclarations d’accident du travail et de maladies professionnelles. L’équipe est montée très rapidement en compétences et a pu délivrer l’application dans les délais. Elle se concentre maintenant sur la correction des derniers bugs et le refactoring pour rendre l’application plus maintenable.
Suite à ces réussites, nous continuons d’accompagner d’autres équipes et nous avons actuellement deux nouveaux projets utilisant Vue.js ! L’un met en place un scan de sécurité pour les projets, et l’autre concerne les parcours maternités.
Image node.js et déploiement
Afin d’industrialiser le développement d’applications avec Vue.js, nous avions besoin de l’intégrer à notre plateforme OpenShift et de mettre en place de l’intégration continue pour pouvoir lancer automatiquement les tests, builds et déploiements.
Un groupe de développeurs et d’OPS se sont réunis afin de créer une image Node.js répondant à nos besoins, notamment de construire l’application puis de pouvoir la déployer dans un conteneur Node.js, ou envoyer le build dans une image PHP pour les projets où Vue.js est encore intégré avec Symfony.
Après six mois d’utilisation, et grâce à la migration progressive des applications vers une architecture front/back séparée, nous étudions la mise en place d’une nouvelle solution plus simple à maintenir utilisant NGINX.
Design System et librairie de composants
Dans le cadre de notre objectif d’homogénéisation des pratiques pour le développement front-end, nous travaillons avec les UX/UI depuis août 2018, afin d’établir un Design System qui réduira le temps consacré à la réalisation des maquettes et simplifiera les développements, le but final étant de réduire le temps et le coût de réalisation des projets.
L’implémentation principale est une librairie de composants et d’utilitaires nommée Vue Dot. Nous mettons dedans le code que nous voulons partager entre les projets. Ce sont principalement des composants mais il y a également des mixins, des directives, des règles de validation et des fonctions.
Elle est construite comme une surcouche de Vuetify (qui nous fournit les composants de base), ce qui nous permet de nous concentrer sur des besoins plus spécifiques à nos projets, et également d’harmoniser l’expérience utilisateur, et donc de réduire le temps de prise en main des nouveaux outils.
Notre Design System n’en est qu’à ses débuts, et nous sommes toujours en phase de définition des différents processus pour augmenter notre efficacité, mais nous constatons déjà les effets bénéfiques, que ce soit du point de vue des développeurs ou des designers.
En effet, lorsqu’une amélioration graphique ou lorsqu’un bug est corrigé dans la librairie de composants, une simple mise à jour suffit pour que tous les projets puissent en bénéficier !
Il existe l’équivalent côté design, les différents éléments n’ont plus qu’à être utilisés et n’ont plus besoin d’être à nouveau définis.
Nous dépendons grandement de différents éléments Open-Source, nous voulons donc rendre ce que nous donne la communauté, c’est pourquoi notre Design System est disponible sur Github, n’hésitez pas à aller y jeter un œil si cela vous intéresse !
Adoption officielle
En septembre 2019, après la création et la présentation d’un dossier au Comité de Gestion Technologique de la CNAM, Vue.js a été officiellement choisi comme remplaçant d’AngularJS pour la création de clients graphiques riches. Cela va simplifier nos travaux d’accompagnement et nous conforte dans les choix que nous avons fait !
Nos prochains objectifs
Nous avons déjà parcouru un petit bout de chemin, et nous souhaitons continuer à évoluer !
Nos prochains objectifs sont donc d’améliorer les performances de nos applications en utilisant le rendu côté serveur. Nous souhaitons également continuer à améliorer notre Design System en le complétant, en le rendant plus robuste et en créant une documentation qui sera utile aux différents utilisateurs de notre système.
Nous souhaitons également améliorer l’accompagnement des équipes en créant des supports pour aider la montée en compétences, ainsi qu’écrire nos bonnes pratiques et nos recommandations d’une façon collaborative dans un endroit accessible à toutes les équipes.
En conclusion, Vue.js et les outils que nous avons mis en place nous permettent de collaborer plus efficacement entre les équipes, et nous espérons pouvoir partager de plus en plus notre travail avec la communauté à l’avenir !