Single Directory Components (SDC)

Single Directory Components (SDC) ist das moderne Komponenten-System, das seit Drupal 10.1 direkt im Core verfügbar ist. SDC revolutioniert die Frontend-Entwicklung in Drupal, indem es eine saubere Trennung von Markup, Logik und Styling ermöglicht. Jede Komponente ist ein eigenständiges Verzeichnis mit einer Twig-Vorlage, einer YAML-Definition und optionalen CSS/JS-Dateien. Dies ermöglicht wiederverwendbare, wartbare und testbare UI-Komponenten nach modernen Web-Standards.

Für Drupal-Entwicklung bedeutet SDC einen Paradigmenwechsel: Statt monolithischer Templates arbeiten Entwickler mit atomaren Komponenten, die isoliert entwickelt und getestet werden können. Die YAML-Definition (*.component.yml) spezifiziert Props, Slots und Varianten, ähnlich wie React- oder Vue-Komponenten. SDC-Komponenten können in Twig-Templates eingebunden werden, sind aber auch über das UI in Layout Builder, Views oder Blöcken nutzbar. Die automatische Validierung von Props zur Laufzeit verhindert typische Template-Fehler.

Mit über 20 Jahren Erfahrung in Drupal-Entwicklung sehe ich SDC als einen der wichtigsten Fortschritte für die Frontend-Architektur. In modernen Drupal-Projekten nutze ich SDC für Design-Systeme mit konsistenten UI-Patterns, für die Integration mit Storybook zur Komponenten-Dokumentation, für responsive Card-Komponenten mit Varianten, für komplexe Navigation-Patterns und für wiederverwendbare Form-Elemente. Die Kombination von SDC mit Tailwind CSS und TypeScript ermöglicht eine moderne, typsichere Frontend-Entwicklung.

Die Vorteile von SDC sind erheblich: Komponenten sind in sich geschlossen und wiederverwendbar, die Props-Validierung verhindert Template-Fehlen, die Integration mit modernen Tools wie Storybook ist nahtlos, und die Performance wird durch automatisches CSS/JS-Scoping verbessert. SDC ist ideal für Design-Systeme und Pattern Libraries, moderne Theme-Entwicklung mit Komponenten-Architektur, Headless/Decoupled Drupal mit wiederverwendbaren Komponenten, Migration von Legacy-Templates zu modernen Patterns und Integration mit Frontend-Frameworks. Als Core-Feature ist SDC zukunftssicher und wird aktiv weiterentwickelt für Drupal 10, 11 und darüber hinaus.

---