Refonte d’un configurateur en ligne

Eleven MX est le leader depuis 2011 de la personnalisation de kits décos motocross et de tenues motocross personnalisées en France. Tous les produits Eleven MX sont imprimés et cousus en France, en Eure et Loir.

À travers son site internet, Eleven MX propose à ses clients un configurateur en ligne pour la personnalisation de leurs produits.

En 2018, une refonte du configurateur en ligne est engagée. L’ancien configurateur écrit en Angularjs souffrait alors de certaines caractéristiques rendant difficile la gestion des sauvegardes et limitait l’optimisation des fichiers destinés à la mise en production de la personnalisation.

L’utilisation exclusive de JavaScript demandait en plus au navigateur de l’utilisateur un effort conséquent tant en bande passante qu’en consommation processeur et la fermeture de l’onglet du navigateur rimait avec la perte complète et fatale de la configuration en cours. Aïe !

Refonte

La décision est prise de réécrire le configurateur, avec comme objectifs :

• Une meilleure expérience utilisateur en rendant le configurateur plus réactif et utilisable sur les terminaux mobiles
• Optimiser la génération des fichiers destinés à la production
• Augmenter la maintenabilité et la prédictibilité de fonctionnement du configurateur selon les différents navigateurs

Nous choisissons de décharger au maximum le navigateur des calculs à effectuer lors de l’utilisation du configurateur en les déplaçant côté serveur. L'environnement est beaucoup plus contrôlé et prédictif, garantissant ainsi une expérience performante pour l’utilisateur, et ce quel que soit son terminal.

Inspirés par l’annonce de Phoenix Liveview , nous développons un prototype avec le langage Elixir. Désormais, au lieu de forcer le téléchargement de toute la logique de rendu de personnalisation vers le navigateur, seules les parties modifiées sont envoyées au navigateur, qui n’a plus qu'à les afficher ! Gains de performance !

Chaque session de personnalisation étant maintenue par le serveur Elixir, l’utilisateur n’a plus à craindre les déconnexions, le rafraîchissement de page ou la fermeture de l’onglet : sa configuration est toujours disponible et prête à être modifiée ! Gains en ergonomie !

Côté production, grâce à une gestion côté serveur du configurateur, il est maintenant possible de dissocier le rendu de la personnalisation pour un client du rendu pour la mise en impression.

En automatisant donc la pré-production de fichiers spécifiques pour l’impression, le nouveau configurateur promettait ainsi une réduction considérable des actions manuelles à faire entre la commande de la personnalisation et la mise en impression, permettant à l’équipe d’Eleven MX de dégager davantage de temps à la conception de nouveaux produits.

---

Ce premier prototype, réalisé en quelques jours, aura déjà permis de valider l’utilisation d’Elixir pour améliorer les performances et la stabilité du configurateur. En outre, une meilleure expérience utilisateur a été observée grâce à la gestion intelligente de la session côté serveur et non plus côté navigateur, rendant nul le risque de perdre sa configuration.

Grâce à ce prototype nous nous sommes rapidement rendus compte que récupérer la main sur l’environnement d’exécution du configurateur a débloqué d’énormes possibilités en termes de fonctionnalités.

Nous avons ainsi pu proposer différents rendus images de la personnalisation en fonction du contexte (panier, page mes projets, partage sur les réseaux sociaux) ainsi que la duplication de la personnalisation sur d’autres produits, faire des analyses statistiques sur l’utilisation du configurateur, créer un back office spécialisé pour la gestion des projets de personnalisation…

Enfin, le nouveau configurateur Eleven MX a été intégré au très réputé système e-commerce Magento, pour toute la gestion des paniers, commandes, comptes clients, etc.

Une fois la nouvelle version du configurateur déployée, nous avons ainsi pu profiter d’une maintenance beaucoup plus aisée qu’avec l’ancien configurateur JavaScript. En effet, les problématiques de compatibilités entre les navigateurs se sont évaporées le jour où nous avons repris le contrôle de l’environnement d’exécution côté serveur, facilitant ainsi énormément la correction de bug et l’ajout de nouvelles fonctionnalités. Le système de tests unitaires d’Elixir couplé à l’intégration et déploiement en continu nous a également permis de réduire le coût de mise à disponibilité d’une nouvelle fonctionnalité à son strict minimum.

Pour contrôler le configurateur, l’interface utilisateur a été codée avec le langage Elm. À l’instar d’Elixir, ce langage nous a permis de nous extraire de la maintenance extrêmement coûteuse d’un projet JavaScript pur et de proposer une interface ultra robuste aux utilisateurs.

---

Conclusion

Le configurateur V2 d’Eleven MX est en production depuis février 2019. Plusieurs centaines de personnalisations sont conçues chaque semaine via le nouveau configurateur et l’ajout de nouvelles fonctionnalités est toujours aussi simple.

L’utilisateur final bénéficie des mises à jour du configurateur sans jamais voir son temps de chargement augmenter ou son utilisation du configurateur ralentir et Eleven MX bénéficie d’un outil de production qui réduit au maximum la durée entre la commande et l’impression de la commande.

Après plusieurs années de production, nous sommes toujours stupéfaits de l’utilisation des ressources serveurs par Elixir. Les coûts d’exploitation sont restés extrêmement faibles pour un service qui implique pourtant de la manipulation à haute dose d’images vectorielles et matricielles !

Bref, grâce à sa vision produit, au langage Elixir et à notre expertise, Eleven MX a amélioré son outil de production en le rendant plus dynamique, plus pratique et plus productif tout en gardant sous contrôle ses coûts d’exploitation et de maintenance !