PWA : Benchmark des différentes solutions

Par Maxime et Cédric, Développeurs Web à l’Agence Dn’D

Dans un précédent article, nous vous parlions du concept des PWA et de leurs fonctionnalités. Implémentées sur de futurs projets réalisés par l’Agence Dn’D, les PWA représentent un atout majeur pour les plateformes de E-Commerce soucieuses d’offrir une expérience de shopping en ligne unique à leurs clients. Face à l’émergence des différentes PWA sur le marché, choisir la solution qui répondra le mieux à vos besoins peut devenir un exercice pour le moins complexe et fastidieux. En effet, chaque PWA comporte ses propres spécificités pouvant vous aider à réaliser de beaux projets : tout dépend de l’utilisation que vous en faites.

Afin de vous aiguiller dans votre prise de décision, l’Agence Dn’D vous propose une sélection de PWA reconnues pour leur performance et leur efficacité. Ready ? Go !

PWA Studio : la solution de la communauté Magento

Lors de Reacticon Conference 2018, Eric Erway (Chef de produit Senior Magento) a annoncé que les technologies utilisées sur le front-end de Magento 2 (knockout.js…) ont été dépassées par d’autres solutions et que les performances sur mobiles ne sont pas à la hauteur : c’est pour cette raison que Magento a lancé PWA Studio.

Magento PWA Studio est une nouvelle solution implémentée dans Magento 2 destinée à intégrer des PWA E-Commerce simplement. Composée d’un ensemble d’outils permettant le déploiement et la maintenance d’une vitrine PWA sur Magento 2, Magento PWA Studio utilise des outils et des bibliothèques modernes pour créer un système et un framework de construction qui respecte le principe d’extensibilité de Magento.

Lancée en 2018 par Magento, ce nouvel outil permet aux développeurs de bénéficier d’une nouvelle architecture front-end, afin d’intégrer et de construire des PWA sur Magento dans le but de gérer tous les canaux via une base de code, un déploiement et une application. Magento PWA Studio dispose de tous les avantages des PWA classiques et elle s’appuie sur les fonctionnalités modernes des navigateurs telles que les agents de service et d’applications Web.

Pour une utilisation optimale, la solution nécessite GraphQL, qui fait partie de la version de développement de Magento 2.3. En prenant en compte la suite d’outils que Magento PWA Studio fournit actuellement, la solution apporte de nouvelles fonctionnalités à Magento telles que les notifications push, le mode plein écran, le mode hors ligne et les paiements sécurisés entre autres.

Composition de Magento PWA Studio

Magento PWA Studio se compose des outils suivants :

• • Pwa-module : cet outil fournit des aides de module, des fonctionnalités côté serveur et sert de base à tous les thèmes créés avec Magento PWA Studio. Il fournit l’Application Shell, il gère les affectations de RootComponent et intègre les payloads de GraphQL dans un rendu de serveur pour une meilleure optimisation. Simple à installer, ce module est activé en back-end et est référencé pour tous les thèmes créés avec Magento PWA Studio.

• • Pwa-buildpack : buildpack est un ensemble de plugins et d’outils Webpack utilisés pour le développement des thèmes Magento Studio PWA. Il est également utilisé pour configurer l’environnement de développement local de la plateforme Magento 2.

• • Peregrine : il s’agit d’une bibliothèque de composants React permettant de simplifier le développement de PWA Magento en fournissant les fonctionnalités de base.

• • Venia storefront : une vitrine Magento 2 construite avec les outils de PWA Studio. Venia Storefront est un thème de démonstration pouvant servir de thème de base, construit entièrement avec les outils cités ci-dessus.

Découvrez Magento PWA Studio !

Front-Commerce : la facilité à portée de main !

Front-Commerce est une solution qui permet de gérer votre front en PWA avec des technologies récentes en architecture micro-services. C’est l’agence d’ingénierie web Occitech qui a créé Front-Commerce : cette société Française composée de 11 personnes travaille exclusivement sur Magento depuis 2010 et elle a développé Front-Commerce en partant de plusieurs constats :

• • De nouvelles approches UX doivent être adoptées pour booster une plateforme E-Commerce en BtoB,
  • L’apparition des solutions dites Headless, API et les micro-services constituent une véritable opportunité mais elles sont coûteuses à
    implémenter,
  • Les solutions E-Commerce d’aujourd’hui sont en retard sur la partie front,
  • De nouveaux usages font leur apparition, à l’instar du M-commerce, de l’Intelligence Artificielle, de la Réalité Virtuelle ou encore des
    Chatbots.

À partir de ces différents constats, Occitech a émis plusieurs hypothèses :

• • Le web “offline-first” est un levier pour augmenter l’engagement client,
  • Davantage de flexibilité en front peut répondre à des problématiques ergonomiques,
  • Chaque projet dispose de UI/UX bien spécifiques,
  • Un design system facilite la collaboration entre les différents services,
  • De bonnes pratiques adoptées dès le départ permettent de gagner du temps et d’être plus efficace,
  • L’émergence des nouvelles technologies du web sont synonymes de nouvelles opportunités.

Architecture de Front-Commerce

Le fonctionnement de Front-Commerce se base essentiellement sur un connecteur central chargé de communiquer avec les différentes API. Ainsi, il repose sur les technologies Elastic Search, Redis, GraphQL et Node JS. Elastic Search permet une gestion des données catalogue avec la possibilité d’être étendu, tandis que Redis limite les appels API en jouant le rôle de cache central. Il replace ensuite les différentes données API à travers un seul GraphQL vers le thème du site, qui le consomme avec React. Les flux API sont validés par des contrats PACT : ces outils sont utilisés pour s’assurer que la bonne connexion entre les services (tels qu’un fournisseur d’API et un client) puissent être effectuée dans le but de communiquer entre eux.

Découvrez le fonctionnement de Front Commerce

Deity Falcon : quand flexibilité et fluidité font la paire

Deity Falcon est une solution PWA pour Magento 2 fondée par l’agence de développement web Deity. Cette PWA est spécialisée pour les plateformes E-Commerce Magento et peut être adaptée aux besoins de chaque webshop. Développée sur React en tant que Framework front-end et sur Node.js en tant que middleware, Deity Falcon se caractérise par sa rapidité et sa fluidité.

Composition de Deity Falcon

• • NodeJS
  • GraphQL
  • React
  • Apollo
  • Koa
  • Webpack
  • Jest

Le principe « F.I.R.E » de Deity Falcon

Deity Falcon a été développée en gardant le principe dit de “F.I.R.E.” à l’esprit :

• • Flexible : vous pouvez construire n’importe quel type de site web (e-commerce, blogs, portfolio, etc.),
  • Intégrable : il vous est possible d’intégrer n’importe quel type de source de données,
  • Reliable : vous n’avez pas à vous soucier du trafic élevé et de l’évolutivité,
  • Extensible : vous permet d’étendre votre projet avec autant de fonctionnalités personnalisées que nécessaire.

Architecture de Deity Falcon

Découvrez le fonctionnement de Deity Falcon

Vue Storefront : la plus expérimentée

Vue Storefront est une PWA autonome capable de se connecter aux back-end E-commerce Magento via l’API. Partenaire de l’Agence Dn’D, Vue Storefront a été créée pour relever les nombreux défis auxquels sont confrontées les plateformes E-Commerce.
En effet, cette solution Open Source offre un ensemble d’outils modernes qui permettent aux entreprises de créer des vitrines de qualité dans le but de présenter leur offre sous leur meilleur jour. Réalisée via une licence MIT, Vue Storefront peut être utilisé et soutenu par n’importe qui : en effet, ses concepteurs souhaitent continuer à l’améliorer et contribuer à son développement.

Architecture de Vue Storefront

Vue Storefront parvient à s’affranchir des différentes plateformes grâce aux connecteurs vue-storefront-api et autres API dédiés aux plateformes back-end E-Commerce. Le format de données dans vue-storefront-api est toujours le même pour n’importe quelle plateforme ce qui signifie que, quel que soit le back-end E-Commerce que vous utiliserez, il restera inchangé. En plus d’avoir une architecture intéressante, il est important de noter que Vue Storefront peut dorénavant être reliée au CMS Prismic grâce à un nouveau connecteur développé par nos équipes et ce, avec une très grande facilité 😉 !

Le connecteur API de Vue Storefront fonctionne en deux phases :

1. La phase dite de “Data Pump”

C’est l’extraction des données statiques (catalogue, commandes, etc.) de votre plateforme E-Commerce vers Vue Storefront ElasticSearch, suivi du changement de son format pour celui utilisé par vue-storefront-api. Après l’extraction des données, vous pouvez afficher le catalogue de produits dans Vue Storefront. Même après avoir extrait les données dans ElasticSearch, il restera synchronisé avec les changements du côté de la plateforme back-end et il mettra à jour son contenu.

2. La phase dite de “Worker Pool”

C’est une synchronisation “d’appels dynamiques” (sessions utilisateurs, règles de panier, etc.) qui ne peuvent pas être stockés dans la base de données et qui doivent être traités par vue-storefront-api directement depuis la plateforme back-end.

Tout en gérant ces deux phases d’intégration, Vue Storefront peut fonctionner avec votre plateforme back-end. Certaines des plateformes back-end ont déjà leurs intégrations (comme Magento 2, Magento 1, CoreShop, BigCommerce ou WooCommerce) mais vous pouvez facilement faire vos propres intégrations avec integration boilerplate.

Fonctionnement de Vue Storefront

Il y a 3 concepts que vous devez connaître lorsque vous travaillez sur Vue Storefront:

• • Vue Storefront Core (« core folder« ) est la base de toutes les fonctionnalités essentielles au bon fonctionnement de Vue Storefront. Il contient tous les points d’entrée, SSR, les processus de construction, les libs in-app et les autres supports de la PWA.

• • Vue Storefront Modules : chaque module est une fonctionnalité encapsulée (comme un panier, une liste de souhaits, un catalogue, une intégration avec une tierce partie). Vous pouvez ajouter/supprimer/éditer ces modules comme bon vous semble et composer votre boutique Vue Storefront uniquement avec les fonctionnalités dont vous avez besoin. Ils sont également utilisés pour les extensions tierces.

• Vue Storefront Themes (src/themes) sont les implémentations réelles de la boutique. Dans les thèmes, vous pouvez utiliser et étendre les modules enregistrés et ajouter vos balises HTML. Sachez aussi que Vue Storefront fournit un thème par défaut entièrement personnalisable.

Apprenez à connecter Vue Storefront à Magento via cette démonstration !

Conclusion

Afin de réaliser des plateformes web puissantes, l’Agence Dn’D utilise des outils performants et modernes : c’est donc naturellement que notre choix s’est tourné vers l’utilisation des PWA et plus particulièrement de Vue Storefront. Très efficace sur Magento, dont nous sommes spécialiste depuis notre création, Vue Storefront est une solution réactive, complète et en perpétuelle évolution, qui permet à nos équipes de concevoir des sites E-Commerce d’un niveau supérieur.

Et vous ? Quelle PWA utilisez-vous ?

Vous avez besoin de conseils pour vous décider ? N’hésitez pas à nous contacter !