Magento 2: Das neue Shop-Frontend

Die neue Version der Shop-Software Magento hat es im wahrsten Sinne in sich. Es sind weniger die Features, als vielmehr neue Technologien, umfangreiche Test, moderne Entwurfsmuster und ein modularer Aufbau, die Magento 2 zu etwas Besonderem machen und von Entwicklern eine veränderte Arbeitsweise verlangen. Das betrifft auch das Frontend.

%CAD2%

Die neue Verzeichnisstruktur

Was beim Einstieg in Magento 2 sofort ins Auge fällt, 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 Theme-Ordner und sind nach Magento-Modulen untergliedert. Dies verlangt anfangs eine gewisse Umgewöhnung, ist letztlich aber durchaus eine Arbeitserleichterung. Man hat alles an einem Ort, was insbesondere die Arbeit in komplexen Shop-Frontends, mit einer Vielzahl von unterschiedlichen Layout-Elementen, übersichtlicher und damit schneller macht.

Quelle: netz98

Die neuen Themes

Magento 2 bringt gleich zwei Themes mit. Ein Blank-Theme, das bereits responsive ist und sich durchaus als Grundlage für ein weiteres Customizing eignet. Und das LUMA-Theme. Luma ist sozusagen ein integriertes Best-Practice und zeigt, wie sich auf Basis des Blank-Themes ein Custom-Theme umsetzen lässt. Bei der Entwicklung eigener Themes lohnt sich daher der Blick in den Aufbau von Luma. Zusammen mit mit dem Theme 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

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 Blank-Theme bildet auf deren Grundlage den Standardshop mit allen grundlegenden Styles. Darauf aufbauend, lassen sich beliebig viele 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 gliedert 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 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 auch bei umfassenden Anpassungen upgradefähig.

Modularität

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 lassen sich 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.

Performancesteigerung durch neues Frontend

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 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.

Magento 2 Entwicklung: Fördern und Fordern

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.

Autor: Maria Kern, Senior Frontend Entwickler bei netz98