Personnalisation des thèmes ou codage à partir de zéro —

Cet article met en lumière les PWA Magento et explique pourquoi les propriétaires d'entreprise les obtiennent (souvent au lieu d'applications natives). Alex Husar présente les moyens de développer des applications Web progressives sur Magento, ainsi que les principaux avantages et inconvénients de chaque voie de développement.

Lorsque vous traitez avec le commerce électronique à un moment donné, vous avez probablement entendu, et peut-être utilisé Magento, une plate-forme de commerce électronique open source. Cependant, que se passe-t-il si vous souhaitez créer une application Web progressive avec Magento ? Est-ce une bonne idée, pourquoi voudriez-vous le construire et comment procéderiez-vous pour le construire ?

Pourquoi les propriétaires d'entreprise optent-ils pour les PWA Magento dans les années 2020 ?

Les PWA existent depuis plus de cinq ans, pourtant, les applications natives les dépassent en nombre à la fois en termes de quantité et de nombre de fois où les utilisateurs les téléchargent.

Mais voici quelques découvertes récentes de Maximiliano Firtman concernant Chrome :

• Le nombre d'origines avec Les PWA ont augmenté de 170 % en 2020.
• De plus, la même ressource indique qu'au cours de la dernière année, l'utilisation des travailleurs de service a également augmenté de 38 %.
• Cependant, à la fin de 2020, environ 1 % des sites Web. incluait un technicien de maintenance et 2,2 % avaient un fichier manifeste d'application Web installable. Mais beaucoup, y compris Gartnerpensent que les PWA sont l'avenir des ventes mobiles qui dépasseront le marché dans les années 2020 :

  « Les applications Web progressives sont un moyen rentable et efficace d'atteindre un large public avec une expérience d'application proche de celle d'origine qui prend en charge le cycle de vie complet du client. Les chefs d'application pour les technologies de commerce numérique doivent prévoir les PWA lors de la conception d'expériences de commerce numérique ».

  De nombreux grands acteurs ont pris en compte une telle opinion et ont récemment mis en œuvre cette technologie. Certains des noms incluent Amazon's Luna, TikTok, Tinder, parmi de nombreux détaillants en ligne.

  En fait, les applications Web progressives ont déjà apporté des avantages de conversion à un nombre important de marques. Des dizaines d'entreprises qui ont lancé des PWA ont obtenu des résultats impressionnants, démontrant la rentabilité d'une telle décision. Examinons quelques chiffres :

  • Depuis le lancement de leur PWA, Trivago a amélioré l'engagement, a enregistré une augmentation de plus de 97 % des clics sur les offres des hôtels et a évidemment stimulé sa conversion.
  • Sur la base des données fournies par les conclusions de divante sur 30 études de cas PWA, les applications Web progressives ont un taux de conversion mobile 36 % plus élevé que les applications natives.

  « Mais ce sont surtout de gros joueurs », pourrait-on penser. « Les petites ou moyennes entreprises obtiendraient-elles un retour sur investissement tangible des PWA ? » Oui, elles le feront.

  • Par exemple, Les statistiques de Magento PWA suggèrent que le Boucher de Blue boutique en ligne a connu une augmentation de 169% des conversions après le lancement progressif de son application Web. La marque Rooted Objects a enregistré une croissance de 162 % des conversions, quelle augmentation tangible !
  • De plus, Garten-und-Freizeit, un magasin de commerce électronique allemand qui vend des meubles, a constaté une amélioration incroyable de ses métriques après avoir obtenu un PWA. Ils ont obtenu une baisse du taux de rebond de près de 40 % et plus de 350 % d'utilisateurs actifs supplémentaires sur leur application Web progressive Magento basée sur VueJS.

  

  5 avantages majeurs des PWA Magento Vous trouverez ci-dessous quelques éléments principaux à prendre en compte.

  1. Développement économique et économique

  Ces deux points méritent peut-être d'être mentionnés en premier lieu. Construire une PWA est moins cher qu'une application native.

  L'une des raisons en est qu'une PWA a la même base de code. Ainsi, contrairement au cas des applications natives, l'application Web progressive n'a besoin d'être codée qu'une seule fois. C'est-à-dire que vous n'avez pas besoin de créer de code pour répondre aux exigences distinctes d'Android et d'iOS. -au marché. Pourquoi donc? Lire le point 2.

  En savoir plus après le saut ! Continuez à lire ci-dessous ↓

  2. Les PWA fonctionnent dans les navigateurs

  Contrairement à leurs « antécédents » d'applications natives, les applications Web progressives sont lancées dans les navigateurs. Il y a plusieurs choses à soulever à cause de cela.

  Pages trouvables

  Comme les PWA fonctionnent dans les navigateurs, elles ont des pages Web avec des URL qui fonctionnent comme n'importe quel autre site Web (qu'il soit lancé sur un ordinateur de bureau ou un appareil mobile).

  Suite à ce qui précède, une force indéniable des PWA, par rapport aux applications natives, est que leurs pages sont trouvables via les moteurs de recherche. Les pages peuvent être explorées, indexées et classées, comme c'est le cas avec les sites Web classiques. C'est une bonne nouvelle pour le référencement d'un magasin de commerce électronique (car si elles sont correctement optimisées, les pages peuvent « pousser » de manière organique).

  Pour comparer, les applications natives installées sur les appareils des marchés d'applications ne peuvent pas se vanter d'avoir la même chose. Par exemple, les pages produits de l'application native d'un magasin de commerce électronique ne sont pas visibles par les moteurs de recherche. Par conséquent, ils ne peuvent pas être promus séparément ou trouvés par les utilisateurs qui ont saisi une requête de recherche dans Google. Vous avez besoin d'un site pour cela.

  Vous trouverez ci-dessous un exemple de Netatmo PWA. Comme le montrent les captures d'écran ci-dessous, la page produit de la boutique peut être trouvée via Google. Ce ne serait pas le cas s'ils optaient pour une application native.

  

  L'installation d'un PWA sur l'appareil n'est pas obligatoire

  Voici un autre point à noter. Les PWA ne nécessitent pas d'installation depuis l'App Store ou Google Play sur l'appareil à utiliser (comme le font les applications natives).

  Encore une fois, les PWA sont des sites qui s'exécutent dans les navigateurs. Les utilisateurs qui ont ouvert une PWA à partir du navigateur d'un smartphone peuvent même ne pas savoir qu'ils utilisent une application Web progressive, en supposant qu'il s'agit simplement d'un site performant.

  Mais pour la commodité des acheteurs, les PWA peuvent être facilement ajoutées à l'écran d'accueil de l'appareil. De tels raccourcis ressemblent à n'importe quelle autre icône d'application native, mais leur poids est imperceptible pour un utilisateur. Au contraire, une application native d'un magasin de commerce électronique peut atteindre 30, 50 ou même 100 Mo et plus, consommant le stockage interne de l'appareil.

  Découvrez comment fonctionne la fonction « Ajouter à l'écran d'accueil » sur l'exemple. ci-dessous prise sur le PWA Apivita Magento.

  

  Vous pourriez demander : « Mais les gens installent-ils des applications PWA ? Et combien le font ?"

  Voici le problème, la plupart des utilisateurs mobiles qui ont ouvert une PWA dans leur navigateur peuvent ne pas se rendre compte qu'ils utilisent une application Web progressive. Il suffit de regarder les captures d'écran que nous avons montrées. À première vue, ils ressemblent tous à des versions mobiles de sites bien retravaillées. Vous ne serez probablement pas en mesure de dire s'il s'agit d'une PWA ou non. Mais qui s'en soucie ? Les sites PWA bien exécutés sont formidables à utiliser.

  L'essentiel ici est que ces sites aident à convertir. La question devrait donc être « Est-ce que le nombre de personnes qui installent des PWA est important ? » La réponse est « Probablement pas ». Ce n'est pas le cas comme avec les applications natives dont le succès est parfois prédéfini par le nombre de téléchargements.

  En effet, selon les statistiques de Google :

  « La moitié des utilisateurs qui font du shopping via leurs smartphones sont susceptibles d'accéder au site mobile d'un magasin car ils ne sont pas disposés à télécharger l'application sur la place de marché. Par conséquent, nous pouvons conclure qu'il est raisonnable d'améliorer le jeu de votre magasin en l'optimisant pour le m-commerce. Cela concerne principalement son UXUI et sa vitesse, donc une application Web progressive peut être une solution à considérer.

  3. La conception donne le terrain pour la plus grande facilité d'utilisation

  En parlant d'UXUI, tout comme leurs "ancêtres" d'applications natives, les applications Web progressives mettent l'accent sur une facilité d'utilisation améliorée. La navigation, le placement des éléments et le « look » général des PWA sont très familiers aux applications téléchargeables régulières. Mais ce « look » est désormais disponible dans les navigateurs.

  Étant donné que l'accent est mis sur le mobile d'abord, les clients sont plus satisfaits de leur expérience de navigation, ce qui augmente les conversions du magasin.

  Alibaba est l'un des géants du commerce électronique qui avoir « courir toute la gamme » d'un magasin de vente au détail en ligne ordinaire à une application native (créée à des fins d'achat sur mobile), puis à une PWA. Bien que leur application native soit très demandée par les clients, ils ont décidé de se doter d'une application Web progressive pour fournir une UX sans faille à ceux qui utilisent le navigateur pour faire leurs achats sur leur site. En conséquence, ils se sont adaptés aux besoins de leurs clients acquis (qui utilisent habituellement l'application native régulièrement) et ont rendu les achats faciles pour les clients qui ont accédé à leur site à partir d'un navigateur.

  Comparons l'apparence de la PWA d'Alibaba. et application native. J'ai utilisé et ajouté les deux à mon iPhone pour voir en quoi ils diffèrent. Les icônes se ressemblent sur l'écran d'accueil. Pourtant, l'application native pèse 183,4 Mo. Donc, personnellement, je préfère utiliser la version navigateur.

  

  Curieusement, l'application native semble être davantage priorisée par l'entreprise. Lorsque vous accédez à la boutique depuis un navigateur, il vous est proposé d'aller sur le marché des applications pour télécharger l'application native.

  Dans tous les cas, la PWA a un design soigné qui rappelle le style d'une application native. Nous voyons que de nombreux éléments importants pour l'utilisateur sont affichés au-dessus du pli, l'espace est utilisé de manière rationnelle, il y a une barre de menu en bas qui est facile à atteindre avec le pouce, parmi d'autres choix de conception pratiques.

  Alibaba

  . ( Grand aperçu)
  

  L'application native d'Alibaba diffère légèrement de la PWA que j'ai montrée dans les captures d'écran ci-dessus. Le design, le style et le choix des éléments sont similaires. Les deux options du magasin sont également faciles à naviguer.

  

  4. Les PWA fonctionnent rapidement et ouvrent la voie au commerce sans tête. .

  Les magasins rapides ont une influence significative sur les conversions et les classements. Considérez ceci :

  Loin d'être parfaits, la vitesse et les performances du site sont des problèmes courants pour de nombreux magasins Magento, qui sont généralement volumineux et compliqués. Le fait est que la majorité des magasins Magento sont opérationnels depuis environ une décennie et utilisent une architecture monolithique. Dans les années 2020, il existe une alternative plus moderne, l'architecture sans tête, qui implique de découpler le frontend et le backend. être un bon point de départ pour une transformation plus globale tournée vers l'avenir. Nous parlons des performances et de la compatibilité du magasin (à la fois maintenant et à long terme).

  L'idée principale derrière le commerce sans tête est que le frontend et le backend du site se détachent l'un de l'autre, et ils communiquer à l'aide de l'API (par exemple, GraphQL).

  

  Cela permet d'avoir plus d'une interface que vous pouvez créer pour s'adapter à différents points de contact. C'est-à-dire que vous pouvez avoir une application native, une PWA et d'autres interfaces développées pour les appareils que vos clients peuvent utiliser pour faire leurs achats (comme un haut-parleur intelligent ou un réfrigérateur intelligent). Ces multiples "têtes" sont attachées au backend et à la base de données.

  La séparation de l'architecture monolithique (la rendant sans tête) apporte de nombreux avantages. Étant donné que chaque interface est conçue pour répondre à un type d'appareil particulier, l'UXUI, les performances et les conversions s'améliorent. Sans compter qu'il devient plus facile et plus rapide d'implémenter des changements dans une boutique découplée du point de vue du développement.

  « Est-ce qu'une PWA est un "must" dans ce cas, demandez-vous? , mais cela peut être un début pour la transition d'un magasin Magento vers une solution sans tête à part entière. Obtenir une application Web progressive implique de découpler le backend du frontend, c'est-à-dire de diviser l'architecture monolithique. . Et les smartphones et les ordinateurs de bureau sont les deux principaux points de contact qui amènent les magasins Magento à la plupart des conversions en ce moment. Par conséquent, il est logique d'optimiser le magasin pour qu'il fonctionne mieux sur ces appareils.

  Que devez-vous noter d'autre si vous obtenez un PWA ? Étant donné que votre magasin sera déjà découplé, vous pourrez plus tard (si et quand nécessaire) ajouter d'autres « têtes ». Peut-être que vos clients préféreront faire leurs achats sur votre boutique Magento depuis leur smart TV dans cinq ans ? Il sera plus simple pour vous d'ajouter une autre interface à votre site.

  Dans tous les scénarios, le commerce sans tête est prévu comme le plus grand changement sur le marché du commerce électronique au cours de la prochaine décennie, c'est donc matière à réflexion.[19659084]5. C'est ça ?

  En amenant d'autres fonctionnalités PWA, ils peuvent prendre en charge les notifications push. Si vous vous demandez :  « Attendez, les applications natives ne prennent-elles pas également en charge les notifications push ? » Vous avez raison, elles le font. Ce que je veux dire, c'est que ce n'est plus un avantage des seules applications traditionnelles si vous choisissez laquelle développer (une PWA ou une application native). peut ramener les clients dans l'entonnoir. En fait, les notifications push de qualité peuvent multiplier vos taux de rétention de 3 à 10 fois. C'est donc à vous d'inclure ou non les notifications push dans votre stratégie marketing.

  Les gens utilisent-ils les notifications push ? Voici ce que suggèrent les statistiques de ShopPop :

  

  La même chose peut être dite à propos du mode hors ligne. Les applications Web progressives sont capables de fonctionner hors ligne . Pour spécifier, les utilisateurs peuvent continuer à utiliser les parties du site qui ont été mises en cache si la connexion Internet est instable ou hors ligne. Par conséquent, cette fonctionnalité n'est pas non plus un avantage des seules applications traditionnelles. Et franchement, l'ensemble des fonctionnalités des applications Web progressives pour la vente au détail en ligne ne cesse de s'étendre.

  Les applications Web progressives sont-elles toutes parfaites ?

  Non. Surtout quand on parle d'iOS. Il y a toujours des problèmes avec le fonctionnement des PWA sur les appareils iOS, mais dans l'ensemble, la situation du commerce électronique est bonne. Parmi les restrictions les plus notables, citons l'absence partielle de fonctionnalités de paiement in-app. Mais ces problèmes ne devraient pas vous empêcher de créer votre propre PWA.

  Deuxièmement, comme d'habitude, les grandes choses prennent du temps. La création d'une application Web progressive Magento n'est pas une tâche rapide. C'est difficile du point de vue du développement et prend beaucoup de temps. Mais il en va de même pour le développement d'une application native ou l'optimisation d'un site ?

  Les applications Web progressives en valent-elles la peine ?

  Ne vous méprenez pas. Il y a des cas où les applications natives peuvent être un meilleur choix que les PWA. Ceux-ci peuvent, par exemple, inclure les secteurs des jeux et des applications de médias sociaux.

  Mais vos clients utiliseront-ils régulièrement l'application native téléchargée de votre boutique en ligne ? Demandez-vous si vous optez pour la création d'une application traditionnelle (avec tous ses avantages), les utilisateurs prendront-ils le temps d'aller sur un marché d'applications et de la télécharger, surtout si elle est lourde ? L'utiliseront-ils souvent par la suite ou le supprimeront-ils s'ils souhaitent libérer de l'espace de stockage sur l'appareil ?

  Une PWA, en revanche, est disponible à tout moment depuis le navigateur. Cela peut être un avantage pour les personnes qui ne souhaitent pas télécharger d'application sur leur appareil.

  Cependant, il existe des cas où les applications natives se sont révélées être un moyen de vente très efficace dans le commerce électronique. Peut-être que votre site de commerce électronique peut bénéficier à la fois d'une application native et d'un PWA ?

  C'était le cas pour Alibaba dont nous avons parlé plus haut, cette entreprise offre même à ses acheteurs réguliers des avantages pour effectuer des achats en utilisant leur application native. Un autre exemple est la boutique en ligne Tally Weijl qui dispose également d'une PWA et d'une application native.

  

  Les grands magasins de commerce électronique et les grandes marques établies ont souvent les deux solutions. Par conséquent, les petits magasins de détail en ligne et les entreprises qui ne disposent pas d'un budget étendu pour développer deux solutions optent généralement pour une seule.

  Dans tous les cas, au moment de décider laquelle acheter (une PWA ou une application native), vous devez comprendre votre les besoins du public et les spécificités de l'entreprise. À ce stade, vous souhaitez renforcer votre part de commerce mobile et avez besoin d'une solution qui améliorera les conversions mobiles. C'est à vous de décider quelle option convient le mieux aux besoins de votre entreprise, chaque cas est individuel.

  Qu'est-ce que l'obtention d'une PWA peut apporter à la table ? stone" puisque vous optimisez à la fois l'apparence et les performances de la boutique e-commerce sur ordinateur et mobile. Si un utilisateur aime faire ses achats dans votre magasin sur un smartphone, il a la possibilité d'ajouter un raccourci de type lien à l'écran d'accueil pour un accès rapide à la PWA. Mais en même temps, ils peuvent bénéficier d'une expérience d'achat tout aussi bonne sur un ordinateur de bureau.

  Enfin, le processus de reconstruction d'une boutique de commerce électronique Magento en une PWA implique de diviser le backend et le frontend. En passant à une approche basée sur des API et une architecture headless, vous préparez le magasin aux grands changements attendus sur le marché dans les 5 à 10 prochaines années. C'est-à-dire que les gens utiliseront une plus grande variété d'appareils pour faire leurs achats en ligne, y compris des téléviseurs intelligents, des assistants à domicile, etc. Par conséquent, avec une architecture sans tête, vous pouvez ajouter ultérieurement des solutions qui prendront également en charge ces appareils. super. Mais comment sont-ils construits ?

  Il est crucial de choisir en faveur d'une approche optimale lorsque vous commencez le processus de construction d'une application Web progressive sur Magento. Comme vous l'avez peut-être deviné, il existe plusieurs chemins qu'un développeur (ou une équipe de développeurs) peut emprunter pour créer un projet PWA. Et selon le choix, des délais, des difficultés et des obstacles différents peuvent impliquer.

  Discutons des trois principales voies de développement de PWA sur Magento. Il s'agit d'un codage personnalisé à l'aide d'un framework progressif, adaptant une boîte à outils prête à l'emploi ou combinant les deux approches. Nous couvrirons également les avantages et les inconvénients de chacun d'eux.

  1. Utilisation d'un framework moderne

  Cette approche implique un codage personnalisé du PWA Magento à partir de zéro à l'aide d'un framework progressif. Ce sont, par exemple, ReactJS, VueJS ou AngularJS.

  Avant tout, ce chemin convient aux développeurs qui ont déjà une expérience antérieure dans la création de PWA . Pour ceux qui ne font que leur première tentative pour créer une application Web progressive, créer une application de A à Z de cette manière sera assez difficile simplement parce que tout le processus est sur vous. Vous devrez réfléchir à l'ensemble de l'application, à sa logique, sa structure, son architecture, ainsi qu'écrire et assembler vous-même tout le code nécessaire.

  D'un autre côté, opter pour une approche progressive uniquement basée sur un framework est le meilleur choix. si vous devez créer une PWA avec de nombreuses fonctionnalités ou fonctionnalités personnalisées. Cela dit, il sera très difficile de créer une solution Magento PWA très unique et complexe en utilisant uniquement une boîte à outils prête à l'emploi comme Scandi PWA ou Magento PWA Studio.

  Pour expliquer, voici quelques captures d'écran du Bright Star Kids Magento PWA. Ce magasin offre à ses clients la possibilité de personnaliser les produits. Comme vous pouvez le voir, il existe un générateur de personnalisation de produit en plusieurs étapes qui permet d'apporter des modifications à l'article. La seule façon d'obtenir une telle fonctionnalité sur la PWA est d'utiliser un codage personnalisé.

  

  Un aperçu du processus

  De nombreuses étapes impliquent, mais pour donner un bref aperçu, elles peuvent se résumer à 7 étapes frontend et backend :

  1. Effectuer des ajustements système (par exemple, configurer Ubuntu, installer l'environnement d'exécution nodeJS ).
  2. Installation d'un framework progressif comme ReactJS pour créer l'application, en prenant soin de l'implémentation du rendu côté serveur (par exemple, via Razzle).
  3. Ajout de toutes les bibliothèques dont l'application aura besoin pour fonctionner (y compris GraphQL, Redux, et d'autres souvent utilisés).
  4. Façonner l'architecture de l'application à l'aide de dossiers pour maintenir la structure et la navigation.
  5. Assembler l'application (configurer les composants Redux et GraphQL, travailler avec le stockage (réducteurs), définir up Razzle (utilisé pour le chargement des composants), définissant les chemins d'URL à l'aide de routes). ).
  6. Faire un backen d avec des fichiers et la gestion du backend GraphQL qui traite les requêtes. ]Bon à savoir

     Évoquons quelques points à garder à l'esprit lorsque vous créez une PWA Magento à partir de zéro. Nous partagerons ici quelques conseils sur les choses qui fonctionnent dans la pratique et quelques solutions de contournement pratiques.

     1. Gestion des Service Workers

     Les Service Workers sont très importants pour les applications Web progressives. Ce fichier Javascript est nécessaire pour la mise en cache des données, peut jouer le rôle d'un proxy qui traite les requêtes HTTP et est utilisé pour créer des fonctionnalités pour les notifications push et le mode hors ligne. La configuration des techniciens de maintenance peut être très difficile.

     L'un des moyens les plus efficaces d'approcher les techniciens de maintenance consiste à opter pour un plug-in Razzle JS. Avec son installation, vous pouvez configurer correctement le travail de ce fichier. Lorsque vous travaillez en mode hors ligne, choisissez le service worker en combinaison avec l'API de cache. La méthode avec des données extraites du réseau avant le cache est considérée comme une bonne option.

     

     2. Rendu

     La gestion correcte du rendu côté client et côté serveur peut devenir délicate lors du développement de Magento PWA. Le rendu côté client doit également être optimisé, car vous souhaitez que le site fonctionne rapidement sur les appareils mobiles. Mais la bonne nouvelle est que les frameworks modernes permettent le rendu des applications des deux côtés (client et serveur).

     Vous pouvez configurer le rendu côté serveur de plusieurs manières, notamment via :

     • un navigateur sans tête (Puppeteer ou Selenium) ;
     • proxy;
     • outils de rendu côté serveur comme Next.js ou Razzle;
     • nodeJS.

     Le recours au proxy peut vous permettre d'obtenir d'excellents résultats, mais ce chemin prend beaucoup de temps. Des outils comme Razzle sont assez simples à utiliser. Néanmoins, choisir une solution Node.js personnalisée peut être le meilleur choix si vous construisez quelque chose de très complexe.

     3. Components & GraphQL

     De nombreuses erreurs sont souvent commises au tout début de la phase d'architecture. Les plus grosses erreurs possibles incluent une taille de composant inappropriée ou si les composants sont disposés de manière irrationnelle. Si les composants sont trop volumineux, cela peut avoir un impact négatif sur les performances et entraîner un nouveau rendu.

     Sur une autre note, les requêtes GraphQL volumineuses peuvent vraiment rétropédaler votre PWA. Pour cette raison, nous vous recommandons de minimiser le nombre de requêtes GraphQL et d'utiliser des outils tels que Varnish pour mettre en cache GraphQL. à construire une PWA avec de nombreuses fonctionnalités personnalisées. Si le magasin va au-delà de l'ensemble de fonctionnalités standard, optez pour ce chemin.

     Inconvénients de l'approche :

     Ce n'est pas le chemin pour les débutants dans le développement de PWA. L'ensemble du processus est sous la responsabilité des développeurs. Cela implique un tas de pierres d'achoppement auxquelles un développeur peut être confronté si quelque chose « tombe entre les mailles du filet ».

     Par exemple, de nombreuses erreurs sont souvent commises au tout début de la phase d'architecture. La configuration des techniciens de maintenance peut également être très difficile. Ils sont nécessaires pour la mise en cache des données, accélérant ainsi la PWA, et sont également utilisés pour les notifications push. D'autres exemples d'erreurs possibles incluent une taille de composant inappropriée ou si les composants sont disposés de manière irrationnelle. Si les composants sont trop gros, cela peut avoir un impact négatif sur les performances et conduire à un nouveau rendu.

     Si vous êtes le seul à coder, vous pouvez oublier ou omettre quelque chose par inadvertance. De plus, vous rencontrerez probablement un problème ou quelque chose auquel vous n'avez pas pensé ; cela conduira à réécrire une grande partie de votre propre code pour le faire correctement.

     2. Personnalisation des solutions de la boîte à outils

     Alternativement, il existe des options de package pour la création d'applications Web progressives Magento qui peuvent être modifiées. Comme vous l'avez peut-être deviné, cette option est plus adaptée aux débutants.

     Ce que vous devez comprendre, c'est que des boîtes à outils comme celle-ci fournissent des solutions de code plus ou moins universelles . Cette option peut faire gagner du temps aux développeurs sur le codage à partir de zéro, notamment s'ils envisagent de créer une PWA Magento standard sans aucune fonctionnalité unique.

     Néanmoins, parce que le code de la boîte à outils est conçu pour être universel, être difficile de personnaliser un thème si votre PWA a besoin de quelque chose de non standard . Par conséquent, si le magasin Magento PWA doit être complexe ou doit avoir des fonctionnalités uniques, il sera alors trop difficile d'obtenir le résultat souhaité en utilisant simplement une boîte à outils. Bien trop souvent, opter pour une solution prête à l'emploi dans un tel cas est très déraisonnable. Vous allez extraire beaucoup de code excessif qui devra être supprimé.

     Jetez un œil à l'application Web progressive Timetravels. En raison des particularités des services vendus, la caisse de ce site est absolument unique. Il diffère considérablement des caisses des sites de commerce électronique classiques et comporte un tas d'étapes et de champs. C'est-à-dire que vous ne parviendrez pas à créer une telle caisse personnalisée en utilisant uniquement les ressources prêtes à l'emploi fournies.

     

     Trois principaux kits d'outils PWA pour Magento

     Les trois packages de kits d'outils les plus couramment utilisés sont Magento PWA Studio, Scandi PWA et Vue Storefront. Regardons chacun de plus près.

     1. Magento PWA Studio

     Le Magento PWA Studio est la « boîte à outils » officielle pour la création de PWA fournie par Magento. Basé sur ReactJS, le PWA Studio utilise des blocs de code React et propose des composants prêts à l'emploi et une architecture frontale pour PWA Storefront. Les outils disponibles dans le Studio peuvent faire gagner du temps à un développeur lors de la création manuelle d'éléments qui constituent une PWA standard.

     Parmi les points forts à noter est que la boîte à outils n'est pas monolithiquece qui signifie que les développeurs peuvent n'utilisez que les pièces requises plutôt que l'ensemble du package. Ainsi, vous pouvez éviter de commettre des erreurs critiques au tout début du projet. De plus, vous pouvez gagner du temps sur les configurations (telles que le générateur d'applications), les techniciens de maintenance, la mise en cache et les travaux de routage. la configuration d'un environnement pour le développement PWA),

  7. Package Peregrine (inclut les crochets et composants React),
  8. Package Venia (avec le magasin et les composants d'interface utilisateur pour les visuels),
  9. UPWARD-JS (pour le serveur UPWARD qui est la médiane entre le PWA et le serveur Magento),
  10. Documentation du projet.

2. Scandi PWA

Un autre exemple de boîte à outils est Scandi PWA. Étant très axé sur les développeurs, Scandi PWA fournit le thème placé au-dessus de Magento. Cet ensemble d'outils propose également des composants et des fonctionnalités prêts à l'emploi qui peuvent être empruntés et modifiés. Actually, Scandi PWA currently covers a broader range of cases and offers more ready-made solutions than the PWA Studio. Due to the accessibility of its quite extensive selection of readily available solutions, it may possibly be a better choice for you if you want to speed up the development process and therefore cut development costs (provided that your PWA is more or less standard).

The Scandi PWA toolkit can boast of having a large number of solutions in its roadmap that can be adopted. These already include:

• Configuration basics (theming, branding, languages, time zone, location, multi-store setup, other store details);
• Catalog and content solutions (everything from configurable and simple products to managing the price and stock);
• Client (cart, login & passwords, previous orders, accounts, wishlists, etc.);
• Components for marketing (customer feedback, product lists, coupons, price rules in the catalog, etc.);
• Search & Navigation (menu, breadcrumbs visibility, layered navigation, quick search, pagination, and other SEO-important points, among others);
• Checkout (payment methods, shipping, guest checkout, among others).

3. Vue Storefront

Vue Storefront offers an open-source headless solution that’s flexibly applicable for multiple eCommerce platforms (it is thus suitable not only for Magento). As such, the Garten-und-Freizeit store that we showed in the screenshots in the first part of the article is based on the Vue Storefront toolkit.

Based on VueJS, the toolset has many ready-for-use blocks. However, the partial lack of Vue documentation can make installation and maintenance tricky at times.

Listing the production-ready solutions that are available:

• server-side rendering,
• Vue Storefront API,
• CMS API,
• ElasticSearch support,
• Vue Analytics,
• Payment system integrations (Paypal, Stripe, Klarna, Mollie, Adyen).

Just as with the Scandi PWA case, Vue Storefront is developed by an individual company, not the official Magento team. Plus, this toolkit is suitable for integrating with numerous e-commerce platforms, thus, isn’t only Magento-oriented. These points are worth keeping in mind.

PWA Development Process Overview via Magneto PWA Studio

The approach of building a PWA using a toolkit differs from the one we described previously. If we take the Magento PWA Studio example, the steps can be shortlisted to the following:

1. Making system adjustments (f.e., configuring Ubuntu, installing the nodeJS runtime environment, and other software).
2. Setting up a new project (e.g., using the PWA Studio Buildpack).
3. Overriding default components that are provided by the Venia Concept to change the PWA to what you need (from the logo to any other parts of the PWA such as the menu).
4. Making a backend module with files and handling backend GraphQL and other queries.

Feel free to browse this detailed guide on how to create a Magento PWA using the PWA Studio if you’d like to check out code examples or need a step-by-step tutorial.

Good To Know

Here are a few recommendations to bear in mind if you decide to build a Magento PWA with the Magento PWA Studio toolkit.

• Mind the matter of styles during the standard component override. Additional styles bring about extra file weight which isn’t good for your PWA. Therefore it is crucial to remove the unnecessary blocks of code containing unused default styles.
• Handling GraphQL queries smartly can be another problem to tackle. Because the Magento PWA Studio toolkit rarely uses query fragments, you may face obstacles. A workaround solution here is splitting big queries into parts and using them multiple times. Note, however, that this tip isn’t universally applicable and can lead to unpleasant consequences if used in inappropriate parts of the progressive web application (for example, in listings).
• Make sure to not get confused with talons and hooks, otherwise, you can mix up the visual and logic components. Put simply, hooks are reusable, talons are not. You can check out this document for a more detailed explanation.

Toolkit Approach Pros:

As we’ve already mentioned, choosing a toolset as a path for creating a PWA is reasonable for those who have no prior experience with building PWAs.

The ready-made blocks are customizable and can shorten the time spent on installation, set-ups, etc. The process is more like an override rather than building from the ground up.

Cons Of The Toolkit Approach:

If your project differs from what’s offered by the PWA Studio or other analogous packages as a standard, you may face the challenge of changing the code. And, at times, it’s very hard to modify it.

You can end up not only wasting extra time on such code customization but also implementing PWA elements that’ll be unnecessary for your specific app (this can slow load time and lower performance).

Again, if the PWA that you’re developing requires highly customized solutions, custom development is the way to go, not tailoring ready blocks.

3. Opting For A Combo Solution

Finally, the third choice is using a combination of custom coding and some readily available toolkit pieces. This seems like a gold meridian for many developers.

An Overview Of The Process

Here are a couple of pointers:

• For instance, you can opt for a ready-made framework and architecture that are given in a toolkit. You may also make use of the parts that deal with caching, routing, and the service worker.
• Yet, when working on the frontend parts of the PWA, a developer can use his own code. This will be better than overriding and deleting the unneeded app code given in the toolkit.

Pros Of The Combined Approach:

It allows saving time on manual coding for standard features. It’s simpler to tweak the standard PWA parts and leave your unique code for the custom parts of the app.

Cons Of The Combined Approach:

A combined approach will involve additional code checks and studying what the ready-made solutions have on offer (i.e., what you can and can’t use for your PWA).

When you decide on using a blended approach, you can still end up with a deal of excessive code that’s “pulled” from the toolkit. Thus, to optimize your progressive web app, you’ll have to put in plenty of hours to review the code and remove all the parts you don’t need.

Similarly, you can face the need to untangle abstractions and fix the bugs that might occur due to mixing your code with that from the toolkit.

Final Thoughts

All in all, Magento’s progressive web applications are an investment that’s undoubtedly worth it. It’ll bring many benefits in the long run as well as show results straight off. What’s for development, there’s a lot to keep in mind because the process is by all means complex. Therefore, when choosing an approach, perhaps, the combined one that’ll give the chance to use a reasonable amount of custom coding with some solutions tweaked to your needs from toolkits is the best choice.

(vf, yk, il)