Historique & Technique

Le projet et ses lignes directrices

Postulats de départ

  • Les solutions e-commerce actuelles sont en retard sur la partie front
  • L’architecture monolithique freine l’innovation
  • Intégrer ensemble plusieurs services est compliqué
  • Les microservices, API et solution « headless » émergent mais sont coûteuses à implémenter
  • Construire une expérience utilisateur singulière est difficile
  • De nouveaux usages arrivent (Mobile, IA, VR, chatbots,…)
  • De nouvelles approches UX sont nécessaires pour le e-commerce B2B

Hypothèses

  • Chaque projet à des UI/UX spécifiques
  • Les bonnes pratiques présentes dès le départ font gagner du temps
  • Un Design System facilite la collaboration entre services
  • Le web « offline-first » (PWA) va augmenter l’engagement client
  • Les nouvelles technologies web apportent de nouvelles opportunités
  • React va devenir le nouveau « JQuery » et de nombreux développeurs vont le maîtriser
  • Itérer sur le front (design, UX) doit être un investissement stratégique
  • Une grande flexibilité front peut résoudre efficacement des problématiques ergonomiques

Projet Initié par Occitech

Travaille sur Magento exclusivement depuis 2010.
Idée initiale : ne plus utiliser le moteur de template de Magento, trop contre-productif
Plus de 4000 heures de travail.

  • Démarrage en octobre 2015
  • Début 2016 : POC et premières démos
  • Été 2016 : Expérimentations et choix techniques (native, SSR, ElasticSearch,…)
  • Novembre 2016 : lancement officiel du projet
  • 2017 : les derniers 80% restants
  • Février 2018 : 2 projets en production
  • 2018 : Création du réseau de partenaires et commercialisation
équipe Occitech

Occitech

11 personnes à Toulouse, France, expertes sur Magento et les développements web applicatifs métier.

Architecture

Front-Commerce repose sur un connecteur central qui va communiquer avec les différentes API. Il repose sur les technologies NodeJS, ElasticSearch, Redis et GraphQL.

ElasticSearch permet de gérer les données catalogue (et peut être étendu) tandis que Redis joue le rôle de cache central pour limiter les appels API.

Il transpose les différentes données API en un seul graphe GraphQL vers le thème du site qui le consomme avec React.

Les flux API sont validés par des contrats PACT.

Schema with services

Bonnes pratiques

Nous avons travaillé sur de nombreux projets Magento et de nombreux projets métier avec React. Nous avons tiré de ces expériences et de notre veille des bonnes pratiques que nous avons regroupé dans Front-Commerce.

Sur la partie Front, nous avons choisi le concept Atomic Design et le Design System Storybook, facilitant grandement la création et la maintenance du thème tout au long de sa vie.

Pour communiquer avec le Front, après avoir testé Falcor dans un premier temps, nous utilisons GraphQL parfaitement adapté pour manipuler facilement les données à afficher ou à envoyer depuis/vers le Front.

Et comme notre architecture micro-services interagit avec des API, nous avons sélectionné PACT pour contractualiser les échanges (tests).

Nous avons déjà modifié les outils utilisés, ce n’est pas figé. Front-Commerce est un outil que nous utilisons pour nos clients, il continuera à s’améliorer et s’enrichir avec le temps.

Nous fournissons plusieurs thèmes ayant pour but de montrer des cas d’usage et de servir de point de départ pour votre propre thème. Ils intègrent ces bonnes pratiques et ils vont contribuer à simplifier les décisions, expérimentations et intégrations sur votre boutique.