Amélioration des performances frontales de Magento avec ReactJS

Magento

Magento est une plate-forme PHP open source pour la création de solutions de commerce électronique. Construit par la société Magento (qui fait maintenant partie d'Adobe), il est utilisé par plus de 350 000 développeurs à travers le monde. Il permet la création de vitrines numériques hautement personnalisables à des fins d'entreprise à client et d'entreprise à entreprise. Magento 2, la version transformée de la plate-forme de commerce électronique Magento, est livrée avec une toute nouvelle architecture, structure de codage et conception de base de données.

a) Présentation générale

La plateforme de Magento est basée sur PHP et MySQL. Au cours de sa durée de vie de 10 ans (la version 1.0 sortie en mars 2008 et la version 2.0 en novembre 2015, il a subi des changements en termes de structure et de schémas de développement et est maintenant dans sa deuxième version majeure, Magento 2.

La structure de Magento se compose de deux parties principales, l'une étant le back-end, avec la base de données et MySQL, et les interfaces Model, Data et Service, comme on peut le voir sur la figure 3. Celles-ci sont directement connectées et utilisées dans les blocs, mises en page, Magento. et les modèles, qui seraient définis comme l'interface de l'application.

b) Recherche de produits

L'une des principales fonctionnalités de tout site Web est la fonction de recherche de produit, qui permet aux utilisateurs de saisir des termes pour rechercher des produits par. Une fois les résultats de la recherche rassemblés, l'utilisateur peut généralement trier ou filtrer ceux-ci par catégories ou attributs de produit.

Dans Magento, la recherche utilise généralement MySQL, Solr ou Elasticsearch pour indexer le catalogue. L'indexation du catalogue détermine les résultats qui sont renvoyés à la vitrine lors de la saisie d'un nouveau terme de recherche ou de la modification des options de filtrage à partir des résultats déjà rassemblés.

c) ElasticSearch

Elasticsearch est un moteur de recherche gratuit et open source basé sur Apache Lucene. Il est particulièrement utilisé lorsque vous traitez de grandes quantités de données et lorsque vous avez besoin de récupérer rapidement ces données. Lors de l'utilisation de MySQL, l'interrogation de données peut prendre très longtemps lorsque vous avez beaucoup de données. Ainsi, le principal argument de vente d'Elasticsearch est de multiplier les vitesses d'interrogation par centaines. Il fonctionne en indexant les données dans des documents qui ont des clés et des valeurs et il est livré avec une API qui permet de récupérer ces documents indexés.

Lorsqu'il est utilisé sur une boutique Magento, le catalogue est indexé dans un nœud Elasticsearch. Il est facilement configurable en l'activant simplement et en spécifiant depuis le panneau d'administration du magasin, l'adresse IP et le port de l'hôte où se trouve le nœud Elasticsearch.

d) API de recherche

Magento dispose d'une bonne quantité de points de terminaison d'API REST, dont un qui peut être utilisé pour rechercher des produits. Ce point de terminaison de l'API de recherche prend comme données envoyées un tableau appelé critères de recherche, qui a la structure suivante

Pour effectuer une demande, le client doit envoyer une demande GET à un chemin spécifique ajouté à l'URL de base du magasin. Le chemin est / rest / V1 / search /? auxquels sont ajoutés les critères de recherche.

2. ReactJS

a) Réagissez comme un outil

React est une bibliothèque JavaScript créée par Facebook et conçue pour créer des interfaces utilisateur. Il repose sur l'utilisation de composants et d'états pour rendre le contenu dynamique sur des pages Web sans avoir besoin de charger des pages. C'est l'une des bibliothèques JavaScript les plus populaires et les plus prises en charge pour les interfaces UI de nos jours.

Contrairement aux anciennes solutions JavaScript, qui impliquaient de déclencher manuellement des modifications sur la page, React «sait» quand l'interface utilisateur doit être mise à jour et restituée sur la page lorsque les états des composants changent. L'idée principale qui différencie React des autres bibliothèques ou frameworks (par exemple AngularJS, Knockout) est l'utilisation d'un «DOM virtuel», qui améliore les performances en réduisant le nombre de changements survenant sur le DOM.

b) DOM virtuel de React

Le DOM virtuel de React est techniquement ce à quoi il ressemble. C'est un DOM qui est créé lorsque les composants sont rendus et lorsque les états changent. L'approche utilisée consiste à créer un nouveau DOM virtuel lorsqu'un élément doit être rendu à nouveau et à le comparer à une autre représentation DOM virtuelle de l'état précédent de l'application, ce qui rend le «diff» à l'aide d'un algorithme et à nouveau dans le DOM uniquement le éléments qui doivent être modifiés.

Le DOM virtuel est une représentation complète du DOM sans être un DOM réel, ce qui signifie que le processus de création d'un nouveau DOM virtuel est beaucoup plus rapide que la création du DOM de la page réelle. Par conséquent, puisque React crée un nouveau DOM virtuel à chaque fois que quelque chose doit être rendu, il n'a pas réellement besoin de savoir ce qui a changé. Cela signifie que les développeurs n'ont pas besoin de contrôler le processus de rendu car React ne modifiera alors le DOM de la page que lorsqu'un changement réel est nécessaire. En termes de performances, c'est l'une des méthodes les meilleures et les plus intelligentes pour restituer une partie du DOM qui doit être modifiée.

c) Bibliothèque de gestion de l'État

Lors de l'utilisation d'une bibliothèque JavaScript, telle que React, les développeurs créent des composants qui, dans la plupart des cas, sont avec état, ce qui signifie que chaque composant a des états qui peuvent changer et qui déclenchent des mises à jour des composants. Lorsque l'application devient volumineuse avec de nombreux composants interconnectés, elle peut devenir encombrante et des états peuvent devoir être transmis des parents aux enfants et vice versa. Pour contourner ce problème, il existe des bibliothèques de gestion des états. Ils permettent de conserver les états de l'application en un seul endroit pour en faciliter la gestion. Les deux bibliothèques les plus populaires utilisées aux côtés de React sont Redux et MobX.

3. React et Magento

Magento 2.3 utilise un nouvel outil appelé PWA Studio. Il s'agit d'un outil d'application Web progressive qui permettra aux développeurs de travailler avec Magento de manière «sans tête», ce qui signifie que le frontend n'est pas directement lié au backend et que la communication se fait via des API.

Jusqu'à présent, l'interface utilisateur de Magento a été créée en utilisant ce qu'on appelle des «blocs» qui ont un modèle (fichier phtml) et un bloc PHP. Les données sont souvent restituées lors du chargement de la page via ces blocs et modèles et interfaces provenant du backend.

PWA Studio utilise React, Redux et webpack pour le développement.

a) Qu'est-ce que l'application Web progressive (PWA)?

Progressive Web App est une application Web qui applique des fonctionnalités Web (HTML, CSS, Javascript) pour offrir une expérience utilisateur exceptionnelle imitant les applications natives. Plus précisément, PWA peut fonctionner comme une application native avec une icône sur l'écran d'accueil mobile, une page de démarrage (après l'ouverture de l'application), un affichage plein écran, des notifications push, etc.

Tous les PWA doivent garantir trois critères essentiels: Rapide (répondre aux interactions des utilisateurs presque instantanément), Fiable (être capable de travailler dans de mauvaises conditions de réseau) et Engageant (fournir une expérience fluide comme une application).

Il existe des différences majeures entre une PWA et une application native:

• Une application native ne peut s'exécuter que sur un certain système d'exploitation (iOS ou Android) tandis que PWA est alimenté par des navigateurs mobiles et pris en charge sur iOS et Android.
• Vous devez télécharger les applications natives à partir d'une boutique d'applications; pendant ce temps, PWA peut être installé rapidement après l'ajout à l'écran d'accueil.
• Les utilisateurs doivent accéder à leurs magasins d'applications pour obtenir la dernière version des applications natives mais rafraîchissant pour obtenir les mises à jour PWA.
• Étant donné que PWA s'exécute directement dans un navigateur Web, il est plus facile pour les propriétaires de magasins de partager et de promouvoir les PWA que les applications natives. Les PWA fonctionnent à la demande sans occuper la mémoire de l'appareil comme les applications natives

b) Magento et PWA

En 2017, Magento a collaboré avec Google pour apporter le meilleur des fonctionnalités PWA à la plate-forme Magento d'ici la fin de 2018. Magento 2.3 est sorti le 28 novembre 2018, avec une tonne de mises à jour impressionnantes et Magento PWA en faisait partie.

Magento, en fait, est l'une des premières plates-formes de commerce électronique à permettre à ses utilisateurs d'exploiter pleinement le potentiel des PWA. Magento a également introduit PWA Studio qui offre aux développeurs les outils nécessaires pour créer et maintenir avec succès une vitrine PWA au-dessus de Magento.

c) Pourquoi devrions-nous appliquer PWA dans Magento 2?

L'intégration progressive de l'application Web a attiré énormément l'attention des utilisateurs de Magento, en particulier lors de la sortie de Magento 2 PWA Studio. Voici trois principales motivations pour convertir votre site Web en Magento PWA:

• Expérience utilisateur améliorée sur les appareils mobiles: obtenir le PWA sur le mobile des utilisateurs est sans effort, aucun téléchargement requis, mais c'est juste la porte avant qu'ils ne fassent l'expérience de fonctions incroyables comme le mode hors ligne (accédez à l'application même lorsque vous perdez votre connectivité Internet), la synchronisation en arrière-plan (reporter jusqu'à ce que la connexion réseau soit stable) et d'autres fonctionnalités de type appli.
• Coûts de développement et de maintenance inférieurs à ceux des applications natives: pour les applications natives, vous devrez développer deux applications distinctes (une pour iOS et une pour Android), ce qui permet de doubler le temps et les efforts de développement et de maintenance des applications. D'un autre côté, une base de code unique est nécessaire pour créer un PWA qui peut fonctionner quel que soit le système d'exploitation.
• Le site Web PWA dans Magento 2 n'est pas simplement une tendance passionnée, ce sera l'avenir des applications: de nombreux magasins Magento ont adopté cette technologie et ont constaté que la satisfaction de leurs utilisateurs mobiles s'était considérablement améliorée.

d) Pourquoi Magento se concentre-t-il sur les PWA?

Le graphique ci-dessus montre que 63,5% des ventes du commerce électronique en 2018 ont été réalisées via des téléphones mobiles et des tablettes. En 2019, les ventes via les appareils portables devraient atteindre 67,2%.

Étant donné que le m-commerce génère plus de ventes en ligne, Magento a pris une décision judicieuse pour apporter des tendances avancées comme PWA à sa plate-forme.

e) Comment Magento PWA peut-il améliorer les affaires en ligne?

Vitesse remarquable - Le seul facteur essentiel pour toutes les boutiques en ligne est la vitesse. Si un site mobile prend plus de trois secondes à charger, il y aura une baisse de 53% des visites mobiles. En d'autres termes, 53% des clients quitteront un site Web si le chargement prend plus de trois secondes. Les PWA joueront un rôle majeur ici car ils sont extrêmement rapides. La raison pour laquelle les PWA sont plus rapides est la mise en cache au niveau du navigateur qui est possible en raison des travailleurs de service. Les PWA utilisent des techniciens de service pour pré-mettre en cache une partie de l'application Web pour la charger instantanément lorsque l'utilisateur l'ouvrira la prochaine fois.

Compatibilité multiplateforme - Les PWA peuvent fonctionner sans problème sur presque tous les navigateurs et plates-formes mobiles largement utilisés. Cela inclut les navigateurs tels que Chrome, Safari, Edge et Firefox. La base de code Web unique suffit pour fonctionner sur plusieurs plates-formes, y compris les ordinateurs de bureau. Par conséquent, les entreprises n'ont pas à développer et à maintenir des applications pour différentes plates-formes. De plus, les PWA n'ont pas besoin d'être mis à jour depuis l'App Store. Les mises à jour peuvent être fournies en temps réel comme un site Web.

Conception réactive - La mise en œuvre de PWA se traduira par une expérience cohérente sur tous les appareils tels que les ordinateurs de bureau, les téléphones mobiles et les tablettes. Cela contribuera à améliorer l'expérience client. Google a déclaré que les sites avec une conception Web réactive se classeraient mieux dans les résultats de recherche Google. Par conséquent, la mise en œuvre de PWA peut améliorer le classement du site dans les résultats de recherche Google.

Prise en charge hors ligne - Une partie du site PWA complet peut être configurée pour fonctionner hors ligne. Par exemple, les clients peuvent parcourir les produits de votre site e-commerce et les ajouter au panier sans connexion Internet, à condition d'avoir déjà visité les pages. Les clients peuvent même passer des commandes hors ligne, une fois Internet connecté, la commande sera traitée.

SEO-friendly - Étant donné que les sites PWA sont très attrayants et fiables, les visiteurs peuvent rester plus longtemps que la durée habituelle. En outre, des facteurs tels que la vitesse, le support hors ligne, etc., contribueront à un engagement élevé des utilisateurs. Un autre avantage significatif de l'utilisation de PWA en termes de référencement est «l'index mobile-first». Google a récemment annoncé que la version mobile d'un site serait indexée en premier. Cela signifie que les sites qui n'ont pas de version adaptée aux mobiles ne fonctionneraient pas bien dans les classements.

Notifications push - Les notifications push sont les messages envoyés en tant que notifications à partir de l'application. Ils augmenteraient l'engagement jusqu'à 88%. Les notifications push sont importantes pour les entreprises de commerce électronique pour tenir les clients informés des dernières offres, offres et mises à jour des commandes.

Ajouter à l'écran d'accueil - L'icône d'application, qui ressemble à une icône d'application native, des sites PWA peut être ajoutée à l'écran d'accueil des smartphones. Les utilisateurs peuvent cliquer sur l'icône et visiter le site directement au lieu d'aller sur le navigateur puis sur le site Web. Cela augmentera le temps passé par l'utilisateur sur l'application, ce qui entraînera éventuellement un taux de conversion plus élevé.

f) Quels avantages les PWA peuvent-ils promettre aux entreprises de commerce électronique?

Étant donné que les PWA combinent le meilleur des deux mondes - application native et web mobile, ils résolvent simultanément deux problèmes importants rencontrés par l'industrie du commerce électronique:

ü Taux de conversion plus élevé - Les conversions sur le Web mobile sont inférieures par rapport aux conversions sur les applications mobiles. Les PWA offrent une expérience de type application transparente et combinée à des fonctionnalités telles que la prise en charge hors ligne, la vitesse et la compatibilité multiplateforme; les taux de conversion peuvent augmenter.

ü Augmentation du nombre d'utilisateurs - Les clients téléchargent uniquement les applications mobiles des entreprises de commerce électronique bien établies. Avec les PWA, les clients peuvent ajouter la PWA de la boutique en ligne à l'écran d'accueil de leur téléphone en cliquant simplement sur un bouton.

g) Méthodes pour convertir un site Web Magento 2 en PWA?

• Installer les extensions PWA Magento 2
• Créez votre propre PWA à l'aide de Magento 2 PWA Studio
• Convertir le site en PWA en utilisant le thème PWA de Magento 2

h) Études de cas PWA

AliExpress

AliExpress est l'une des plus grandes entreprises de commerce électronique, non seulement en Chine mais dans le monde. Une fois qu'ils ont mis en œuvre PWA, ils ont vu des résultats en quelques jours. Il y a eu une augmentation de 74% du temps passé sur leur site Web et le nombre de pages vues a doublé.

Flipkart

Flipkart est le plus grand magasin de commerce électronique d'Inde et a lancé Flipkart Lite en tant que PWA.

Le temps passé sur le site des utilisateurs est passé à 3,5 minutes avec PWA, auparavant il était de 70 secondes dans le cas de l'application native. Le taux d'engagement est passé à 40% et une conversion supérieure de 70% a été observée chez les clients arrivés via la fonction Ajouter à l'écran d'accueil. L'utilisation des données a également été réduite à un tiers.

OLX

OLX est un marché leader en Inde et les taux de rebond étaient élevés pour le Web mobile. La moitié de leur trafic provenait du Web mobile et ils ont choisi PWA pour résoudre leurs problèmes.

Après la mise en œuvre de PWA, le taux de rebond a baissé de 80% et le taux de clics (CTR) sur les annonces a augmenté de 146%. Grâce aux notifications push, le taux d'engagement a augmenté de 250%.

Jumia

Jumia est un magasin de commerce électronique populaire en Afrique, et après avoir constaté les avantages de PWA, ils ont appliqué PWA à leurs autres opérations telles que Jumia Travel. Le trafic vers leur PWA a augmenté de 12 fois plus que le trafic combiné des applications natives - Android et iOS. L'utilisation des données a été réduite de cinq fois et 2x moins de données étaient nécessaires pour terminer la première transaction. De plus, le stockage de données requis a été réduit de 25 fois.

Konga

Konga est un grand acteur au Nigeria, et ils ont utilisé PWA pour réduire la consommation de données. En mettant en œuvre PWA, la charge initiale a pris 92% de données en moins et pour terminer la première transaction, 82% de données en moins étaient nécessaires.

Entreprises qui utilisent des fonctionnalités limitées de PWA

Pour utiliser tout le potentiel de PWA, le site doit être construit à partir de zéro. Cela peut être assez cher. Cependant, il est également possible d'intégrer uniquement les fonctionnalités PWA requises au site Web existant.
Les entreprises peuvent se concentrer sur les fonctionnalités qui créeront un impact maximal et les implémenter. Cela augmentera également considérablement l'expérience client. Voyons des exemples de certaines entreprises qui utilisent certaines fonctionnalités de PWA.

Airberlin

AirBerlin a utilisé la fonctionnalité hors ligne de PWA pour offrir une assistance hors ligne fiable à ses clients dans les aéroports. Un support hors ligne a été ajouté et le temps de chargement initial a été réduit à moins d'une seconde. Cela a permis à leurs passagers d'accéder à la carte d'embarquement et aux détails du voyage sans connexion Internet.

Le Washington Post

Le Washington Post a créé une version PWA simple en utilisant la démo PWA pour son principal fil d'actualités. Ils se sont concentrés sur la vitesse. Le temps de chargement de la page a été réduit à 80 ms. Vous pouvez voir la démo en direct de ce produit sur WAPO.com/PWA. Puisqu'ils ont vu un résultat incroyable, ils ont décidé d'utiliser PWA pour leur expérience Web mobile principale.