Mit Drupal 8 ist es relativ einfach geworden sogenannte Decoupled-Applications zu erstellen. Eine Reihe beeindruckender Demo-Implementierungen und Starterkits sind entstanden wie z.B. 'Reservoir' und 'Contenta', es hat sich eine rege Diskussion rund um das Thema entwickelt und eine 'API-First' Initiative wurde gegründet.
Drupal 8 bietet bereits out-of-the-box REST-Schnittstellen für die wichtigsten Datentypen an, es existierend aber auch höherwertige Implementierungen wie z.B. JsonAPI und GraphQL.
Die meisten existierenden Decoupled-Applikations wurden für das Auspielen von Daten auf unterschiedlichen Kanälen entwickelt, darunter auch Apps basierend auf React, Angular u.v.m. Das Editieren der Daten findet aber meistens im Drupal-Backend statt.
In einem aktuellen Projekt haben wir eine Decoupled-Applikation mit Drupal 8 als Backend erstellt, in dem die Daten direkt im Frontend per In-Place-Editing bearbeitet werden können.
Bearbeitungsfunktionen in einem Decoupled-Applikation zur Verfügung zu stellen, bringt eine Reihe von Anforderungen mit sich.
Zum einen müssen alle notwendigen Daten bereitgestellt werden (z.B. die möglichen Werte in einem Auswahldialog), zum anderen müssen diese Daten strukturiert zur Verfügung gestellt werden, damit sie auf eine einheitliche Art und Weise bearbeitet werden können.
Weiterhin ist es schwierig beim Bearbeiten komplexer Datentypen (z.B. Slideshows oder Tabs) eine gute User-Experience zu erzielen.
Zuletzt sind User gewöhnt in Apps Komfortfunktionen wie unlimitiertes Rückgängigmachen, Drag-n-Drop und context-sensitives Editieren zur Verfügung zu haben.
In unserem Projekt haben wir einen strukturiertes Vorgehen erschaffen, um Daten per JsonAPI zu laden, wodurch es uns gelingt alle Entities gleich zu behandel (z.B. Content-Entities und Menu-Entities). Für alle Entities haben wir schematische Beschreibungen, die wir benutzen, um die Editierungsdialoge zu erzeugen. Mit diesen beiden Mechanismen konnten wir In-Place-Editing für eine große Zahl von unterschiedlichen Entities erstellen.
Die wichtigsten verwendeten Technologien neben Drupal 8 sind React und Redux / Saga.
In der Session werden wir das UI des Projektes präsentieren und die wichtigsten technischen Konzepte beleuchten.
