Genèse du projet

Lorsque l'agence hemmer.ch nous mandatée pour réaliser le développement technique du projet, ils avaient déjà une vision à long terme répondant à un besoin : la consultation des horaires des messes en ligne. Mais les détails pour aboutir à cette finalité étaient à construire ensemble et à cet égard, ils nous ont accordé une grande confiance. Le projet a donc commencé simplement puis l'application s'est enrichie par étapes. Cette approche était nécessaire pour orienter le projet vers les fonctionnalités les plus pertinentes au moment T en fonction des moyens disponibles.

Un développement au long cours

Le cycle de vie de Theodia s'étend à ce jour sur plus d'une décennie. À l'époque, les technologies et les bibliothèques logicielles d'aujourd'hui n'existaient pas (toutes) encore.

L'approche conventionnelle consistait encore majoritairement dans du rendu complet de pages web. Pour faire simple, à chaque interaction de l'utilisateur, la page devait se recharger complètement. Mais nous étions ici devant une application qui affiche la majorité du temps une carte et il n'était pas question de recharger la page à chaque clic.

Le paradigme inverse consiste à charger l'application une fois lorsque l'utilisateur arrive sur le site, puis de charger uniquement les informations demandées par l'utilisateur au moment où il les demande.

Conséquemment, nous avons découplé la partie client de la partie serveur, avec une application Javascript pour le frontend et une API REST pour le backend, les deux communiquant de manière asynchrone.

Nous avons alors opté pour la bibliothèque AngularJS qui était un projet open source soutenu par Google. Bien qu'elle ait une approche intéressante, cette bibliothèque qui avait ses limites (notamment en regard des performances) a fini par être abandonnée en faveur d'une évolution drastique : Angular, toujours activement soutenu par Google.

Lorsqu'il devenu nécessaire de mettre à jour l'application, nous avons dû faire un choix entre un framework comme Angular, dont le paradigme consistait à répondre à la majorité des besoins courants d'une application frontend ou utiliser une combinaison de plusieurs petits frameworks, chacun ayant son domaine d'application.

Conquis par sa proposition consolidée "presque tout en un", nous avons opté pour Angular. Pour faire la paire, nous avons migré aussi l'API REST vers une API GraphQL, développé à l'origine par Facebook, qui offre l'avantage de pouvoir retourner des objets complets en une seule requête avec un typage strict des requêtes et réponses. Si la partie technique vous intéresse, lire l'article sur notre écosystème applicatif.

Les performances

Aujourd'hui Theodia gère des événements par centaines de milliers et des lieux par dizaines de milliers. Répondre aux demandes des utilisateurs de façon transparente en quelques millisecondes à partir de volumes si conséquents a nécessité d'importants efforts d'optimisation.

Comme à son lancement l'application comportait peu de lieux, calendriers et événements, l'optimisation était une question secondaire. Mais vint le jour où nous prîmes conscience du succès de l'application : la période de Pâques !

En effet, la particularité de Theodia qui se concentre sur les événements religieux, c'est qu'il y a de courtes périodes où le trafic est multiplié par plusieurs ordres de magnitude.

Nous avons alors consacré plusieurs itérations d'optimisation pour couvrir les besoins des années à venir.

Nous avons entre autres clusterisé les lieux, qui étaient autrefois tous affichés sur la carte. Voici à quoi ressemblerait l'application aujourd'hui avec et sans la clusterisation :

Cette opération permet de réduire drastiquement le temps de rendu du navigateur. Au-delà du confort d'utilisation, elle permet aussi de réduire drastiquement l'utilisation du processeur et par conséquent d'améliorer l'autonomie des batteries des smartphones qui sont une part très importante des visiteurs de Theodia.

Mais cela ne suffisait pas: le volume de données envoyées par le serveur était aussi un critère à optimiser, en particulier quand on considère l'utilisation sur mobile. Nous avons par conséquent adapté l'API pour diviser le volume de données par 226, rendant l'application à nouveau fluide à l'utilisation.

Résultat : on passe de 40s à 1s pour le chargement des données et le rendu.

Widgets

Theodia a pour vocation de faciliter l'accès aux horaires et le meilleur moyen d'attendre cet objectif est d'afficher l'information recherchée à l'endroit où l'on s'attend à la trouver, c'est-à-dire sur les sites des paroisses par exemple.

C'est ainsi que Theodia a été dotée d'une série de widgets configurables permettant d'afficher les horaires de façon transparente pour les visiteurs sur les sites web des églises.

Ces widgets peuvent s'adapter à la charte graphique et contexte du site, en exposant seulement certains calendriers ou lieux ciblés en rapport avec le site de destination.