Blog

BMW Moto : un site rapide, très rapide ! Merci Gatsby !

En collaboration avec l’agence Mirum South Europe, nous venons de livrer un site dont nous sommes particulièrement fiers : https://www.motobmw.fr/

L’objectif : refonte de cette application de génération de leads avec des technologies modernes et durables, pouvant évoluer facilement niveau UI et niveau fonctionnel.

Choix des technos ? site statique !

L’équipe Mirum nous a fait totalement confiance pour choisir la stack technique adaptée au projet, sachant que de par notre veille nous aurions des propositions pertinentes à faire, et nous les en remercions !

Autant pour le backend (administration), nous avons fait le choix de partir sur une évidence : Symfony (oui mais en version 5 avec PHP 7.3 !). Mais pour le frontend (site vu par les visiteurs) nous avons considéré que, la grande majorité du site étant identique pour tous les visiteurs, un site statique serait pertinent.

La Jamstack à l’attaque

Mouvance très en vogue actuellement, enfin mature et à considérer pour des sites en production (la preuve), la Jamstack c’est un schéma d’architecture moderne :

  • J pour Javascript : un frontend avec une logique déportée côté client et très performant
  • A pour API : les données à afficher y sont puisées
  • M pour Markup : les fichiers sont pré-générés et donc statiques, le serveur ne fait aucun calcul pour servir la page.

Grâce à ses fichiers statiques, le site peut être servi avec une très faible charge serveur, voire directement depuis un CDN. Il peut donc prendre « la foudre » sans broncher. Pour les mêmes raisons, il est donc très rapide à afficher sur les navigateurs clients.

Gatsby, un framework qui tient ses promesses

Logo Gatsby

Gatsby c’est le framework qui permet de générer statiquement votre site. Elle récupère les données en GraphQL, évolution des API REST, standard que nous connaissons déjà très bien car utilisé dans Front-Commerce. Elle génère ensuite l’intégralité des pages en HTML en une seule fois. Cela dure quelques dizaines de secondes à plusieurs minutes selon le nombre de pages à générer, mais pendant ce temps votre site est toujours disponible, avec les anciennes données.

Gatsby inclut de nombreux dispositifs d’optimisation des webperfs (performances d’affichage client), notamment sur les images qui sont optimisées selon leur taille d’affichage (contexte responsive) et le navigateur client (pour afficher le format le plus optimisé).

Le rendu : une fusée !

Avec un score de 95% sur Dareboost, le site est en orbite dans les hautes sphères des performances du web ! Jugez-en par vous même si ce n’est pas déjà fait : https://www.motobmw.fr/

Grâce à son architecture, le site sera mieux indexé dans les moteurs de recherche, toujours rapide même en cas d’affluence et cela sans mettre à genoux les serveurs.

Réalisé conjointement par toute notre équipe en moins de deux mois, nous avons adoré approfondir notre expérience de Gatsby et le mettre en oeuvre pour un réel et beau projet.

Architecture découplée : notre crédo

Nous avons appliqué une philosophie qui nous est chère : les micro-services. Avec son backend en Symfony et son frontend en Gatsby (React), le site est en fait un ensemble de 2 applications indépendantes, dans leur propre langage (PHP et Js), et qui communiquent entre elles.

Ainsi, des équipes différentes peuvent travailler sur chacune d’elles, sur leur propre environnement. Intervenir sur l’une ne remet pas en cause l’autre, fini les châteaux de cartes sur lesquels plus personne n’ose intervenir.

Pour le futur, c’est également très intéressant : un nouveau service à connecter ? Facile avec les API, tout en gardant son indépendance. Par exemple sur ce site, notre backend Symfony permet de renseigner des informations sur les différentes motos. Si un autre site doit également afficher ce catalogue, nous pourrons réutiliser le backend comme source de données.

Gatsby en mode eCommerce

Vous le savez certainement, nous avons une forte activité liée au eCommerce, avec la solution Magento notamment.

Notre intérêt pour les nouvelles technologies, les impacts positifs pour les performances, l’ergonomique et la qualité de développement nous a déjà amené à créer la solution Front-Commerce, maintenant commercialisée par une entité propre.

Et bien nous voici embarqués, avec nos camarades de Commit42, dans un projet open source très intéressant qui entend marier Gatsby à Sylius, solution eCommerce prometteuse, il s’agit de https://gatsbylius.com/
La démo est très parlante, et nous cherchons actuellement un eCommerçant désireux de mettre en oeuvre cette solution.

Affaire à suivre donc…