Drupal SDC: Vorteile von Single Directory Components

Was wäre, wenn eine einzige Lösung Website-UI-Komponenten organisieren, ihre Wiederverwendung in verschiedenen Projekten erleichtern, Konsistenz über Webseiten hinweg gewährleisten und noch vieles mehr leisten könnte?

Mit Drupal SDC (Single Directory Components), einer Schlüsselfunktion in Drupal 10.1 und Drupal 11, ist dies nun möglich. Sechs Monate nach der Veröffentlichung von Drupal 10 hat es Aufmerksamkeit erregt und Diskussionen darüber ausgelöst, wie es die Frontend-Entwicklung revolutionieren kann.  

Die neuesten Versionen des Drupal 10 Cores enthalten das experimentelle Modul Drupal SDC (Single Directory Components). Dieses Modul zielt darauf ab, die Drupal-Frontend-Entwicklung mit komponentenbasiertem Design in Einklang zu bringen – ein in den letzten Jahren beliebter Ansatz (wie React, Vue, Web Components usw.), der in früheren Versionen des Drupal Cores schwierig umzusetzen war. 

Doch bevor wir tiefer eintauchen: Planen Sie, auf Drupal 10 umzusteigen?  

Entdecken Sie unsere umfassenden Services, um die Migration mühelos und effizient zu gestalten. 

Auf Drupal migrieren

Los geht's! 

Was ist Drupal SDC (Single Directory Component)? 

Drupal Single Directory Components bietet eine neue Methode für das Theming in D10 und D11. Es sammelt alle für eine Webkomponente benötigten Dateien, wie Twig, YAML, CSS oder JS, in einem Verzeichnis. Dieses Verzeichnis wird automatisch erkannt, und Drupal SDC generiert eine Bibliothek mit allen Dateien, die geladen wird, wenn die Komponente aktiviert wird. Diese Funktionalität ist als experimentelles Modul namens Drupal Single Directory Components Teil des Drupal 10.1 Cores. 

Drupal SDC ermöglicht Themes und Modulen, Komponenten in ihren eigenen Ordnern innerhalb des Projekts zu erstellen.

Drupal SDC bietet eine vollständige API für die Erstellung und Verbesserung von Komponenten und bildet eine solide Basis für die Erweiterung um weitere Funktionen. 

Drupal SDC ist ein eigenständiges Modul, doch der langfristige Plan ist es, seine Funktionen in das Haupt-Theming-System des Drupal Cores zu integrieren, sobald es stabil ist. 

Hier sind die wichtigsten Punkte zu Drupal SDC (Single Directory Components): 

1. Einfachere Wartung: Die Zusammenführung aller Komponentendateien vereinfacht Updates und Debugging.  

2. Konsistenz: Fördert eine einheitliche und übersichtliche Struktur für Komponenten im gesamten Projekt.  

3. Erhöhte Wiederverwendbarkeit: Erleichtert die Wiederverwendung von Komponenten in verschiedenen Projekten oder Abschnitten.  

4. Bessere Organisation: Eine klare Verzeichnisstruktur ermöglicht es Entwickler:innen, benötigte Dateien schnell zu finden und zu verwalten, was die Produktivität steigert und Fehler minimiert.  

Diese Punkte unterstreichen die organisierte Methode, die Drupal SDC für die Entwicklung bietet. 

Lesen Sie auch: 

1. SDC: Integration von Storybook & Single Directory Component 

2. Drupal 11 Upgrade: Checkliste für die Migration von Drupal 7 auf 11   

3. Drupal Recipe Modul: Was es ist & wie es funktioniert? 

4. Drupal 11: Elf Änderungen & Updates in Drupal 11 

Welche Probleme löst Drupal SDC für Frontend-Entwickler:innen? 

Für Frontend-Entwickler:innen kann die Arbeit mit einer Codebasis eine Herausforderung sein.

Frontend-Entwickler:innen stehen oft vor der Herausforderung, den Überblick in der Codebasis zu verlieren. Das Wechseln zwischen verschiedenen Twig-Templates kann verwirrend sein, was es schwierig macht, sich zu merken, wo man beim Codieren aufgehört hat. 

Das Erfassen der Daten ist für Frontend-Entwickler:innen wichtig, doch es kann schwierig sein, die Variablen in Templates zu finden. Wenn Änderungen vorgenommen werden müssen, kann es knifflig sein, herauszufinden, welche Variablen angepasst werden müssen. Das Auffinden des Templates selbst ist ein weiteres Problem, da es sich in einem Modul, dem Haupt-Theme oder in vielen Ordnern versteckt sein kann. 

Das Modul Drupal Single Directory Components bietet eine hilfreiche Lösung für diese Herausforderungen. Es vereinfacht die Organisation von Dateien, Templates und Assets, wodurch die Frontend-Entwicklung einfacher und strukturierter wird. Dieses Modul hilft Entwickler:innen, die Codebasis zu navigieren, Variablen zu identifizieren und Templates leichter zu finden, was zu einem besseren und effizienteren Entwicklungsprozess führt. 

Was sind die Ziele von Drupal SDC? 

Das Hauptziel ist es, den Frontend-Entwicklungsprozess zu vereinfachen und die Handhabung von benutzerdefinierten, Core- und Contrib-Themes zu verbessern. Kurz gesagt: Es soll Drupal-Frontend-Entwickler:innen die Arbeit erleichtern und Neulingen den Einstieg in Drupal erleichtern. Dies ist von großer Bedeutung, da es die tägliche Arbeit von Frontend-Entwickler:innen erheblich verbessern wird. Hier sind einige Ziele von Drupal Single Directory Components: 

1. Das Ziel ist es, wiederverwendbare UI-Komponenten zu erstellen. Ähnlich wie Twig-Templates importiert, eingebettet oder erweitert werden können, sollte Ihr Ziel mit Drupal SDC darin bestehen, Komponenten zu entwickeln, die in anderen Komponenten wiederverwendet werden können. 

2. Ein weiteres Ziel ist es, zu vermeiden, alles zu ersetzen oder neu zu machen. Sie sollten Teile verwenden, die gut passen, insbesondere zum Theme Ihrer Website. 

Auf Drupal migrieren

Vorteile der Verwendung von Drupal Single Directory Component 

Drupal Single Directory Components (SDC) ist die Art und Weise, wie der Drupal Core Komponenten handhabt. In Drupal SDC werden alle zur Anzeige einer Komponente benötigten Dateien in einem Verzeichnis gruppiert, was der Grund für ihren Namen ist. Hier sind einige der Vorteile von Drupal SDC: 

1. Verbesserung der Arbeitsweise einer Organisation 

Drupal SDCs verbessern die Organisation, indem sie alle Dateien für eine Komponente in einem Verzeichnis sammeln und so eine klare Struktur für die Codeverwaltung schaffen. Dies vereinfacht die Handhabung und Aktualisierung von Komponenten.  

Zusätzlich wird durch das komponentengerechte Laden von CSS- und JS-Dateien die Gesamtgröße der Seiten-Assets reduziert, was die Seitenleistung steigert. Diese Methode verhindert das Laden von unnötigem CSS und JS auf der Seite. 

2. Einfaches Auffinden und Entfernen  

Beim Refactoring von CSS machen sich viele Sorgen, Stile zu entfernen, die noch in Gebrauch sind. Doch beim komponentenbasierten Styling ist jeder Stil mit einer bestimmten Komponente verknüpft. Dieser Ansatz erleichtert das Refactoring und Löschen von CSS ohne Bedenken, da es nur diese eine Komponente betrifft. 

3. Modularität und Wiederverwendbarkeit  

Drupal SDC fördert Modularität und Wiederverwendbarkeit, indem der gesamte Komponenten-Code und die Assets in einem Verzeichnis aufbewahrt werden. Diese Struktur ermöglicht die einfache Wiederverwendung von Komponenten in verschiedenen Projekten oder sogar innerhalb desselben Projekts, was Zeit und Aufwand in der Entwicklung spart. 

Benutzer:innen können den folgenden Code verwenden, um eine Komponente wiederzuverwenden: 
{ % include (my_theme : my-component) % } 

Benutzer:innen können HTML, CSS und JS für eine bestimmte Komponente erstellen, indem sie die Komponenten-ID hinzufügen. Wenn sie die Komponente einbinden oder erweitern möchten, wird automatisch eine Bibliothek generiert. Das bedeutet, dass Benutzer:innen die Bibliothek nicht manuell verknüpfen müssen. 

4. Wartung 

Die Wartung ist mit Drupal SDC einfach, da alle Komponentendateien an einem Ort gespeichert sind. Dies vereinfacht das Aktualisieren oder Ändern von Komponenten, ohne viele Ordner oder Dateien durchsuchen zu müssen. 

Drupal SDC erstellt außerdem eine Bibliothek, die die benötigten CSS- und JavaScript-Dateien lädt, sobald das zugehörige Template verwendet wird. Dieser automatische Prozess stellt sicher, dass die notwendigen Assets einfach eingebunden werden, wodurch der manuelle Einrichtungsaufwand minimiert und die Frontend-Entwicklung vereinfacht wird. 

5. Sauberer Code 

Drupal SDC verbessert die Lesbarkeit des Codes, indem es die Abhängigkeiten und Verbindungen zwischen verschiedenen Komponentendateien klar aufzeigt. Dies ermöglicht Entwickler:innen, Abhängigkeiten besser zu verstehen und zu handhaben. 

6. Standardisierung  

Drupal SDC trägt zur Vereinheitlichung der Komponentenentwicklung bei, indem es eine feste Struktur bietet. Dies führt zu saubererem und einfacher zu verwaltendem Code im gesamten Projekt oder der Organisation. 

Durch die Verwendung von Drupal SDCs profitieren Drupal-Entwickler:innen von einem strukturierteren, modulareren und effektiveren Frontend-Entwicklungsprozess. Mit besserer Asset-Verwaltung, einfacherer Wartung und verbesserter Teamarbeit ermöglicht Drupal SDC Entwickler:innen, exzellente Weberlebnisse reibungslos und selbstbewusst zu erstellen. 

Lesen Sie auch: 

1. Drupal's Omnichannel-Fähigkeiten: Verbesserung von Kundenbindung und -erlebnis 

2. Was tun mit Ihrer Drupal 7 Website? 

3. Digitale Disruption: Revolutionierung der Enterprise Experience 

4. 7 Wege, um konstant exzellenten Kundenservice zu bieten 

Wie arbeitet man mit Drupal SDC? 

Sie benötigen Drupal Version 10.1 oder neuer. Bevor Sie mit der Erstellung einer neuen Komponente beginnen, sind einige Vorbereitungsschritte erforderlich. Hier sind sie: 

Zur Erstellung von Drupal SDC: 

• Wenn Sie Drupal 9 verwenden, nutzen Sie diesen Befehl zur Installation des Moduls: composer requires 'drupal/sdc:^1.0'. 

• Für Drupal 10 und neuere Core-Versionen von Drupal 11 ist das Drupal Single Directory Component (SDC) Modul Teil des Cores. 

• Aktivieren Sie das Drupal Single Directory Components Modul. 

• Deaktivieren Sie die CSS- und JS-Aggregation in der Drupal-Admin-Oberfläche für Entwicklungszwecke. 

• Aktivieren Sie den Twig-Entwicklungsmodus und deaktivieren Sie das Caching. 

1. Schritte zur Erstellung einer Komponente: 

• Erstellen Sie einen Ordner namens components/ im Hauptverzeichnis Ihres Themes oder Moduls. 

• Erstellen Sie einen neuen Ordner innerhalb des components/-Ordners und benennen Sie ihn nach Ihrer neuen Komponente (z.B. my-component). 

• Erstellen Sie im Komponentenordner eine Twig-Datei und eine YAML-Datei (diese Dateien sind notwendig). Sie können bei Bedarf auch CSS- und JS-Dateien hinzufügen. 

• Um weitere Stile, Skripte und Abhängigkeiten hinzuzufügen, verwenden Sie den libraryOverrides-Schlüssel in Ihrer YAML-Datei. 

Eine Single Directory Component wird häufig als „Komponentenverzeichnis“ bezeichnet, da sie alle wichtigen Informationen an einem Ort sammelt. Dazu gehören Informationen über die Komponente, ihr Design, ihr Layout und ihre Anzeige. 

Im obigen Screenshot sehen wir ein Verzeichnis für eine Komponente namens „hero“. Es enthält eine .css-Datei für das Styling, eine hero.component.yml-Datei mit Details zur Hero-Komponente und ein Twig-Template. 

Der größte Vorteil von Drupal SDC ist, wie einfach es ist, Dinge zu finden und zu löschen, da alles in einem Ordner liegt. Außerdem sind die Twig-Datei und der Rendering-Prozess so konzipiert, dass sie die Vorverarbeitungs- und Hook-Systeme von Drupal umgehen, sodass diese Teile vor externen Einflüssen geschützt bleiben. 

METADATEN 

Die .component.yml-Datei ist essenziell. Ohne sie weiß Drupal nicht, dass Ihre Komponente existiert. Sie müssen diese Datei im Verzeichnis der Komponente erstellen. 

Schauen wir uns an, was eine .component.yml-Datei ist. 

SCHLÜSSEL	BEDEUTUNG
name	Titel des Teils.
description	Eine detaillierte Beschreibung der Komponente.
schema props	Sind die Eigenschaften wie E-Mail, Bild, Titel usw.
schema slots	Ein Bereich zum Speichern von Daten, die kein spezifisches Format oder keine Struktur haben.
libraryOverrides	Zum Einbinden zusätzlicher JS- oder CSS-Bibliotheken, die über die im Komponentenverzeichnis gefundenen hinausgehen.

Erfahren Sie mehr über Schema-Props und Schema-Slots: 

Im Drupal Single Directory Component (SDC) Framework können Sie Daten auf zwei Arten an eine Komponente senden: „Props“ und „Slots“. Diese Konzepte stammen aus JavaScript-Frameworks wie Vue und React, die sich auf die Übergabe von Daten an eine Komponente konzentrieren. 

• Props: Sie folgen einem spezifischen Format, um Daten an die Komponente zu senden, wobei JavaScript Object Notation (JSON) mit Schlüssel-Wert-Paaren verwendet wird. Drupal SDC Beispiel für Props: 

• Slots: Slots werden verwendet, um unstrukturierte Daten zu verwalten, einschließlich Fällen wie verschachtelten Komponenten, Twig-Blöcken oder HTML-Markup. Im Gegensatz zu Props benötigen Slots kein JSON-Schema mit Schlüssel-Wert-Paaren und sind nicht durch JSON-Datentypen begrenzt. Drupal SDC Beispiel für Slots: 

2. Schritte zur Anzeige einer Komponente: 

Um eine Komponente in einem *.html.twig-Template hinzuzufügen, verwenden Sie die Twig-Funktionen embed oder include. 

• Verwenden Sie include(): 

Verwenden Sie die Twig-Funktion include(), wenn keine Slots oder zufällige HTML-Eigenschaften vorhanden sind und die Daten eine klare Struktur aufweisen. 

Hier ist ein Drupal SDC Beispiel für die Verwendung der Komponente sdc_custom:hero in einem Twig-Template. 

Sie müssen die Komponenten-ID ([Modul-/Theme-Name]:[Komponente]) für die Komponente angeben. 

• Verwenden Sie {% embed %}: 

Verwenden Sie ein Twig {% embed %}-Tag, um Slots nach Bedarf zu füllen. 

Das Ergebnis einer Komponente nach Abschluss der oben aufgeführten Schritte wird wie folgt aussehen: 

 

3. Schritte zur Änderung einer Komponente: 

Nur Themes können Komponenten ändern, und dafür gibt es zwei wichtige Voraussetzungen: 

1. Platzieren Sie einen replace-Schlüssel am Anfang der .component.yml-Datei, die Sie ändern möchten. 

2. Die Komponente muss ein klares Schema haben. Module können Komponenten nicht ersetzen, und nur Komponenten mit einem definierten Schema können miteinander ausgetauscht werden.
   

Die Single Directory Component von Drupal 10 und 11 wirkt wie ein Superheld für den Code Ihrer Website und hilft dabei, ihn organisiert und einfach zu verwalten. Obwohl für die Implementierung von Drupal SDC ein gewisser Aufwand erforderlich ist, machen die Vorteile eines sauberen und strukturierten Codes es zu einem großen Gewinn für Drupal-Entwickler:innen. 

 

Wichtige Erkenntnisse 

1. Drupal Single Directory Components führt einen frischen Ansatz für das Theming in D10 und D11 ein. 

2. SDC erleichtert Frontend-Entwickler:innen das Auffinden von Variablen in Templates.  

3. Das Hauptziel ist es, den Frontend-Entwicklungsprozess zu vereinfachen und die Verwaltung von benutzerdefinierten, Core- und Contrib-Themes zu verbessern. 

4. In Drupal SDC werden alle zur Anzeige einer Komponente benötigten Dateien in einem Ordner gesammelt, daher der Name. 

5. Man muss Drupal Version 10.1 oder höher haben, um eine neue Komponente zu erstellen.