Stencil und der Adobe Experience Manager: eine starke Symbiose für die neue Webseite des BVB

In meiner beruflichen Laufbahn bin ich schon vielen Content Management Systemen begegnet, wie dem klassischen Wordpress, Typo3 oder Storyblok. Alle Systeme haben ihre Stärken, aber auch ihre Schwächen. Der Adobe Experience Manager, kurz AEM, ist da keine Ausnahme. Doch diesen Schwächen kann man mit dem Framework Stencil entgegenwirken. Doch wie funktioniert das genau?

Welche Schwächen hat AEM?

AEM ist seit vielen Jahren ein fester Bestandteil der Adobe-Produktpalette und spielt als Enterprise CMS eine zentrale Rolle. Seit seiner Einführung als Software-as-a-Service (SaaS)-Produkt in der Adobe Cloud im Jahr 2020 hat sich viel getan, insbesondere in Bezug auf Bereitstellung, Wartung und Skalierbarkeit. Diese Fortschritte haben die Flexibilität und Leistung von AEM erheblich verbessert, insbesondere im Vergleich zu früheren On-Premise-Versionen.

Trotz dieser bedeutenden Neuerungen bleibt jedoch ein nicht unerheblicher Teil der alten technischen Codebasis bestehen. Einige dieser Altlasten sind tief in älteren Implementierungen des Systems verwurzelt, die vor der großen Migration in die Cloud entstanden sind. Ein Blick auf die Codebasis, die im Github Repository der AEM Core Components zu finden ist, offenbart genau diese Diskrepanz zwischen neuem und altem Code. Während die cloud-native Architektur und die neue modulare Systemarchitektur zu den modernen Best Practices zählen, findet sich in den Core Components Code, der teilweise seit Jahren nicht grundlegend modernisiert wurde.

Die AEM Core Components, die die grundlegenden Bausteine für die Webentwicklung mit AEM bereitstellen, umfassen zentrale Funktionalitäten wie Textfelder, Bildergalerien und Karussells, die die Grundlage für die Erstellung von Webseiten bilden. Diese Komponenten sind vorgefertigte, wiederverwendbare Bausteine, die es Entwicklerinnen, Entwicklern sowie Redakteurinnen und Redakteuren gleichermaßen ermöglichen sollen, Webinhalte schnell umzusetzen.

Betrachtet man jedoch die Codebasis dieser Komponenten genauer, so stößt man auf technische Ansätze, die an frühere JavaScript-Standards angelehnt sind. Beispielsweise werden Variablen immer noch mit „var“ deklariert, obwohl seit ES6 (2015) die modernen Alternativen „let“ und „const“ zur Verfügung stehen. Die Verwendung von Prototypen für Vererbung oder callback-basierte asynchrone Programmierung sind weitere Hinweise darauf, dass der Code in einer älteren Ära verhaftet ist. Dies ist zwar nicht grundsätzlich falsch, wirkt aber im Vergleich zu heutigen Standards veraltet. Es fehlen modernere Ansätze wie Promises oder async/await, die heute als Best Practice für asynchrone Prozesse gelten. Diese älteren Ansätze führen in der Praxis oft zu einer höheren Fehleranfälligkeit und erschweren die Wartung und Erweiterung von Anwendungen.

Ein weiteres Problem ist der umfangreiche Überbau von AEM. Es gibt viele Abhängigkeiten, die unseren Spielraum für performanceintensive Anpassungen erheblich einschränken. Dies führt dazu, dass individuelle Anpassungen oft komplexer und zeitaufwendiger sind, was sich auf die Flexibilität und die Performance auswirken kann.

Wie geht man mit diesem Problem um?

Um dieses Problem zu lösen, bietet AEM die Möglichkeit, neue Komponenten zu entwickeln oder bestehende Core Components für eigene Zwecke neu zu implementieren. Dies ist sicherlich der beste Weg, um veraltete Komponenten zu aktualisieren. Allerdings möchte man im Jahr 2024 keine Logik mehr in Vanilla JavaScript entwickeln. Auch hier hat AEM vorgesorgt, indem es die Einbindung moderner JavaScript- und TypeScript-Frameworks zur Gestaltung der Komponenten ermöglicht.

Wichtig ist jedoch, dass die gewählte Lösung sowohl performant als auch einfach bleibt, damit der ohnehin schon große technische Überbau von AEM nicht noch weiter wächst. Aus diesem Grund haben wir uns beim Relaunch der BVB-Website für Stencil entschieden.

Warum genau Stencil.js?

Stencil ist ein Framework für Webkomponenten, die dort mit TypeScript, JSX und CSS implementiert werden. Ein großer Vorteil von Stencil im Vergleich zu anderen Frontend-Frameworks ist, dass es einerseits sehr klein und andererseits sehr performant ist. Das spielt uns in die Karten, denn hier schlagen wir zwei Fliegen mit einer Klappe: Zum einen erhalten wir eine moderne Lösung, die die alte Implementierung von Komponenten ablöst, zum anderen ist die Lösung so schlank und schnell, dass sie im umfangreichen AEM-Kosmos keine zusätzlichen Performanceprobleme verursacht. Hier zeigt sich die Symbiose von AEM und Stencil in voller Blüte.

Fazit

Die Symbiose von Stencil und dem Adobe Experience Manager (AEM) zeigt eindrucksvoll, wie moderne Webentwicklung effizient und zukunftssicher gestaltet werden kann. Während AEM als leistungsstarkes Content Management System viele Vorteile bietet, können seine veralteten Strukturen und der große technische Überbau Herausforderungen darstellen. Stencil schafft hier einen entscheidenden Mehrwert: Durch seine schlanke, performante Architektur wird die Flexibilität und Performance von AEM deutlich gesteigert.

Für den Relaunch der BVB-Website hat sich die Kombination aus AEM und Stencil als ideales Duo erwiesen. Sie ermöglicht es uns, veraltete Komponenten durch moderne, zukunftssichere Alternativen zu ersetzen, ohne die umfangreiche Infrastruktur von AEM negativ zu beeinflussen. Dies zeigt, dass die Kombination zweier Frameworks nicht zwangsläufig zu mehr Problemen führen muss, sondern dass sie sich auch wunderbar ergänzen können.

Ihr möchtet gern mehr über spannende Themen aus der adesso-Welt erfahren? Dann werft auch einen Blick in unsere bisher erschienenen Blog-Beiträge.