Mit Drupal 8 ins neue Jahr starten – Cocomore Workshop im Januar 2016

Das neue Jahr begann für einige unserer Entwickler mit einem Drupal 8 Workshop. Dieser wurde intern vorbereitet und diente in erster Linie dazu, einen groben Überblick über die Neuerungen in Drupal 8 zu erhalten. 

Das neue Drupal 8

Am 19. November 2015 ist Drupal 8 endlich in der ersten Version veröffentlicht worden. Zwei Cocomoris haben schon im vergangenen Jahr das erste Projekt mit Drupal 8 umgesetzt und Drupal quasi auf dem Weg zum ersten Release begleitet. Da sich auch für die ersten Monate dieses Jahres einige Drupal 8 Projekte angekündigt haben oder bereits gestartet sind, erschien es sinnvoll, wenn die bereits gemachten Erfahrungen mit weiteren Entwicklern geteilt werden können. 

Ein Workshop von Deutschland bis nach Spanien

Am Workshop nahmen insgesamt 6 Entwickler teil, darunter 3 Frontendler und 3 Backendler. Da zwei der Teilnehmer in unserem Büro in Sevilla arbeiten, war es nötig, ein technisches Setup vorzubereiten. So konnten die beiden Spanier uns sehen und hören und aktiv an unserer an der Wand angebrachten MindMap teilnehmen. Ein ähnliches Setup bereiteten die beiden in Sevilla vor, damit wir ebenfalls ihre Aufzeichnungen mitverfolgen konnten. 

Was haben wir gemacht?

Um einen Überblick über Begrifflichkeiten und Themen rund um Drupal 8 zu erhalten, fingen wir damit an, eine Art MindMap zu erstellen und alle Schlagworte erstmal zu sammeln. Dabei konnte alles gesagt werden, was man mit Drupal und besonders mit Drupal 8 in Verbindung bringt. Es kamen um die 60 Stichworte zusammen und diese galt es, in eine systematische Ordnung zu bringen. Dabei setzten wir auf die bereits gemachten Erfahrungen vergangener Projekte, sowohl mit Drupal 8 als auch mit Drupal 7. Zu Beginn wurden mehrere Schlüsselkategorien festgelegt, wie beispielsweise Core, local setup oder Theming. Anschließend wurde diskutiert, welche weiteren Begriffe unter diese Kategorien fielen. Besonders interessant waren dabei Begriffe, die unter zwei oder mehr Kategorien eingeordnet werden konnten, wie beispielsweise das Proprocessing. Bei diesem Thema konnten wir uns nicht festlegen, ob es eher zum Core oder zum Theming gehört. Nach weiteren Diskussionen entwickelten wir einen Core-Bereich, der mehrere Begriffe zusammenfasste und unter den weitere Kategorien fallen konnten. Unser Endergebnis könnt ihr auf folgendem Bild erkennen: 

Ich gebe euch nun einen kleinen Einblick in die Frontend-Änderungen in Drupal 8.

Twig und Kint

Mit der Template Sprache Twig fällt die bisher verwendete PHPTemplate Engine weg. Das ist für Frontend-Entwickler ein wichtiger Schritt in die richtige Richtung, da wir durch diese Änderung mehr Kontrolle auf das HTML-Gerüst haben. Wir können viel einfacher unsere eigenen CSS-Klassen definieren, selbst entscheiden, wo und wann ein neuer Div-Container gesetzt wird und sogar auf das umfangreiche Drupal-Standard-Markup verzichten. Twig selbst bringt ein cooles Feature mit: debug. In den Services (sites/default/services.yml) kann der Parameter twig.config durch die Variable debug: true erweitert werden. Dadurch erhalten wir im HTML-Code anhand von Kommentaren genaue Infos, woher die anzeigten Daten kommen. Es wird sowohl der Name des aktuell verwendeten Templates angezeigt, aber auch für den Fall, dass wir dieses Template für genau diese Anzeige überschreiben wollen, macht uns Twig Vorschläge, wie wir die Template-Datei am sinnvollsten benennen können. Wie das genau funktioniert, erfahrt ihr hier.

Über die Twig-Funktion dump() können wir uns ein Array anzeigen lassen, das die Daten, die an das Frontend geliefert werden, enthält. Dieses Array wird vollständig abgebildet und kann bei größeren Projekten oder Inhalten schon mal die Grenze des Verständlichen erreichen. Für alle, denen das zu unübersichtlich ist, empfiehlt sich Kint. Kint ist ein Modul, das das Modul Devel mit sich bringt. Nach dem Aktivieren können über kint() die gleichen Daten wie über dump() abgerufen und dargestellt werden - allerdings in Form von einem Dropdown. So kann man gezielter nach Daten suchen und alle irrelevanten Daten ausblenden.

SMACSS und BEAM

Wie schon erwähnt, haben wir über Twig die Möglichkeit, selbst zu bestimmen, welche CSS-Klassen wir unseren Elementen geben. Damit die Lesbarkeit und Verständlichkeit nicht darunter leidet, sollte man sich an die Standards von SMACSS (das Buch ist übrigens sehr lesenswert, einfach und verständlich geschrieben) und BEM halten. 

Stylesheets und jQuery

Um unsere Drupal 8 Seite nicht wahllos mit Skripten zu überlasten, die durch (Base-)Themes oder Module automatisch geladen werden, bietet es uns die Möglichkeit, Stylesheets in der theme.info.yml zu entfernen. Hier nennen wir unter dem Parameter "stylesheets-remove" einfach sämtliche CSS-Dateien, die wir in unserem Theme nicht brauchen. Zusätzlich dazu, lädt Drupal die große JavaScript-Bibliothek jQuery nicht mehr automatisch. Sollte jQuery dennoch gebraucht werden, so kann es innerhalb von Libraries als Abhängigkeit definiert und geladen werden. 

Base-Themes: Classy und Stable

Drupal 8 bringt uns zwei neue Standard-Themes von Haus aus mit. Classy und Stable sind beides Themes, die von Drupal als Base Theme zur Verfügung gestellt werden. Dabei unterscheiden sie sich vor allem im Markup. Während Classy mit einigen sprechenden CSS-Klassen arbeitet, steht Stable für die magere Vergabe von CSS-Klassen. Stable ist nicht komplett leer, sondern bringt einige wichtige CSS-Klassen wie beispielsweise für die Drupal Toolbar mit. Es wird standardmäßig als Base Theme für eigene Themes verwendet sofern dem in der theme.info.yml nicht gegengesteuert wird und der Parameter base theme: false nicht gesetzt wird. 

All diese Punkte sind die Voraussetzungen für eine angenehme Entwicklungsumgebung und werden uns in den nächsten Jahren bei Drupal 8 Projekten begleiten.