Von Magento wurde angekündigt, für Version 2 der beliebten E-Commerce Plattform den Weg zur Progressiven Web App zu gehen. Seitdem gibt es im Magento Forum eine Diskussion darüber, welches Frontend-Framework es werden soll. Lasst uns erstmal klären, was Progressive Web Apps (PWA) eigentlich sind.

PWA ist keine neues Framework, keine Library oder sogar eine Programmiersprache. PWA definiert acht Eigenschaften, die erfüllt sein müssen, damit eine Webseite als PWA gilt. Das PWA Konzept wurde Mitte 2015 von Google gepusht und wird seitdem immer weiter vorangetrieben.

Die acht Core-Eigenschaften von PWA

• Erkennbar (Discoverable)
  • Durch eine JSON-Datei, welche Web App Manifest genannt wird, können PWA Seiten von „normalen“ Webseiten unterschieden werden. Anbieter von Suchmaschinen wie z.B. Bing durchsuchen aktuell schon das Web nach diesen JSON-Dateien, um die Web App in ihren App-Stores anzuzeigen.
• Installierbar (Installable)
  • Die Web App lässt sich auf dem Startbildschirm und im App-Switcher des Smartphones installieren. Der User wird in unterstützen Browsern dazu aufgefordert, wenn er die Seite innerhalb kurzer Zeit mehrfach besucht.
• Verlinkbar (Linkable)
  • Die Web App muss natürlich Links (URLs) zu Ansichten und Zuständen der Web App zur Verfügung stellen. Das, was wir aus dem Browser in der Desktop-Variante gewohnt sind, darf nicht verloren gehen.
• Netzwerk unabhängig (Network independent)
  • Es muss sichergestellt sein, dass die Web App auch bei schwacher oder gar keiner Internet Verbindung funktioniert.
• Fortschrittlich (Progressive)
  • Wenn ein User ohne kompatiblen Browser auf die PWA-Seite kommt, soll die Seite auch abwärtskompatibel funktionieren. Neue fortschrittliche (progressive) Browser sollen dem Anwender aber die bestmögliche Erfahrung bieten (quasi die neuen Features unterstützen).
• Wiederkehrend (Re-engagable)
  • Mit Hilfe von Push-Nachrichten können User dazu animiert werden, die PWA erneut zu verwenden. Push-Nachrichten können auch gesendet werden, wenn der Browser geschlossen ist.
• Responsive
  • Die Webseite passt sich den Gegebenheiten des Gerätes an. Die Darstellung passt sich vom kleinen Smartphone bis zum Curved-Flat-TV immer an.
• Sicher (Safe)
  • Die komplette Webseite wird immer über HTTPS ausgeliefert.

Knockout JS – Warum ein sterbendes JS-Framework?

Mit dem Release von Version 2 am 17. November 2015 hatte Magento auf KnockoutJs, UiComponents und weiterhin auf PHTML-Templates gesetzt. Bei der Entwicklung von Magento 2 war auch mal Twig als Template Engine in der Eruierungsphase. KnockoutJs hatte aber den enormen Vorteil, dass es einfach in bestehende Strukturen integriert werden kann. Dadurch wurde einiges an Aufwand und Zeit eingespart. Leider fiel das Feedback der Frontend-Entwickler nicht so rosig aus. Eine häufig gehörte Frage war/ist: „Warum muss ich ein sterbendes JS-Framework lernen?“.

Strikte Trennung von Frontend und Backend

Seit dem Release von Magento 2 ist einiges an Zeit vergangen und Magento hat auch viele Dinge erfolgreich umgesetzt. Zum Beispiel: eine umfangreiche Erweiterung der Rest API, die Einführung diverser Tests (Unit, Integration etc.), PHP7-CodeStyle und sehr viel Performance. Irgendwie hat man trotzdem das Gefühl, das Frontend hängt, was die Modernisierung angeht, hinterher. Und genau deshalb ist der Schritt in Richtung PWA absolut zu begrüßen. Magento wird in absehbarer Zukunft Headless werden und das Frontend wird auch ohne Backend funktionieren, sofern die Datenstruktur dem erwarteten Format entspricht. Zum Rendern des Frontends kann auf PHP verzichtet werden und Magento muss auch nicht initialisiert werden.

Zurück zum Thema PWA. Wenn ich das nun alles weiß, sollte ich mich als Shopbetreiber, der ein neues Projekt mit Magento 2 startet, folgendes fragen: „Warum auf gewöhnliche Magento 2 Templates setzten?“. Es gibt dafür natürlich gute Gründe. Zum Beispiel: Entwicklungskosten, einfache Integration von existierenden Modulen und auch nah am (aktuellen) Core bleiben. Allerdings gibt es auch gute Gründe, sich dagegen zu entscheiden: Modernes Frontend, eindeutige Trennung von Frontend und Backend, Entlastung der Datenbank (bei Nutzung von Redis), Nutzung der Device-Features (wie z.B. Offline-Shopping und Push-Notifications).

Die Feature Unterstützung der Browser wächst mit der Zeit

Der größte Kritikpunkt an PWA ist aktuell, dass es nicht von allen Browsern unterstützt wird. Die meisten Features werden aktuell vom Chrome Browser abgedeckt. Danach folgen Firefox und Windows Edge Browser. Apple hat sich mit Safari seit kurzem dazu entschlossen, die Service Worker (welche für PWA benötigt werden) umzusetzen. Microsoft hatte vor einem Jahr damit begonnen und hat bis heute noch nicht alle Features umgesetzt. In ein bis zwei Jahren könnte Apple also mit Safari auch viele Features unterstützen. Die Begeisterung ist natürlich nicht so groß, da im AppStore viel Geld mit nativen Apps verdient wird. Trotzdem ist der Druck auf der anderen Seite auch sehr groß, um diese Technologien im Browser voranzutreiben. Für eine Übersicht, welche Device Features, welcher Browser schon unterstützt, kann ich die Seite whatwebcando.today empfehlen.

Fazit

Abschließend kann man sagen, dass ein E-Commerce Projekt, welches die acht Core-Eigenschaften von PWA berücksichtigt und sich die Device-Funktionen für den eigenen Anwendungsfall zu Nutze macht, für die Zukunft sehr gut aufgestellt ist. Der Weg dahin kann nur über die strikte Trennung von Backend und Frontend, sowie mit einem modernen JavaScript-Framework wie Angular, React/Redux oder vue.js, führen. Lasst den „fancy shit“ nicht aus den Augen und hört auf mit 0815 E-Commerce-Projekten!

Ressourcen

• Top 10 E-Commerce Progressive Web Apps
• Beispiel zu Progressive Web Apps
• Why “Progressive Web Apps vs. native” is the wrong question to ask
• Google Development Progressive Web Apps
• Progressive Web Apps Teil 1 bis 6
• Progressive Web Apps mit Angular 2

(Bildquelle: Bakhtiar Zein / Shutterstock)