Verbessern der Magento-Front-End-Leistung mit ReactJS

Magento

Magento ist eine Open-Source-PHP-basierte Plattform zum Erstellen von E-Commerce-Lösungen. Es wurde von der Firma Magento (jetzt Teil von Adobe) entwickelt und wird von über 350.000 Entwicklern auf der ganzen Welt verwendet. Es ermöglicht die Erstellung hochgradig anpassbarer digitaler Storefronts für Business-to-Customer- und Business-to-Business-Zwecke. Magento 2, die transformierte Version der Magento E-Commerce-Plattform, bietet eine brandneue Architektur, Codierungsstruktur und Datenbankdesign.

a) Allgemeiner Überblick

Die Plattform von Magento basiert auf PHP und MySQL. Während seiner 10-jährigen Lebensdauer (die im März 2008 veröffentlichte Version 1.0 und die im November 2015 veröffentlichte Version 2.0 wurden Änderungen in Bezug auf Struktur und Entwicklungsmuster vorgenommen und befindet sich nun in der zweiten Hauptversion, Magento 2.

Die Struktur von Magento besteht aus zwei Hauptteilen, von denen einer das Back-End mit der Datenbank und MySQL sowie den Schnittstellen Modell, Daten und Dienst ist (siehe Abbildung 3). Diese sind direkt miteinander verbunden und werden in Magentos Blöcken, Layouts, verwendet. und Vorlagen, die als Front-End der Anwendung definiert werden.

b) Produktsuche

Eine der herausragenden Funktionen auf jeder Website ist die Produktsuchfunktion, mit der Benutzer Begriffe eingeben können, nach denen nach Produkten gesucht werden soll. Sobald Suchergebnisse gesammelt wurden, kann der Benutzer diese normalerweise nach Kategorien oder Produktattributen sortieren oder filtern.

In Magento verwendet die Suche normalerweise entweder MySQL, Solr oder Elasticsearch zur Indizierung des Katalogs. Die Katalogindizierung bestimmt, welche Ergebnisse an die Storefront zurückgegeben werden, wenn ein neuer Suchbegriff eingegeben oder die Filteroptionen aus bereits gesammelten Ergebnissen geändert werden.

c) ElasticSearch

Elasticsearch ist eine kostenlose Open-Source-Suchmaschine, die auf Apache Lucene basiert. Es wird insbesondere verwendet, wenn große Datenmengen verarbeitet werden und diese Daten schnell abgerufen werden müssen. Bei Verwendung von MySQL kann das Abfragen von Daten bei vielen Daten sehr lange dauern. Das Hauptverkaufsargument von Elasticsearch ist daher die Multiplikation der Abfragegeschwindigkeiten mit Hunderten. Es indiziert Daten in Dokumente mit Schlüsseln und Werten und verfügt über eine API, mit der diese indizierten Dokumente abgerufen werden können.

Bei Verwendung in einem Magento-Store wird der Katalog in einem Elasticsearch-Knoten indiziert. Es kann einfach konfiguriert werden, indem Sie es einfach aktivieren und im Admin-Bereich des Geschäfts die IP-Adresse und den Port des Hosts angeben, auf dem sich der Elasticsearch-Knoten befindet.

d) Such-API

Magento verfügt über eine ganze Reihe von REST-API-Endpunkten, von denen einer für die Suche nach Produkten verwendet werden kann. Dieser Such-API-Endpunkt verwendet als Daten ein Array namens Suchkriterien, das die folgende Struktur aufweist

Um eine Anfrage zu stellen, muss der Client eine GET-Anfrage an einen bestimmten Pfad senden, der an die Basis-URL des Geschäfts angehängt ist. Der Pfad lautet / rest / V1 / search /? an die die Suchkriterien angehängt sind.

2. Reagieren Sie

a) Reagieren Sie als Werkzeug

React ist eine von Facebook erstellte JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen entwickelt wurde. Es basiert auf der Verwendung von Komponenten und Status zum Rendern von dynamischem Inhalt auf Webseiten, ohne dass Seiten geladen werden müssen. Es ist heutzutage eine der beliebtesten und am meisten unterstützten JavaScript-Bibliotheken für Benutzeroberflächen.

Im Gegensatz zu älteren JavaScript-Lösungen, bei denen Änderungen auf der Seite manuell ausgelöst wurden, weiß React, wann die Benutzeroberfläche aktualisiert und auf der Seite neu gerendert werden muss, wenn sich der Status der Komponenten ändert. Die Hauptidee, die React von anderen Bibliotheken oder Frameworks (z. B. AngularJS, Knockout) unterscheidet, ist die Verwendung eines „virtuellen DOM“, das die Leistung verbessert, indem die Anzahl der im DOM vorgenommenen Änderungen verringert wird.

b) Reagieren Sie das virtuelle DOM von React

Das virtuelle DOM von React ist technisch so, wie es sich anhört. Es ist ein DOM, das erstellt wird, wenn Komponenten gerendert werden und wenn sich Status ändern. Der verwendete Ansatz besteht darin, ein neues virtuelles DOM zu erstellen, wenn ein Element neu gerendert werden muss, und es mit einer anderen virtuellen DOM-Darstellung des vorherigen Status der App zu vergleichen. Dabei wird der „Diff“ mithilfe eines Algorithmus erstellt und nur im DOM neu gerendert Elemente, die geändert werden müssen.

Das virtuelle DOM ist eine vollständige Darstellung des DOM, ohne ein tatsächliches DOM zu sein. Dies bedeutet, dass das Erstellen eines neuen virtuellen DOM viel schneller ist als das Erstellen des DOM der tatsächlichen Seite. Da React jedes Mal, wenn etwas neu gerendert werden muss, ein neues virtuelles DOM erstellt, muss es nicht wissen, was sich geändert hat. Dies bedeutet, dass die Entwickler den Renderprozess nicht steuern müssen, da React das DOM der Seite nur dann ändert, wenn eine tatsächliche Änderung erforderlich ist. In Bezug auf die Leistung ist dies eine der besten und intelligentesten Methoden, um einen Teil des DOM, der geändert werden muss, neu zu rendern.

c) Staatsverwaltungsbibliothek

Bei Verwendung einer JavaScript-Bibliothek wie React erstellen Entwickler Komponenten, die in den meisten Fällen statusbehaftet sind. Dies bedeutet, dass jede Komponente Status hat, die sich ändern können und Komponentenaktualisierungen auslösen. Wenn die Anwendung mit vielen miteinander verbundenen Komponenten groß wird, kann dies umständlich werden und Zustände müssen möglicherweise von den Eltern an die Kinder und umgekehrt weitergegeben werden. Um dieses Problem zu umgehen, sind Statusverwaltungsbibliotheken vorhanden. Sie ermöglichen es, die Status der Anwendung an einem Ort zu halten, um die Statusverwaltung zu vereinfachen. Die beiden beliebtesten Bibliotheken neben React sind Redux und MobX.

3. Reagieren und Magento

Magento 2.3 verwendet ein neues Tool namens PWA Studio. Es handelt sich um ein progressives Webanwendungstool, mit dem Entwickler „kopflos“ mit Magento arbeiten können. Dies bedeutet, dass das Frontend nicht direkt mit dem Backend verbunden ist und die Kommunikation über APIs erfolgt.

Bisher wurde die Magento-Benutzeroberfläche mithilfe von sogenannten "Blöcken" erstellt, die eine Vorlage (HTML-Datei) und einen PHP-Block enthalten. Daten werden beim Laden der Seite häufig über diese Blöcke und Modelle und Schnittstellen gerendert, die vom Backend stammen.

PWA Studio verwendet React, Redux und Webpack für die Entwicklung.

a) Was ist die Progressive Web App (PWA)?

Progressive Web App ist eine Web-App, die Webfunktionen (HTML, CSS, Javascript) anwendet, um eine hervorragende Benutzererfahrung zu erzielen, die native Apps nachahmt. Insbesondere kann PWA wie eine native App mit einem Symbol auf dem mobilen Startbildschirm, einer Begrüßungsseite (nach dem Öffnen der App), einer Vollbildanzeige, Push-Benachrichtigungen usw. funktionieren.

Alle PWAs müssen drei wesentliche Kriterien erfüllen: Schnell (fast sofort auf Benutzerinteraktionen reagieren), Zuverlässig (unter schlechten Netzwerkbedingungen arbeiten können) und Engaging (reibungslose App-ähnliche Erfahrung).

Es gibt einige wesentliche Unterschiede zwischen einer PWA und einer nativen App:

• Eine native App kann nur unter einem bestimmten Betriebssystem (iOS oder Android) ausgeführt werden, während PWA von mobilen Browsern betrieben wird und sowohl von iOS als auch von Android unterstützt wird.
• Sie müssen die nativen Apps aus einem App Store herunterladen. In der Zwischenzeit kann PWA nach dem Hinzufügen zum Startbildschirm schnell installiert werden.
• Benutzer müssen auf ihre App Stores zugreifen, um die neueste Version der nativen Apps zu erhalten, müssen jedoch aktualisieren, um PWA-Updates zu erhalten.
• Da PWA direkt in einem Webbrowser ausgeführt wird, ist es für Ladenbesitzer einfacher, die PWAs freizugeben und zu bewerben als native Apps. PWAs arbeiten bei Bedarf, ohne den Speicher des Geräts wie die nativen Apps zu belegen

b) Magento und PWA

2017 arbeitete Magento mit Google zusammen, um die besten PWA-Funktionen bis Ende 2018 auf die Magento-Plattform zu bringen. Magento 2.3 wurde am 28. November 2018 mit einer Menge beeindruckender Updates veröffentlicht, und Magento PWA war eines davon.

Magento ist in der Tat eine der ersten E-Commerce-Plattformen, mit denen die Benutzer das Potenzial von PWAs voll ausschöpfen können. Magento hat außerdem PWA Studio eingeführt, das Entwicklern die erforderlichen Tools bietet, um erfolgreich eine PWA-Storefront über Magento zu erstellen und zu verwalten.

c) Warum sollten wir PWA in Magento 2 anwenden?

Die progressive Integration von Web-Apps hat die Aufmerksamkeit von Magento-Benutzern auf sich gezogen, insbesondere als Magento 2 PWA Studio veröffentlicht wurde. Im Folgenden finden Sie drei Hauptmotive für die Konvertierung Ihrer Website in Magento PWA:

• Verbesserte Benutzererfahrung auf Mobilgeräten: Das Abrufen der PWA auf Mobilgeräten von Benutzern ist mühelos, kein Download erforderlich, aber es ist nur die Tür, bevor sie erstaunliche Funktionen wie den Offline-Modus (Zugriff auf die App, auch wenn Sie Ihre Internetverbindung verlieren) und die Hintergrundsynchronisierung (Verschieben) nutzen Aktionen, bis die Netzwerkverbindung stabil ist) und andere App-ähnliche Funktionen.
• Geringere Entwicklungs- und Wartungskosten im Vergleich zu nativen Apps: Für native Apps müssen Sie zwei separate Apps entwickeln (eine für iOS und eine für Android), was zu einer Verdoppelung des Zeit- und Arbeitsaufwands für die Entwicklung und Wartung von Apps führt. Andererseits wird eine einzelne Codebasis benötigt, um eine PWA zu erstellen, die unabhängig vom Betriebssystem ausgeführt werden kann.
• PWA auf der Magento 2-Website ist nicht nur ein heißer Trend, es wird auch die Zukunft der Apps sein: Viele Magento-Geschäfte haben diese Technologie übernommen und festgestellt, dass sich die Zufriedenheit ihrer mobilen Benutzer erheblich verbessert hat.

d) Warum konzentriert sich Magento auf PWAs?

Die obige Grafik zeigt, dass 63,5% des E-Commerce-Umsatzes im Jahr 2018 über Mobiltelefone und Tablet-Geräte getätigt wurden. Für 2019 wird ein Umsatz mit Handheld-Geräten von 67,2% erwartet.

Da M-Commerce mehr Online-Verkäufe vorantreibt, hat Magento einen klugen Schritt unternommen, um fortschrittliche Trends wie PWA auf seine Plattform zu bringen.

e) Wie kann Magento PWA das Online-Geschäft verbessern?

Bemerkenswerte Geschwindigkeit - Der entscheidende Faktor für alle Online-Shops ist die Geschwindigkeit. Wenn das Laden einer mobilen Site länger als drei Sekunden dauert, sinken die mobilen Besuche um 53%. Mit anderen Worten, 53% der Kunden verlassen eine Website, wenn das Laden länger als drei Sekunden dauert. PWAs werden hier eine wichtige Rolle spielen, da sie unglaublich schnell sind. Der Grund dafür, dass PWAs schneller sind, ist das Caching auf Browserebene, das aufgrund von Servicemitarbeitern möglich ist. PWAs verwenden Servicemitarbeiter, um einen Teil der Webanwendung vorab zwischenzuspeichern und sie sofort zu laden, wenn der Benutzer sie beim nächsten Mal öffnet.

Plattformübergreifende Kompatibilität - PWAs können auf fast allen weit verbreiteten mobilen Browsern und Plattformen reibungslos ausgeführt werden. Dies umfasst Browser wie Chrome, Safari, Edge und Firefox. Die einzelne Web-Codebasis reicht aus, um auf mehreren Plattformen, einschließlich Desktops, ausgeführt zu werden. Daher müssen Unternehmen keine Apps für verschiedene Plattformen entwickeln und warten. Darüber hinaus müssen PWAs nicht aus dem App Store aktualisiert werden. Updates können wie eine Website in Echtzeit bereitgestellt werden.

Responsive Design - Die Implementierung von PWA führt zu einer konsistenten Erfahrung auf Geräten wie Desktops, Mobiltelefonen und Tablet-Geräten. Dies wird dazu beitragen, das Kundenerlebnis zu verbessern. Google hat angegeben, dass Websites mit reaktionsschnellem Webdesign in den Google-Suchergebnissen einen besseren Rang erhalten. Durch die Implementierung von PWA kann die Website daher in den Google-Suchergebnissen einen höheren Rang erhalten.

Offline-Support - Ein Teil der gesamten PWA-Site kann offline geschaltet werden. Kunden können beispielsweise die Produkte Ihrer E-Commerce-Website durchsuchen und sie ohne Internetverbindung in den Warenkorb legen, sofern sie die Seiten zuvor besucht haben. Kunden können Bestellungen sogar offline aufgeben, sobald das Internet verbunden ist, wird die Bestellung bearbeitet.

SEO-freundlich - Da PWA-Websites sehr ansprechend und zuverlässig sind, bleiben Besucher möglicherweise länger als gewöhnlich. Auch Faktoren wie Geschwindigkeit, Offline-Unterstützung usw. tragen zu einer hohen Benutzerinteraktion bei. Ein weiterer wesentlicher Vorteil der Verwendung von PWA in Bezug auf SEO ist der „Mobile-First-Index“. Google hat kürzlich angekündigt, dass die mobile Version einer Website zuerst indiziert wird. Dies bedeutet, dass Websites ohne mobile Version in Rankings nicht gut abschneiden.

Push-Benachrichtigungen - Push-Benachrichtigungen sind die Nachrichten, die als Benachrichtigungen von der Anwendung gesendet werden. Sie sollen das Engagement um bis zu 88% steigern. Push-Benachrichtigungen sind für E-Commerce-Unternehmen wichtig, um Kunden über die neuesten Angebote, Angebote und Bestellaktualisierungen auf dem Laufenden zu halten.

Zum Startbildschirm hinzufügen - Das App-Symbol von PWA-Sites, das wie ein natives App-Symbol aussieht, kann zum Startbildschirm von Smartphones hinzugefügt werden. Benutzer können auf das Symbol klicken und die Website direkt besuchen, anstatt zum Browser und dann zur Website zu wechseln. Dies erhöht die Zeit, die der Benutzer für die App verbringt, was letztendlich zu einer höheren Conversion-Rate führt.

f) Welche Vorteile können PWAs für E-Commerce-Unternehmen versprechen?

Da PWAs das Beste aus zwei Welten kombinieren - native App und mobiles Web - lösen sie gleichzeitig zwei wichtige Probleme, mit denen die E-Commerce-Branche konfrontiert ist:

ü Höhere Conversion-Rate - Die Conversions im mobilen Web sind im Vergleich zu den Conversions in mobilen Apps geringer. PWAs bieten eine nahtlose App-ähnliche Erfahrung und werden mit Funktionen wie Offline-Unterstützung, Geschwindigkeit und plattformübergreifender Kompatibilität kombiniert. Conversion-Raten können steigen.

ü Erhöhung der Benutzeranzahl - Kunden laden nur die mobilen Apps etablierter E-Commerce-Unternehmen herunter. Mit PWAs können Kunden die PWA des Online-Shops mit nur einem Klick zum Startbildschirm ihres Telefons hinzufügen.

g) Methoden zum Konvertieren einer Magento 2-Website in PWA?

• Installieren Sie Magento 2 PWA Extensions
• Erstellen Sie mit Magento 2 PWA Studio eine eigene PWA
• Konvertieren Sie die Site mit dem Magento 2 PWA-Design in PWA

h) PWA-Fallstudien

AliExpress

AliExpress ist eines der größten E-Commerce-Unternehmen, nicht nur in China, sondern weltweit. Sobald sie PWA implementiert hatten, sahen sie Ergebnisse in Tagen. Die auf ihrer Website verbrachte Zeit stieg um 74%, und die Seitenaufrufe verdoppelten sich.

Flipkart

Flipkart ist Indiens größter E-Commerce-Shop und hat Flipkart Lite als PWA eingeführt.

Die Benutzerzeit vor Ort wurde mit PWA auf 3,5 Minuten erhöht, früher waren es bei der nativen App 70 Sekunden. Die Engagement-Rate stieg auf 40%, und bei den Kunden, die über die Funktion "Zum Homescreen hinzufügen" kamen, wurde eine um 70% höhere Conversion festgestellt. Die Datennutzung reduzierte sich ebenfalls auf ein Drittel.

OLX

OLX ist ein führender Marktplatz in Indien, und die Absprungraten für Mobile-Web waren hoch. Die Hälfte ihres Datenverkehrs stammte aus dem mobilen Internet, und sie entschieden sich für PWA, um ihre Probleme zu lösen.

Nach der Implementierung von PWA sank die Absprungrate um 80% und die Klickrate (Click Through Rate, CTR) für Anzeigen um 146%. Mit Hilfe von Push-Benachrichtigungen stieg die Engagementrate um 250%.

Jumia

Jumia ist ein beliebtes E-Commerce-Geschäft in Afrika. Nachdem sie die Vorteile von PWA erkannt haben, haben sie PWA auf ihre anderen Aktivitäten wie Jumia Travel angewendet. Der Datenverkehr zu ihrer PWA stieg um das Zwölffache gegenüber dem kombinierten Datenverkehr nativer Apps - sowohl für Android als auch für iOS. Die Datennutzung wurde um das Fünffache reduziert und es wurden 2x weniger Daten benötigt, um die erste Transaktion abzuschließen. Darüber hinaus wurde der erforderliche Datenspeicher um das 25-fache reduziert.

Konga

Konga ist ein großer Akteur in Nigeria und hat PWA verwendet, um den Datenverbrauch zu senken. Durch die Implementierung von PWA wurden beim ersten Laden 92% weniger Daten benötigt, und zum Abschluss der ersten Transaktion waren 82% weniger Daten erforderlich.

Unternehmen, die eingeschränkte Funktionen von PWA nutzen

Um das volle Potenzial von PWA auszuschöpfen, sollte die Site von Grund auf neu erstellt werden. Dies kann sehr teuer sein. Es ist jedoch auch möglich, nur die erforderlichen PWA-Funktionen in die vorhandene Website zu integrieren.
Unternehmen können sich auf die Funktionen konzentrieren, die maximale Wirkung erzielen, und diese implementieren. Dies wird auch das Kundenerlebnis erheblich verbessern. Lassen Sie uns Beispiele einiger Unternehmen sehen, die ausgewählte Funktionen von PWA verwenden.

Airberlin

AirBerlin nutzte die Offline-Funktionalität von PWA, um seinen Kunden an Flughäfen zuverlässigen Offline-Support zu bieten. Die Offline-Unterstützung wurde hinzugefügt und die anfängliche Ladezeit auf weniger als eine Sekunde reduziert. Dies ermöglichte ihren Passagieren den Zugriff auf Bordkarte und Reisedetails ohne Internetverbindung.

Die Washington Post

Die Washington Post hat eine einfache PWA-Version mit der PWA-Demo für ihren Top-Newsfeed erstellt. Sie konzentrierten sich auf Geschwindigkeit. Die Ladezeit der Seite wurde auf 80 ms reduziert. Sie können die Live-Demo dieses Produkts unter WAPO.com/PWA sehen. Da sie ein unglaubliches Ergebnis sahen, entschieden sie sich, PWA für ihr zentrales mobiles Web-Erlebnis zu verwenden.