par Marie Morisi
Le produit d'ImVitro, EMBRYOLY, est une plateforme SaaS qui assiste les embryologistes dans leurs évaluations d'embryons et aide à gérer les besoins de gestion d'embryons des centres de FIV. Avec l'augmentation de l'infertilité et les défis et attentes croissants auxquels les embryologistes sont confrontés dans le laboratoire, nous avons créé un produit qui s'intègre parfaitement dans leur flux de travail.
Bien que ce billet puisse être lu par n'importe quel public, il est plus pertinent pour les développeurs web, y compris ceux qui pourraient être intéressés à nous rejoindre chez ImVitro. Je suis Marie, la développeuse frontale en chef, et dans ce billet je vais vous présenter l'application de notre produit et comment il nous aide à atteindre nos objectifs chez ImVitro.
Qu'est-ce qu'une application à page unique ?
Les applications à page unique (SPA) sont des applications web qui chargent une seule page HTML et mettent à jour dynamiquement le contenu de cette page au fur et à mesure que l'utilisateur interagit avec l'application. En d'autres termes, les nouvelles pages n'ont pas besoin d'être entièrement rechargées à partir du serveur, et seul le nouveau contenu doit être chargé.
Étant donné que de nombreux sites web affichent fréquemment certains éléments sur chaque page, tels que l'en-tête, le pied de page ou le menu, l'utilisation d'une ASP est utile car elle supprime la nécessité de recharger ce contenu sur chaque page. Le chargement de la première page peut prendre un peu plus de temps que celui des autres pages, car le navigateur doit télécharger et exécuter l'ensemble du code de l'application avant que le contenu ne soit affiché, mais une fois l'application entièrement chargée, aucun autre chargement n'est nécessaire.
Avec les SPA, l'expérience de navigation est rapide, ce qui nous aide à améliorer nos performances et à offrir une expérience utilisateur plus fluide et plus dynamique.
De nombreuses grandes entreprises technologiques comme Google (Gmail, Google Maps), Netflix, Airbnb et bien d'autres choisissent d'utiliser des SPA pour créer leurs applications. Bien que le développement d'une SPA présente de nombreux avantages, elle n'est pas forcément adaptée à tous les projets. Dans le secteur des technologies médicales en particulier, les SPA peuvent être particulièrement utiles pour améliorer l'expérience des utilisateurs en augmentant la vitesse et la réactivité, et en permettant des mises à jour en temps réel sans recharger la page. Nous allons explorer ci-dessous les différences entre les SPA et le rendu côté serveur (SSR) :
Différences entre SPA et SSR
La principale différence entre SSR et SPA réside dans le fait que le premier obtient le code HTML du serveur pour chaque page. Lorsqu'une nouvelle URL est demandée, le serveur crée une nouvelle page HTML et la renvoie au navigateur de l'utilisateur qui affiche alors la page HTML correspondante. Si l'utilisateur clique sur un lien, il appelle à nouveau le serveur pour obtenir le nouveau code HTML pour la page complète, et ainsi de suite.
La RSS était un moyen standard de produire des pages web, étant donné que les premiers navigateurs web agissaient principalement comme des visionneurs de documents et qu'elle était facilement indexée par les moteurs de recherche. Lorsque l'on utilise la RSS, le chargement initial de la page peut être plus rapide, car le contenu statique est en fait ce qui se charge en premier. Cependant, le fichier JavaScript doit ensuite être téléchargé par le navigateur pour permettre l'interaction avec la page. Les utilisateurs devront attendre plus longtemps avant d'interagir avec l'application. Les applications étant devenues plus complexes et interactives, la RSS n'est plus privilégiée pour de tels projets.
Cela ne veut pas dire que le RSS est obsolète. Dans des cas d'utilisation spécifiques, la RSS serait une meilleure option pour un site web qui souhaite obtenir un classement élevé pour l'optimisation des moteurs de recherche (SEO). Dans notre cas, nous n'avons pas eu besoin de prendre en compte l'optimisation pour les moteurs de recherche car nous développons une plateforme SaaS qui n'est accessible qu'à nos clients. Pour souligner, ceci est, bien sûr, séparé de la stratégie SEO et du développement web du site web de notre société https://im-vitro.com/ où ce post est lu.
Comment fonctionne notre SPA ?
- Du côté du navigateur
Dans EMBRYOLY, l'application et les ressources nécessaires, telles que HTML, CSS et JavaScript, sont chargées dès que les clients arrivent sur la page de connexion. Un moteur JavaScript génère le code HTML de la page, et le navigateur de l'utilisateur utilise le code HTML pour créer l'application complète et afficher la page.
Ensuite, si l'utilisateur navigue d'une page à l'autre, seul le corps de la nouvelle page sera chargé puisque nous avons la même présentation sur chaque page. Nous ne récupérerons de la base de données que les données que nous voulons afficher et nous les afficherons.
- En ce qui concerne le codage
Les SPA doivent être créées à l'aide de JavaScript et nous avons choisi d'utiliser un cadre Javascript appelé Vue.js. Ce framework présente de nombreux avantages : il est léger, il possède de nombreuses fonctionnalités puissantes avec lesquelles les développeurs peuvent travailler et il facilite la maintenance et le débogage du code.
Tous ces avantages nous permettent de développer et de livrer fréquemment de nouvelles fonctionnalités sur EMBRYOLY pour que les embryologistes bénéficient d'une expérience utilisateur dynamique.
Avantages supplémentaires des ZPS
Outre la vitesse de chargement, les SPA présentent de nombreux autres avantages :
- Meilleures capacités de mise en cache: en cas de mauvaise connexion internet, nous pouvons mettre en cache les données extraites du serveur et les utiliser.
- Adapté aux mobiles: nous pouvons utiliser les SPA pour créer une application mobile tout en continuant à utiliser le backend de l'application web.
- Développement rapide: lors de la construction d'une SPA, le code du frontend et celui du backend sont séparés, ce qui signifie que plusieurs développeurs peuvent travailler sur différents aspects de la même fonctionnalité en même temps.
Conclusion
Chez ImVitro, nous voulons offrir aux embryologistes la meilleure expérience utilisateur pour les aider dans leurs tâches quotidiennes. C'est pourquoi nous avons choisi de construire une SPA : une application qui est facilement déployable et évolutive, ce qui nous permet d'introduire fréquemment de nouvelles fonctionnalités sur notre application et de répondre de manière cohérente aux besoins des centres de FIV.