Performance et mécanique de génération des widgets de la marque « Avis Vérifiés »

Durée
3 mois
Equipe
5 personnes

Le projet

Repenser l'architecture, la mécanique de génération et intégration des widget « Avis Vérifiés » avec un objectif de haute performance.

Skeepers est le leader européen des solutions d'engagement client, offrant une suite complète de solutions UGC (contenu généré par les utilisateurs) pour aider les marques à interagir avec les consommateurs, augmenter leur portée, stimuler l'engagement et accroître les ventes. Utilisées par plus de 8 000 clients à travers le monde, les solutions de Skeepers reposent sur l'IA pour créer des expériences authentiques et efficaces qui renforcent la confiance et la fidélité des clients.

Leur marque Avis Vérifiés a pour objectif de renforcer la confiance entre les marques et les consommateurs en collectant, gérant et publiant des avis clients authentiques et transparents, permettant ainsi d'améliorer la réputation en ligne des entreprises et d'augmenter leur conversion et leur visibilité.

Les widgets badge « Avis Vérifié » sont des widgets visuels intégrés dans les pages des clients (généralement les Homepage d'enseignes de retail) pour mettre en valeur la qualité des produits et service offerts au travers de témoignage de clients « certifiés ». Leur présence sur les Homepage nécessite une haute performance de l'exécution du code intégré (code snippet fourni aux clients) pour éviter de dégrader les performances, l'expérience et le SEO. Dans ce cadre, et pour donner suite à des retours clients, Skeepers a sollicité exFabrica pour redéfinir l'architecture, repenser la mécanique de génération (back office) et intégration de ces widgets dans les portails des clients avec un objectif de haute performance, d'affichage responsive et d'intégration de solution de tracking.

C'est du très bon travail, les délais ont été respectés, les widgets s'adaptent à toutes les résolutions, ils ont beaucoup de gueule, ils sont toujours très beaux.

Derhen Houlle, Engineering Manager chez Skeepers

Proposition technique

Sur la solution technique du widget en lui-même, exFabrica a eu une approche novatrice pour passer d'un widget en JS non optimisé d'un point de vue legacy, à un widget JS optimisé, puis à une solution en rupture avec la génération d'un widget full SVG. Celui-ci offre des performances optimales aussi bien sur Desktop que sur mobile, sans perte de qualité en fonction du zoom des écrans. Le nouveau widget obtient des temps de chargement ultra rapides : de 0,77ms à 1,37ms.

L'architecture repose sur des micro-services avec NestJS et TypeORM, utilisant une approche Code First pour générer les entités dans AWS Aurora. Les APIs sont documentées avec REST, Automapper et Swagger. Les widgets sont générés en formats PNG et SVG, les SVG étant créés à la volée et les PNG à partir des SVG avec la librairie Sharp. AWS CloudFront et Amazon S3 sont utilisés pour la distribution et le stockage des widgets.

Pour les clients de la marque « Avis vérifiés », un backoffice autonome a été développé pour créer des widgets personnalisés (forme, taille, couleur, position), générer le « code snippet » à intégrer sur leur site et la re-génération automatique des widgets périodiquement pour afficher la note et le bon nombre d'étoiles en fonction des avis réels et des notations des clients. Ce backoffice est développé avec Angular 13 et Material UI, avec une génération automatique des objets proxy pour la communication API via Swagger GEN.

Stack technique

  • API
  • NodeJS
  • NestJS
  • TypeORM
  • AWS
  • BucketS3
  • AWS Aurora
  • AWS CloudFront
  • Angular
  • Material UI
  • VanillaJs

Domaines d'intervention

  • Développement UI
  • Architecture
  • Développement back
  • Développement front
  • Delivery Manager

Résultats

Vitesse d'exécution après prestation
< 2ms
Nombre de widgets générés
20K par jour
Usecase livré en retard
0

Témoignage client

Derhen HoulleEngineering Manager chez Skeepers

L'équipe exFabrica a maîtrisé le projet dans sa globalité et pas uniquement la partie technique qui lui a été confiée. Les développeurs partagent tous la même vision du projet, ils sont très impliqués et exFabrica a apporté une vraie organisation agile.

Nous avons été très agréablement surpris par l'apport du SVG, on n'y aurait pas pensé.

Nous avons également beaucoup apprécié le principe de Sprint 0 avec la construction de la chaine de déploiement et du Hello World. D'habitude nous faisons un premier Sprint qui mélange du développement fonctionnel et de l'architecture. Nous allons adopter ce Sprint 0 pour nos futurs projets.

Notre touche exFabrica

Une équipe pluridisciplinaire capable d'adresser tout le scope (architecture, réalisation Back, réalisation Front)

Implication d'un expert français de la Web performance reconnu

Proposition d'une technologie en rupture avec la demande du client, pour une performance accrue

Apport de la notion de Sprint 0 qui a été depuis plébiscitée et généralisée par le client