MSO : Performance et fiabilité dans le chronométrage

Valeur ajoutée d’Apptitude

Nous avons utilisé des technologies de pointe et une approche méthodologique structurée pour transformer l’infrastructure de MSO. En utilisant Kafka Connect pour la synchronisation bidirectionnelle, Elasticsearch et Kibana pour l’analyse, Mongo Atlas pour la flexibilité, nous avons assuré une évolutivité optimale.

Quelques chiffres

• + 140’000 connections / login
• + 376’000 pages vues par mois
• Marathon de Zürich : mise à disposition de la liste des participants et des résultats pour plus de 14’000 personnes. Pointes à 8’000 req/min.
• Zermatt Ultraks : pointes à 13’000 req/min avec des temps de réponses moyens à 500ms.
• Patrouille des Glaciers : la plateforme permet de gérer env 5’000 inscriptions.

Durée du projet

La plateforme a permis de recueillir les premières inscriptions, seulement 7 mois après le démarrage.

• 2,5 mois : travail pour mise en place Patrouille des Glaciers (découvrez notre article dédié à cette épreuve)
• 2 mois : ouverture pour toutes les courses
• 2,5 mois : reprise de l’ancienne plateforme

Prix & récompense

Meilleur Du Web dans la catégorie UX / UI.
https://business.mso.swiss/blog/mso-et-apptitude-decrochent-le-meilleur-du-web/

MSO, une entreprise familiale

Depuis 2007, MSO chronomètre des manifestations sportives. Le chronométrage de course en ligne, en boucle, avec plusieurs disciplines sportives (comme le triathlon par exemple), ou avec des temps intermédiaires n’est que la pointe de l’iceberg. Comme souvent, ce monde est bien plus complexe qu’il n’y paraît. Les services de chronométrage ne se limitent pas au jour de la course. Plusieurs étapes doivent être réalisées et coordonnées afin d’assurer le bon déroulement d’une épreuve, de la gestion des inscriptions, à la production des dossards pour les coureurs notamment. S’ensuit la gestion du live timing, puis la publication des résultats à destination des athlètes, de leurs familles et amis. Ajoutez à cela la gestion de plusieurs événements simultanés pour l’entreprise de chronométrage et vous commencez à comprendre le défi technique. Grâce à une stratégie d’innovation continue, MSO améliore l’expérience des organisateurs et des athlètes de manière régulière. MSO se positionne comme un leader reconnu dans son domaine.

Un accompagnement sur-mesure des événements sportifs

Les activités de gestion et d’administration de MSO reposent sur divers outils digitaux, permettant de proposer un accompagnement sur-mesure aux organisateurs d’événements sportifs. Cet écosystème digital est essentiel pour offrir un service de haute qualité et répondre aux attentes de leurs clients, de la mise en place jusqu’au déroulement des épreuves.

Structure de l’écosystème de base MSO

La plateforme athlète : offre catalogue complet de courses et permet aux athlètes de s’inscrire à des épreuves. Ils peuvent également gérer tous les aspects relatifs à leur compte (commandes, amis, etc.).

La plateforme organisateurs : offre une gestion sur-mesure des événements et du suivi de leurs épreuves. À travers plusieurs données, l’organisateur peut avoir accès à différentes statistiques, lui permettant de coordonner ses efforts de communication, de s’assurer des ventes, etc.

La plateforme back-office pour MSO : cette partie assure la gestion complète des événements, des athlètes, des organisateurs et les outils pour faciliter le travail de l’équipe MSO.

Une forte concurrence existe, avec plusieurs acteurs de taille importante, qui se disputent ce marché en pleine expansion. Offrir une expérience complète et fluide est un gage de succès.

Stabiliser et faire évoluer l’écosystème

MSO souhaitait faire évoluer ses solutions en ajoutant de nouvelles fonctionnalités.

Les organisateurs proposant de plus en plus de formats différents, une inscription peut recueillir un grand nombre de données et devenir très complète. Prenons, par exemple, une inscription d’équipe à la Patrouille des Glaciers. Une personne peut se charger de l’inscription de son équipe, mais devra pouvoir saisir plusieurs informations différentes pour chaque personne. L’ajout de champs complexifie la gestion de la base de donnée, demande un système de plus en plus robuste et flexible. Pour cela, il était indispensable de réviser le socle technologique existant afin d’assurer la stabilité des systèmes et de garantir leurs évolutions futures.

Améliorer l’ergonomie et le design visuel

Offrir une meilleure expérience de navigation pour les athlètes désirant s’inscrire à une épreuve.

• Moduler l’architecture : sortir du modèle monolithique pour rendre les modules des solutions moins interdépendants, facilitant ainsi l’ajout de nouvelles implémentations.
• Transition graduelle : aborder les solutions existantes étape par étape pour mieux gérer les coûts de développement, les risques, et définir des jalons importants en fonction des objectifs business de MSO.
• Ne pas interrompre la production : le nombre de courses réparties sur le calendrier ne permettait pas d’interruption de service. Il fallait, dans un premier temps, mettre en place une stratégie pour assurer une continuité lors de toute la durée du projet.
• Respecter des délais serrés en lien avec des événements clés : comme la Patrouille des Glaciers 2022. Cet événement majeur, organisé par l’armée suisse, ne laissait effectivement que peu de doute quant à la qualité et la viabilité de la plateforme attendue.

Refonte de la plateforme : entre complexité technique et expérience utilisateur intuitive.

Nous avons entamé la refonte complète de leur plateforme athlète en 2019. À cela s’est ajouté la problématique de la pandémie et des restrictions. Le processus a été structuré autour d’ateliers de conception hebdomadaires de 2 à 3 heures avec Jérémy et son équipe. L’accompagnement a été une alternance entre des discussions de compréhension fine des processus et la création de wireframes. Des points de validations techniques réguliers ont été effectués pour garantir la faisabilité des choix retenus. Le principal défi était d’offrir une plateforme capable de s’adapter aux règles spécifiques de chaque course. Les particularités et les exemples pratiques sont nombreux. Nous pouvons citer, en exemple :

• L’expérience souhaitée pour la gestion des inscriptions en équipe.
• La définition des informations d’autres publiques qui seront utilisées pour établir les classements, versus les informations privées visibles en étant connecté, etc.

Malgré cette complexité, la plateforme devait rester très intuitive. Les utilisateurs revenant régulièrement, à différents moments. Que cela soit pour l’inscription à une course, pour consulter ou compléter des informations, ou finalement découvrir les résultats des épreuves. La “plateforme publique” dépasse donc largement l’aspect d’un site e-commerce simple que l’on pourrait imaginer au départ.

Une fois les 50% à 60% des wireframes réalisés, nous avons commencé à travailler sur les aspects graphiques. Nous avons conservé la couleur orange du logo, tandis que William a proposé les bases d’une nouvelle identité visuelle. Des icônes claires et précises ont été développées, respectant et traduisant les valeurs de MSO : un service professionnel et rigoureux. L’équipe interne de MSO a ensuite développé et intégré cette nouvelle identité en la déclinant à l’ensemble des supports nécessaires.

De manière très générale, l’ergonomie et la navigation de la plateforme a été optimisée grâce à une catégorisation claire des courses. L’objectif était de permettre à n’importe quel athlète de trouver simplement et intuitivement le type ou la course de son choix. Il va de soi que le design responsive de la plateforme devait être particulièrement efficace afin de répondre entièrement aux exigences et habitudes de la clientèle.

Les défis rencontrés

• Reprise d’une plateforme ayant une dette technique élevée, induite par un glissement progressif.
• Travailler sur une plateforme critique pour l’entreprise, dans le domaine de l’événementiel.
• Respecter des délais stricts.
• Synchroniser un système développé sur 10 ans.
• Gérer un système plus complexe que prévu initialement, avec de nombreuses spécificités fonctionnelles.
• Offrir une gestion optimale des pics d’utilisation liés aux plannings des courses, via des serveurs élastiques.

Deux options d’évolution

Pour faire évoluer techniquement cette plateforme, nous avions deux options. La première consistait à réaliser uniquement une refonte UX/UI, en conservant la base technologique existante, à savoir PHP et MySQL. La seconde option, plus ambitieuse, était de repartir de zéro pour reconstruire un écosystème mieux adapté, en tirant parti de l’expérience acquise. Finalement, nous avons proposé une solution hybride qui répondait aux objectifs du client tout en prenant en compte les contraintes du marché et les réalités financières.

Notre approche a permis de moderniser la stack technique de façon progressive et contrôlée.

Bien que PHP et MySQL soient des technologies historiques et éprouvées, l’évolution des besoins en termes de performances, de scalabilité et de réactivité des applications web nécessite aujourd’hui des technologies plus modernes. Des solutions comme React, Node.js, et MongoDB répondent mieux à ces nouveaux défis, offrant ainsi un cadre idéal pour la création d’applications web plus dynamiques et évolutives.

Nous avons jugé ce changement technologique pertinent, compte tenu des exigences du projet, notamment en matière d’interactivité accrue, de performance améliorée et d’adaptabilité à grande échelle.

Avantages des nouvelles technologies

React

• Offre une interactivité optimale avec des interfaces utilisateur réactives et dynamiques.
• Favorise la réutilisation des composants, ce qui accélère le développement et le rend plus flexible.

MongoDB

• Permets de stocker les données de manière flexible au format JSON, idéal pour les applications qui manipulent des données non structurées ou en constante évolution.
• S’adapte parfaitement aux projets nécessitant une grande échelle et une croissance rapide, grâce à sa capacité à gérer de gros volumes de données sans la rigidité des tableaux fixes comme dans MySQL.

Node.js

• Gère efficacement un grand nombre de requêtes simultanées sans compromettre les performances, ce qui est idéal pour les applications en temps réel (chat, streaming, etc.).
• Facilite le développement rapide en unifiant le front-end (React) et le back-end grâce à un langage unique, JavaScript, simplifiant ainsi la communication entre les deux parties.

Une vision évolutive

Nous avons proposé une approche évolutive pour le projet, avec pour objectif d’absorber progressivement l’ancien système dans le nouveau. La cohabitation et la synchronisation entre deux systèmes de bases de données, aux philosophies différentes, ont été gérées de manière stable et durable. Bien que l’incertitude subsistait quant au moment où cet état serait atteint, nous avons anticipé les risques de dénormalisation de la base de données.

Pour garantir une synchronisation fiable, nous avons utilisé Kafka + Debezium une technologie permettant le transfert de données en temps réel et sans perte, même sous une forte charge, d’une partie du système à une autre.

Kafka

• Scalabilité : gère facilement un grand volume de données grâce à son architecture distribuée, permettant ainsi de s’adapter à la croissance des applications.
• Résilience : assure la persistance des messages, ce qui garantit que les données ne sont pas perdues en cas de défaillance.
• Dé-couplage des applications : permet aux producteurs et consommateurs de fonctionner indépendamment, facilitant l’intégration de divers systèmes.

Debezium

• Capture des modifications en temps réel : suivi des changements dans les bases de données (insertions, mises à jour, suppressions) sans nécessiter de requêtes fréquentes.
• Intégration simplifiée : se connecte aisément à plusieurs bases de données, offrant une solution flexible pour la gestion des données.
• Facilite l’architecture orientée événements : permet de déclencher des actions basées sur les changements de données, améliorant ainsi la réactivité des systèmes.
  

  ---

  Comprendre ce que c’est.
  L’association de Kafka et Debezium offre une solution efficace pour la gestion des données en temps réel, avec de nombreux avantages pour les entreprises modernes. Grâce à Debezium, qui capture les modifications apportées aux bases de données en temps réel (insertions, mises à jour, suppressions), les données peuvent être facilement intégrées dans Apache Kafka. Cela permet de bénéficier d’une infrastructure scalable et résiliente, capable de traiter de grands volumes d’informations tout en assurant une distribution rapide des messages. En découplant les applications, Kafka et Debezium permettent aux producteurs et consommateurs de fonctionner indépendamment, tout en garantissant la persistance des données pour faciliter le traitement des erreurs. Avec leur flexibilité d’intégration et leur accès à des outils variés pour le traitement des événements, cette combinaison favorise l’adoption d’architectures orientées événements, optimisant ainsi la réactivité et l’efficacité des systèmes.

  ---

Avec cette synchronisation, il nous est possible d’absorber les données de l’ancien système et de les utiliser sur le nouveau Frontend. Une transition douce a donc pu être effectuée, sans changer radicalement les processus internes maîtrisés. Cette approche a eu les avantages suivants :

• Modèles de données similaires pour limiter les problèmes de compatibilité.
• Avantages en termes de composants « read-only » et de lookups dans les tables.
• Gestion des modèles partagés (athlètes, paniers) et détermination de la source de vérité (MySQL ou MongoDB).
• Défis liés à la synchronisation des ID et au problème du read-after-write.

Scalabilité et adaptabilité

Le déploiement en cloud avec Azure, associé à l’auto-scaling, permet à la plateforme de s’ajuster automatiquement aux variations de fréquentation, un aspect crucial dans le secteur des courses, notamment lors des pics d’inscriptions ou de consultations des résultats. Ce mécanisme assure que les ressources nécessaires soient allouées de manière dynamique pour maintenir des performances optimales.

Un article détaillé a été publié par Microsoft.

Un processus de déploiement fluide a été mis en place, avec environ deux nouvelles versions déployées en production par mois. Ce projet a permis de créer une relation à long terme avec MSO, avec de nombreux développements prévus.

Innovations et avantages techniques

• Utilisation de nouvelles technologies pour améliorer l’infrastructure.
• Découplage de l’expérience utilisateur de l’ancienne infrastructure MySQL.
• Capacité à faire fonctionner les deux systèmes en parallèle, assurant une transition en douceur.
• Élasticité du système pour s’adapter aux besoins fluctuants et croissants.

En conclusion, nous avons réussi à stabiliser et à faire évoluer l’écosystème digital de MSO, répondant aux exigences élevées et aux défis du projet, tout en posant les bases pour de futures évolutions.

La plateforme est en ligne depuis plusieurs mois, stable, et sans bugs. Les objectifs ont été atteints, couvrant tous les processus du client. Plus importants encore, la satisfaction générale des clients, des organisateurs de courses, et des athlètes est au rendez-vous.

“Chez Apptitude, on se sent entouré de personnes brillantes qui saisissent rapidement nos besoins spécifiques à notre métier. Du design à la mise en production de la plateforme, en passant par le suivi du projet, tout est maitrisé et parfaitement exécuté. Je tiens à remercier toute l’équipe pour la réalisation sans failles de ce gros chantier.” Jérémy Muller, CTO, MSO.swiss.

“La refonte de la plateforme mso.swiss a été pour Apptitude un projet particulièrement stimulant et intéressant. Sa mise en place a nécessité l’utilisation d’un processus de data capture change et d’un bus d’événement. Ceux-ci ont rendu possible la coexistance et la synchronisation d’un système backoffice développé en php pour mysql, et d’une nouvelle plateforme node/react basée elle sur MongoBD. Une stack technologique complètement différente donc, et ceci sans interruption ni refonte de l’ancien système.” Jean Vaucher, Architecte logiciel, Apptitude.