Vergangene Woche hat mein Kollege Matthias über seine Eindrücke von Magento 2 Module als Backendentwickler berichtet. Auch für Frontendentwickler bringt das neue Shopsystem einige Veränderungen. Die Arbeit mit den Magento 2 Themes stellt neue Ansprüche. Da schon absehbar ist, dass es bis zur Version 2.1 noch einige kleinere Anpassungen geben wird, um ein paar Prozesse glatt zu ziehen, müssen diese Änderungen aber nicht letztgültig sein. Der aktuelle Stand:
Der Aufbau – neue Verzeichnisstruktur
Was sofort ins Auge fällt, wenn man mit Magento 2 startet, sind die Unterschiede in der Verzeichnisstruktur. Wurden zuvor die Template- und Layout-Dateien unter app/design und die Stylesheets unter skin geführt, liegen nun alle Dateien zusammen in einem Magento 2 Themes Ordner und sind nach Modulen untergliedert. Etwas gewöhnungsbedürftig, aber es ist durchaus eine Arbeitserleichterung, alles an einem Ort zu haben – insbesondere bei komplexen Shopfrontends, die eine Vielzahl unterschiedlicher Layout-Elemente umfassen. Außerdem ist dies für eigens entwickelte Module vorteilhaft und übersichtlicher.
Blank und LUMA: die neuen Magento 2 Themes
Magento 2 kommt mit zwei Themes daher. Einem Blank-Theme, das bereits responsive ist und sich durchaus als Grundlage für ein weiteres Customizing eignet. Und dem LUMA-Theme, einem hervorragenden Beispiel für ein Custom-Theme, basierend auf dem Blank. Die Grundidee ist, die Eigenschaften des Blank-Themes als Parent produktiv weiter zu nutzen. Bei der Entwicklung eigener Magento 2 Themes lohnt sich der Blick in den Aufbau von LUMA. Zusammen mit LUMA liefert Magento außerdem einige Demodaten, z. B. Teaser für die Startseite oder Widget-Instanzen und weitere Content-Elemente, die einen guten Eindruck von den Möglichkeiten eines Custom-Theme vermitteln.
Vererbung von Themes im Magento 2 Frontend
Das Fallback-Prinzip ist etwas anders umgesetzt als in Magento 1, ähnelt diesem aber im Grundgedanken. Die Basis sind die Templates der Magento-Standard Module. Das Magento 2 Blank-Theme bildet auf deren Grundlage den Standardshop mit allen grundlegenden Styles. Darauf aufbauend, lassen sich beliebig viele, auch responsive, Magento 2 Themes erstellen. Die Abhängigkeiten zwischen den Parent- und Child-Themes können über eine Konfigurationsdatei leicht definiert werden.
Das Layout in Magento 2
Magento 2 strukturiert auch das Layout neu. Ab sofort gibt es zwei Typen von Layout-Elementen die bekannten Blocks und die neuen Container. Container sind Platzhalter für die Inhalte. Sie dienen nur der Anordnung der Blöcke und enthalten selbst keinerlei Logik. In der Praxis bedeutet das, dass man beispielsweise nicht mehr die Navigation als solche in einem bestimmten Seitenbereich definiert, sondern die Navigation einem Container zuweist, der die Positionierung und Styles enthält.
Das Layout lässt sich weiterhin über direkte Eingriffe innerhalb der Templates anpassen. Es ist jedoch sinnvoller, die Konfiguration über die Layout XML-Dateien vorzunehmen. Magento 2 bietet hier noch wesentlich mehr Möglichkeiten als der Vorgänger, wodurch es nur noch selten einen Grund dafür gibt, Templates zu überschreiben. Damit sinkt zum einen das Risiko von Konflikten und die Stabilität steigt, zum anderen bleibt eine Magento E-Commerce Plattform trotz umfassender Anpassungen upgradefähig.
Modularität und Wiederverwendbarkeit
Magento gewinnt durch die Einführung der Magento UI Library deutlich an Modularität. In der Magento UI Library werden die unterschiedlichsten Frontend-Elemente und -Funktionen (z. B. Schriften, Tabellen, Buttons, Bewertungen, Navigation etc.) vordefiniert und gestylt. Das Styling der Elemente erfolgt dann nicht im Custom-Theme, sondern ein Großteil des Designs lässt sich einfach über Variablen in der Magento UI Library konfigurieren. Auch dies hilft, ein Überschreiben des Magento Core Codes obsolet zu machen und die Upgradefähigkeit des Systems zu sichern. Außerdem verbessert sich die Wiederverwendbarkeit von Styles, sofern man die Library wie vorgesehen verwendet und mit eigenen Content-Elementen weiter entwickelt.
Darüber hinaus kommt im Magento 2 Frontend nun Javascript in Verbindung mit RequireJS zum Einsatz. RequireJS übernimmt das Laden der einzelnen Module der Javascript-Applikationen. Das Besondere: RequireJS lädt beim Öffnen einer Seite nur die „benötigten“ Skripte – statt einfach aller –, was den Seitenaufbau deutlich verkürzt.
Anstatt also an jeder Stelle das entsprechend benötigte Skript einzeln einzubauen und die nötigen Bibliotheken zuzuordnen oder gar alles überall einzubinden, wird im Code per RequireJS auf die benötigten Module verwiesen, was die Arbeit erleichtert und den Code verschlankt.
Das Magento 2 Frontend verbessert die Performance
Durch den modularen Aufbau kommt Magento 2 mit wesentlich weniger Core-Überschreibungen und CSS-Deklarationen aus und man kann nun einfacher als zuvor, nur die konkret benötigten Bausteine in die CSS-Datei aufnehmen. Dadurch bleibt diese schlank und ist schneller geladen.
Die konsequente Umsetzung des Mobile First Prinzips in Magento kommt der Performance auf mobilen Geräten zugute:
Der Aufbau sieht vor, dass zuerst die styles-m.css, also das Stylesheet für das mobile Layout geladen wird. Nur falls es sich nicht um ein mobiles Endgerät handelt, werden die zusätzlichen Styles aus der styles-l.css (l = large) geladen.
Um diese Performance-Potenziale auszuschöpfen, muss sich das Entwickler-Team zuvor aber intensiv mit der komplexeren Frontend-Architektur auseinandersetzen.
Mobile First und responsive freut auch Google.
Nutzen: Magento 2 fördert und fordert Professionalität
Zwangsläufig wird sich hier die Spreu vom Weizen trennen: Das Magento 2 Frontend ist in seinem Aufbau und seinen Möglichkeiten komplexer als in Magento 1. Muss man von den Standard-Themes abweichen, lassen sich ausgezeichnete Ergebnisse nicht mehr mit ein bisschen Bastelei und gutem Willen erzielen.
- Magento 2 fordert von Frontendentwicklern spätestens beim Customizing eine sehr strukturierte Arbeitsweise und ein umfangreiches Know-how, um den Aufwand für ein durchgängig nutzerzentriertes Design in einem attraktiven Rahmen zu halten. Das kann nur mit einer klaren Trennung zwischen Backend- und Frontendentwicklung gelingen. Mit Tools wie dem Task Runner Grunt wird diese Arbeit aber auch wieder erleichtert.
- Dafür erhält man ein System, mit dem Anpassungen am Frontend äußerst präzise, konfliktfrei und damit schnell umgesetzt werden können, das kurze Ladezeiten verspricht und sich einfach upgraden lässt.
Möchten Sie mehr über Magento wissen? Unser kostenloser Ratgeber „Magento – Das Business Kompendium“ bietet auf rund 80 Seiten alle wichtigen Informationen zum Thema Magento – so werden auch Sie zum Magento-Experten.
