Einblick in die Shopware 6 Plugin-Entwicklung

To the English article

Inwiefern ist ein Shop-System erweiterbar? Das ist eine der fundamentalen Fragen bei der Auswahl eines Systems. Jedes System behauptet, die beste und einfachste Erweiterbarkeit zu besitzen. In diesem Blog-Artikel gebe ich Dir einen kleinen Einblick in die Welt der Plugin-Entwicklung von Shopware 6 und präsentiere Dir außerdem, welche Gedanken und Konzepte unserem Plugin-System zugrunde liegen.

Gute etablierte Standards

Unsere Intention in Bezug auf das Plugin-System von Shopware 6 war es, die vielseitige Erweiterbarkeit von Shopware 5 auch in Shopware 6 anbieten zu können, aber auch Verbesserungen am Plugin-System als solches durchzuführen. Von Anfang an war uns die Developer Experience sehr wichtig. Wir geben Dir als Entwickler in Shopware 6 Tools und Werkzeuge an die Hand, mit denen Du in wenigen Schritten eine eigene Erweiterung erstellen kannst.

Uns ist bewusst, dass Shopware nur eines von vielen Systemen ist, welches an Deine Bedürfnisse angepasst werden muss. Daher war es ein weiteres Ziel für Shopware 6 und das Plugin-System, die Lernkurve so flach wie möglich zu halten. Deshalb setzen wir auf gut etablierte Standards. So kann ein Entwickler, der beispielsweise bereits Vorkenntnisse mit Vue.js oder Symfony gesammelt hat, ohne viel Spezialwissen direkt mit der Entwicklung seiner eigenen Erweiterung beginnen. Folgende Standards haben wir im Einsatz:

Symfony
Administration

• Vue.js, Vue Router, vue-i18n & VueX
• SCSS als CSS-Preprozessor

Storefront

• Bootstrap samt jQuery
• EcmaScript 6 Vanilla Javascript
• SCSS als CSS-Preprozessor
• Automatisierte Tests und Qualitätssicherung
• PHPUnit
• PhpStan
• Cypress sowie Jest
• ESlint

All diese Technologien werden weltweit von tausenden Entwicklern erfolgreich eingesetzt und sind sehr gut dokumentiert. Ob in den offiziellen Dokumentationen, auf Stack Overflow oder in zahlreichen Tutorials und Blog-Artikeln: Entwickler stellen eine unglaubliche Menge an informativen Ressourcen bereit. Das wiederum hilft dabei, Probleme oder Fragen zu klären und vereinfacht so die Entwicklung.

Symfony Konsole

Des Weiteren stellen wir verschiedene Konsolen-Kommandos bereit, die für Dich vieles einfacher machen und Deine Produktivität steigern. Egal, ob Du Plugins oder Themes erstellen oder den Cache leeren möchtest – die hilfreichen Kommandos erleichtern Deine Arbeitsprozesse.

Als Beispiel möchte ich Dir zeigen, wie Du ein neues Theme generierst:

$ bin/console theme:create MyNewTheme

Die benötigten Dateien sowie die gesamte Ordner-Struktur werden automatisch für Dich angelegt, sodass Du direkt mit der Entwicklung eines neuen Themes starten kann.

Nachdem Du das Theme aktiviert hast (was übrigens auch über ein Konsolen-Kommando möglich ist), binden wir Dein neues Theme automatisch in unsere Pipeline ein, sodass deinerseits keine weiteren Änderungen nötig sind. Einmal das Theme neu kompilieren – und Deine Styles sind sichtbar. 

Developer Experience

Erfahrungen, die Entwickler bei der Entwicklung eines Themes oder Plugins machen, sind wichtig. Je einfacher und komfortabler sich die Entwicklung in die bestehenden Workflows einbetten lässt, umso produktiver können Entwickler sein. Deshalb hört die Developer Experience nicht bei Konsolen-Kommandos auf.

Ob Storefront oder Administration – wir stellen einen sogenannten "Hot Module Replacement" Modus zur Verfügung. Nachdem Du Deine Änderungen in der Entwicklungs-Umgebung gespeichert hast, werden die Änderungen automatisch erkannt und direkt im Browser reflektiert (egal, ob JavaScript oder SCSS). Du brauchst weder die gesamte Applikation neu bauen, noch den Browser neu laden. Dadurch erhöht sich die Entwicklungsgeschwindigkeit spürbar.

Administration

Die Administration ist der Ort, an dem sich der Shopbetreiber zum Großteil des Tages aufhält. Entsprechend wichtig ist es daher, dass ein konsistentes Design und Verhalten durch die gesamte Applikation gegeben ist. Um dies sicherzustellen, haben wir eine eigene Komponenten-Bibliothek mit insgesamt über 230 Komponenten aufgebaut, die für jeden Anwendungsfall eine passende Komponente mitliefert. Des Weiteren steht ein globales State Management und ein Dependency Management zur Verfügung. Dadurch gestaltet sich das Handling der Applikation sowie die Verwendung verschiedenster Services wesentlich einfacher.

Um dem Entwickler auch in der Administration die Arbeit zu vereinfachen, generiert diese automatisiert Daten-Modelle auf Basis der definierten Entitäten im System. Eine doppelte Pflege der Entitäten, wie Du sie vielleicht von anderen Systemen kennst, ist nicht mehr notwendig. Ebenso effizient ist der Changeset Generator: Es werden nur die Daten zum Server geschickt, die der Benutzer auch geändert hat – so konnten wir die Datenmenge wesentlich verkleinern und die Performance des Systems steigern.

Fazit

Wir haben einiges dafür getan, um Dir mit Shopware 6 ein Plugin-System anbieten zu können, welches nicht nur mächtig ist und es ermöglicht, Deine Ideen und Geschäftspraktiken umzusetzen, sondern noch dazu einfach zu bedienen ist und Entwicklern viel Komfort bei der Entwicklung bietet.

Gerne möchte ich Dich einladen, mit mir weiter in das Plugin-System einzusteigen. Auf dem diesjährigen digitalen SCD haben Sebastian Seggewiß und ich einen 30-minütigen Vortrag zum Thema gehalten, in dem wir das Plugin-System nochmals genauer betrachten und Dir weiterführende Informationen an die Hand geben.

Du möchtest direkt tiefer in das Thema Plugin-Entwicklung einsteigen? Dann kann ich Dir unsere Developer Dokumentation ans Herz legen. Hier findest Du Guides und Tutorials, die erklären, wie Du die verschiedensten Bereiche von Shopware an die entsprechenden Bedürfnisse anpassen kannst. Zudem geben sie Dir einen wesentlich tieferen Einblick in das gesamte System.