Adaptive Forms Core Components

Seit der AEM Version 6.5.16 ist mit den Adaptive Forms Core Components ein alternativer Komponentenbaukasten für die Adaptiven Formulare in AEM Forms verfügbar. Dieser Baukasten ist in den vergangenen Service Packs für AEM Forms Stück für Stück erweitert worden, so dass sich ein genauerer Blick auf diese Adaptive Forms Core Components lohnt. Mit diesem Artikel möchten wir genauere Einblicke in die Core Components geben. 

Wer sich aktuell in den Dokumentationen von Adaptive Forms bei Adobe umschaut, wird häufiger den folgenden Hinweis antreffen:

Blickt man auf die einzelnen Komponenten, sieht man einige Unterschiede. Der nachfolgende Überblick zeigt einen Vergleich über alle Komponenten. Der Vergleich wurde auf Basis von AEM Forms 6.5.20 erstellt. Diese Übersicht gilt weitestgehend auch für die entsprechende Version in AEM as a Cloud Service (2024.1.0). Allerdings kann sich diese im Detail unterscheiden.

Hier wollen wir die Versprechen von Adobe etwas genauer unter die Lupe nehmen:

"Headless"-fähig:

Sobald man seine Formulare auf den Forms Core Components aufbaut, können diese auch über die sogenannte Headless Forms API in Drittanwendungen nativ integriert werden. Dies ist mit den vorhandenen Foundation Components nur schwer möglich, da es keine dedizierte API gibt. Einen detaillierteren Einblick in AEM Forms Headless wird es in einen zukünftigen Blog Beitrag geben. Alternativ kann man auch jetzt schon den Vortrag in Videoform zu diesem Thema von unserem eggs unimedia AEM Forms Forum 2023 anschauen. 

Verfügbarkeit auf GitHub und umfassende Dokumentation:

Analog zu den normalen Sites Core Components gibt es für die Forms Core Components nun auch ein Projekt / Repository auf GitHub. Nicht nur der Code ist nun öffentlich einsehbar, auch die dort enthaltene technische Dokumentation ist um einiges umfangreicher als bei den Foundation Components. Das erleichtert und beschleunigt sowohl die Entwicklung als auch Erweiterung der Core Components. Bekannte Probleme werden nun über GitHub dokumentiert, Probleme lassen sich einfacher reporten und unter Umständen sogar selber korrigieren. Ohne Zweifel geht hier Adobe in die richtige Richtung.

BEM-Modell als Basis für Stylesheets (CSS):

Das Block Element Modifier, kurz BEM-Modell, ist ein bewährter Standard und eine häufig genutzte Methode für die Organisation von CSS. Das Styling der Core Components wird damit wesentlich erleichtert. Im Vergleich zu den Foundation Components lässt sich das CSS so einfacher anpassen und ist besser verständlich. Das beschleunigt und vereinfacht die Erstellung eigener Themes für die Formulare erheblich.

Keine Abhängigkeit von Bibliotheken von Drittanbietern:

Mit den Core Components verzichtet Adobe auf die Einbindung von JQuery, JQuery-UI und Underscore. Das erleichtert nicht nur die Integration der Formulare in bestehende Anwendungen, sondern reduziert auch die Javascript Last erheblich. Darüber freut sich auch der Page Speed Index. Ganz schmalspurig ist die sogenannte Forms Core Components Runtime Bibliothek dann allerdings auch nicht. Mit knapp unter 100 kB ist man allerdings weit weg von den bisherigen knapp 300 kB Javascript für die Foundation Components. Auch hier kann man Adobe einen Fortschritt attestieren.

Fokus auf Leistung und Barrierefreiheit:

Adobe verspricht hier bei den Forms Core Components hohe Lighthouse Scores, Einhaltung der Core Web Vitals sowie die Einhaltung Barrierefreiheit Standards und Richtlinien. Das sind alles Dinge, die man von einem modernen Komponentensatz erwarten kann oder auch erwarten muss. Inwiefern hier eine erhebliche Verbesserung im Vergleich zu den Foundation Components vorliegt, müsste man allerdings in einer detaillierteren Analyse feststellen. Denn auch die Foundation Components verfügen über Barrierefreiheit-Funktionen.

Bei der Performance lohnt sich allerdings ein genauer Blick auf die Core Components. Diese kommen deutlich leichtgewichtiger daher und haben daher gute Voraussetzungen, um auch mit größeren Datenmodellen oder Formularen umzugehen.

Versionierung:

Analog zu den Core Components in AEM Sites sind nun auch die Core Components in Forms versioniert. Das bedeutet, dass bei "Breaking Changes" die Komponenten stets mit einer neuen Version versehen werden. So ist sichergestellt, dass die eigenen Styles und Erweiterungen weiterhin funktionieren, ohne dass eine Aktualisierung der eigenen Komponenten notwendig ist. Dadurch lassen sich insbesondere AEM Upgrades viel einfacher durchführen, da man davon ausgehen kann, dass die eigenen Erweiterungen an den Core Components auch mit einer neueren AEM-Version funktionieren. 

Neben den oben genannten Verbesserungen hat Adobe mit Einführung der Forms Core Components auch am Authoring Interface Veränderungen vorgenommen. Das Authoring von Formularen mit Core Components ist nun identisch mit dem Authoring von Komponenten in AEM Sites. Dadurch ergeben sich im wesentlich folgende Unterschiede: