Nun, da nach der ersten Magento Live Europe Konferenz in Barcelona Ruhe eingekehrt ist, ist die richtige Zeit gekommen um zu rekapitulieren, was bei einem kleineren, aber nicht minder wichtigen Event passiert ist, das direkt vor der Magento Live Europe in Eindhoven in den Niederlanden stattfand: Reacticon v2.
Was ist Reacticon?
Eine Konferenz für Entwickler, die sich um die nächste Generation von Frontend-Technologien in Magento dreht. Wie der Name es vermuten lässt, dreht es sich um React.js, welches von Magento im kommenden PWA Studio genutzt wird, und auch von einigen Alternativen von Drittanbietern. Das Ziel der Konferenz ist es, die Vertreter der aktuellen PWA Lösungen (Progressive Web App) zusammenzubringen, nicht nur mit React.js. Die erste Reacticon fand im März 2018 (mehr darüber lesen) statt, war auf 120 Teilnehmer begrenzt und schnell ausverkauft. Nun hat sich in diesem Bereich in den letzten Monaten eine Menge getan und alle Lösungen werden erwachsener, deshalb war es an der Zeit für eine zweite Edition.
182 Besucher aus ganz Europa und den USA waren vor Ort. Magento sendete ihre Entscheidungsträger aus dem Bereich, den Produktmanager Eric Erway, Lead Architekt Anton Kril, Frontend Architect Andrew Levine und PWA Architect James Zetlen, letzterer jedoch virtuell zugeschaltet. Nicht zu vergessen auch der omnipräsente Magento Evangelist Ben Marks. integer_net war wieder als Sponsor aktiv und mit 5 Personen vor Ort.
Die Räumlichkeiten und die Organisation war definitiv professioneller als beim letzten Mal (was jedoch auch seinen Charme hatte!), doch das Event hat dabei nicht den Geist der Spontaneität verloren. Es war immer noch einzigartig und experimentierfreudig. Zum Beispiel wurden zwar Vortragende und ihre Themen angekündigt, jedoch ohne feste Zeitplanung oder detaillierte Beschreibung der Vorträge. Organisator Jisse Reitsma versuchte, es etwas mehr wie eine Unconference zu gestalten mit mehr Publikumsteilnahme und Zeit für Fragen & Antworten.
Die Vorträge fanden in einem modernen und super bequemen Hörsaal des High Tech Campus in Eindhoven statt.
Party im Büro von Deity
Deity, einer der Sponsoren und Anbieter für PWA Frontends für Magento, agierte als Gastgeber der After-Show-Party im neuen Büro. Fun fact: Sie haben einen Container mitten im Büro, in dem ein Barbershop seine Dienste anbietet.
Thank you @DEITY_pwa for the haircut in your own barbershop at #reacticon 👍😊 pic.twitter.com/uBVLGYJpEt
— Maria Kern (@maja_kern) 5. Oktober 2018
Am Mittwoch, am Tag vor der Konferenz, gab es bereits eine inoffizielle Party im Büro von Deity. Zufälligerweise war der Premierminister der Niederlande, Mark Rutte, zum Abendessen im selben Gebäude. Wir haben es geschafft, ein Foto mit ihm zu bekommen.
We are very honoured we had the oppertunity to meet our prime minister mister Mark Rutte yesterday! Our open source launch couldn’t have started any better! 🤩🚀 #reacticon #opensource #proud pic.twitter.com/13HmqC8qUL
— DEITY (@DEITY_pwa) 4. Oktober 2018
Doch das ist nicht alles. Die verrückten Leute von Deity hatten eine Konfetti-Kanone mit einem großen roten Knopf zum Launch ihres Open Source Produkts vorbereitet. Der Plan war, dass der Premierminister den Knopf drücken sollte. Sie haben ihn tatsächlich dazu überreden können und er drückte den großen roten Knopf! Wenn nur nicht jemand ein Kabel falsch eingesteckt hätte… kein Konfetti! Da waren wir also, ein großer Moment mit dem Staatsoberhaupt und nichts passierte. Hoffen wir mal, dass dies kein schlechtes Omen ist!
Neuigkeiten und Ankündigungen
Reacticon v2 wurde der Tag der Ankündigungen.
#reacticon sounds like a great event. Was there any speaker on stage that didn’t announce or launch something?
— Fooman (@foomanNZ) 4. Oktober 2018
Ich habe bereits die Open-Source-Veröffentlichung von Deity erwähnt, die bereits vor einiger Zeit angekündigt wurde. Die Ankündigung war jedoch etwas anders als erwartet. Anstatt ihre existierende Lösung, die aus einer Projektimplementierung der Agentur Hatimeria entsprungen war, frei zugänglich zu machen, veröffentlichten sie Deity Falcon, eine komplette Überarbeitung und ein wirklich modulares Framework. Es ist auf Github verfügbar unter https://github.com/deity-io/falcon, noch nicht vollständig in Bezug auf die Features, aber stabil im Hinblick auf die Architektur. Das Team arbeitet in Vollzeit daran, die noch fehlenden Features zu Falcon zu portieren und plant, diese Aufgabe in einem Monat abzuschließen.
Magento selbst veröffentlichte eine “2.0.0-alpha” Version des PWA Studio mit einem neuen Element im Werkzeugkasten, namens UPWARD.
Unified Progressive Web App Response Definitions are simple files describing how a web server delivers and supports a Progressive Web Application. They denote server behavior in a platform-independent way, so that a PWA client application expecting certain behavior from HTTP endpoints can be deployed on any type of tech stack that implements the UPWARD specification.
Quelle: https://github.com/magento-research/pwa-studio/tree/release/2.0/packages/upward-spec
UPWARD ist also eine generische Spezifikation und Magento kommt mit einer Referenzimplementierung in node.js. Magento folgt mit dieser node.js Middleware dem Beispiel von Deity und FrontCommerce und bindet das Frontend dadurch nicht mehr direkt an die Magento API, noch lässt es Magento die App Shell generieren.
VueStorefront machte ebenfalls eine Ankündigung, nämlich dass sie an einer 2.0 Version mit einer neuen Architektur arbeiten, die voraussichtlich Anfang of 2019 kommt. Sie verfolgen ebenfalls einen stärker entkoppelten Ansatz, mit node.js als Middleware und Abstraktionen für die Backend Services. Aber sie werden versuchen, größtenteils Rückwärtskompatibilität zu erhalten.
Es wurden noch weitere Ankündigungen bei der Reacticon v2 gemacht, die sich zwar nicht direkt auf eine PWA-Lösung beziehen, aber dennoch interessant sind:
- Bartek Igielski von Snowdog (und Teil des VueStorefront Teams) veröffentlichte ein Komponenten-basiertes Designsystem namens Alpaca, zusammen mit einem Theme für Magento 2:
- Andrew Levine wurde aus dem PWA-Team entfernt um sich mehr um das Legacy knockout.js Frontend zu kümmern, in Bezug auf Optimierung und Developer Experience. Er stellte seine aktuelle Arbeit, wie man require.js durch webpack ersetzen kann, vor.
Some love for the existing #Magento2 frontend: @drewml is working on replacing RequireJS with Webpack. This has the potential to improve frontend performance a lot. #reacticon pic.twitter.com/D5g9DYxnVH
— Andreas von Studnitz (@avstudnitz) 4. Oktober 2018
- FrontCommerce hat eine “Light”-Version als Open Source veröffentlicht, die nicht für produktive Instanzen gedacht ist, sondern um es auszuprobieren und um einen Eindruck der Code-Grundlage zu bekommen, ohne vorher einen Vertrag unterzeichnen oder eine Lizenz kaufen zu müssen.
- Magento hat die Diskussion um Architekturfragen in den öffentlichen Bereich verschoben unter https://github.com/magento/architecture (und später auch das interne Backlog unter https://github.com/magento/backlog)
Vorträge
Der erste Vortrag war eine Hommage an die ursprüngliche Idee, die später zu Reacticon wurde, nämlich “Kaffee mit James Zetlen”. Die Intention war eine entspannte Unterhaltung bei einem Kaffee um mehr darüber zu erfahren, wie der aktuelle Stand des Frontends ist. Nun sollte Reacticon v2 es wiedergutmachen und die erste Session war folglich eine tatsächliche Unterhaltung um einen Kaffeetisch auf der Bühne. James Zetlen fehlte entschuldigt, aber Eric Erway war ein angemessener Ersatz.
Neben all den Ankündigungen und Präsentationen fand ich folgende drei Vorträge besonders interessant:
- Mārtiņš Saukums über die Integration von Vue Komponenten in das aktuelle Magento Knockout Frontend. Wir machen derzeit etwas Ähnliches und integrieren React.js Komponenten (oder Mini-Applikationen) in ein bestehendes Magento-Frontend. Deshalb war es gut zu sehen, wie andere diese Thematik angehen.
- Javier Villanueva über ein Ende-zu-Ende-Testing in JavaScript mit cypress.io. Ich kannte das Tool vorher nicht, und die zusätzlichen Elemente des Whitebox Testing wie mocked APIs machten es interessant. Es ist also möglich, Acceptance Tests für das Frontend ohne echtes Backend zu schreiben.
- Bartek Igielski präsentierte nicht nur seine Alpaca Komponenten, sondern auch Storybook, ein Tool für interaktive Komponenten-Dokumentation.
Hackathon
Am Tag nach der Konferenz ermöglichte ein Hackathon allen Teilnehmern die neuen Technologien kennenzulernen – mit der Unterstützung ihrer Erfinder. Leider konnte ich nicht selbst daran teilnehmen, also lasse ich hier andere sprechen:
@jissereitsma opening hackaton on the 2nd day of the #reacticon in @DEITY_pwa office in Eindhoven. Tons of fun incoming! pic.twitter.com/I3bIkZ39UT
— Piotr Ryszewski (@Piorys) 5. Oktober 2018
Ladies & Gentlemen: the first UPWARD-based version of @Front_Commerce Lite is live at https://t.co/9387TJDVNL
Code in progress at: https://t.co/LXu0Y610HT#reacticon
— Pierre Martin (@pierremartin) 6. Oktober 2018
Auf einander aufbauen anstatt gegeneinander zu arbeiten. Ist das nicht großartig?
Zusammenfassung und Ausblick
3 different modern FE tooling and #PWA approaches for #magento2 :
– modern FE tooling && compilation on top of M2 FE stack => @drewml and @MartinSH_
– M2 themes => M2 Venia, @GravityDept Acumen
– SOA’s (not tied to M2) @DEITY_pwa @Front_Commerce @VueStorefront #reacticon
— Enno Stuurman (@frontenno_nl) 6. Oktober 2018
So weit ich sehen kann wird 2019 das Jahr der erwachsenen PWA-Lösungen im E-Commerce. Jetzt ist eine gute Zeit um sich mit ihnen vertraut zu machen. FrontCommerce ist bereits die ausgereifteste Lösung, es ist sozusagen an der Front. Deity, Vue Storefront und Magento PWA Studio machen tolle Fortschritte, erfinden sich selbst neu nach den frühen Experimenten und kommen nun stabiler und erwachsener wieder.
Es ist interessant zu sehen, dass Vue Storefront mit der Version 2.0 ebenso wie PWA Studio mit UPWARD in die Fußstapfen der Closed Source Pioniere FrontCommerce und Deity (mit ihrem ersten Produkt “Deity Core”) folgen in Bezug auf entkoppelte Middleware Architektur. Dies scheint der passendste Weg zu sein und erscheint mir sehr sinnnvoll.

Author: Fabian Schmengler
Fabian Schmengler ist Diplom-Informatiker und Magento Entwickler bei integer_net. Seine Schwerpunkte sind Backend-Entwicklung, Konzeptionierung und Test-Automatisierung. Seit 2011 ist er Magento Certified Developer, seit 2014 Magento Certified Solution Specialist.