Drupal SDC vs. Storybook: Was ist der Unterschied?

Das eine hilft Ihnen bei der Einrichtung Ihrer UI-Komponenten, und das andere ermöglicht Ihnen die Arbeit mit ihnen. Wir beschäftigen uns mit Single Directory Components (SDC) und Storybook für Drupal. Beide sind aktuelle Themen für Drupal-Entwickler. Drupal SDC hat seit seiner Einführung als experimentelles Modul in Drupal 10.1 Aufmerksamkeit erregt, während das Storybook Drupal-Modul die Zusammenarbeit von Entwicklern und Theme-Erstellern verändert.

Die komponentenbasierte Webentwicklung ist heute die bevorzugte Methode zur Erstellung moderner Drupal-Projekte. Die Aufteilung Ihrer UI in Komponenten hat viele Vorteile, wie z. B.:

• Modulare Entwicklung

• Verbesserte automatisierte Tests

• Einfachere Wartung

• Wiederverwendbarer Code

• Verbesserte Zusammenarbeit

In diesem Blog werden wir uns die Unterschiede zwischen Drupal SDC und Storybook für Drupal ansehen und Tipps geben, wann man welches verwenden sollte.

Bevor wir fortfahren: Wenn Sie von Ihrem aktuellen Content-Management-System zu Drupal migrieren möchten, dann informieren Sie sich jetzt über die Migrationsservices von OpenSense Labs!

Migrieren Sie noch heute zu Drupal! 

Los geht's!

Drupal SDC: Was ist das?

Single Directory Components (SDC) bieten eine neue Möglichkeit, mit Theming in Drupal 10 umzugehen. Alle Dateien, die zum Erstellen einer Webkomponente benötigt werden, wie z. B. ein Button, ein Karussell oder ein Menü, werden in einem Verzeichnis mit Drupal SDC zusammengefasst. Dazu gehören:

• YAML-Metadaten

• Twig-Vorlagen

• CSS-Stylesheets

• JavaScript-Dateien

Sie können auch optionale Dateien wie Screenshots, PHP-Dateien oder Medien-Assets hinzufügen.

Drupal SDC vereinfacht das Theming von Drupal, indem es HTML, CSS und JavaScript in einem flexiblen und wiederverwendbaren Format zusammenführt. Es zielt darauf ab, die Effizienz beim Auffinden und Verwenden aller Ressourcen für ein Element zu verbessern und Front-End-Entwickler bei der Navigation durch die Verwirrung verstreuter Vorlagen und Dateien zu unterstützen.

Siehe auch: 

1. Drupal SDC: Vorteile von Single Directory Components 

2. SDC: Integration von Storybook & Single Directory Component 

3. Starshot: Drupals neue CMS-Initiative 

4. DrupalCon Singapur: Ein Rückblick auf 2024 

Drupal Storybook: Was ist das?

Storybook für Drupal ist ein Open-Source-Tool, das Ihnen hilft, UI-Komponenten separat zu erstellen, zu testen und zu dokumentieren. Es ermöglicht Entwicklern:

• Alle Komponenten an einem Ort zu sehen

• Ihre Funktionalität getrennt von der Hauptcodebasis zu testen

• Komponenten zu dokumentieren, um Designern, Entwicklern und QA-Teams die Zusammenarbeit zu erleichtern

Drupal Storybook verbessert die Einheitlichkeit zwischen Komponenten und bietet Funktionen wie Dekorateure, die Komponenten in relevante Auszeichnungen einschließen. Beispielsweise benötigt eine Rasterkomponente möglicherweise zusätzliche Informationen, um korrekt angezeigt zu werden, und Storybook für Drupal hilft bei der Bereitstellung dieser Informationen.

Erstellung einer Komponentenbibliothek mit Storybook

Drupal SDC vs. Storybook: Der Unterschied

Der Unterschied zwischen Drupal SDC und Drupal Storybook liegt in ihren Funktionen:

• Drupal SDC: Konzentriert sich auf die Organisation und Entwicklung wiederverwendbarer UI-Komponenten in Drupal.

• Drupal Storybook: Ermöglicht es Entwicklern, mit diesen Komponenten zu interagieren, sie zu testen und zu dokumentieren.

OpenSense Labs gehört zu den nur 100 Organisationen weltweit, die von der Drupal Association als Partner anerkannt wurden. Informieren Sie sich über unsere Dienstleistungen, wenn Sie Ihre Drupal 7-Website auf Drupal 10 aktualisieren möchten.

Migrieren Sie jetzt zu Drupal 10! 

Drupal SDC: Wann sollte man es verwenden?

Verwenden Sie Drupal SDC, wenn Sie:

1. Dateiorganisation vereinfachen: Legen Sie alle zugehörigen Dateien (Twig, YAML, CSS, JS) in einem Ordner ab.

2. Bibliothekserstellung automatisieren: CSS- und JS-Dateien automatisch laden, wenn eine Vorlage verwendet wird.

3. Wiederverwendbare Komponenten erstellen: Stellen Sie sicher, dass Ihr Projekt modular ist und einfach wiederverwendet werden kann.

4. Konsistenz wahren: Sorgen Sie dafür, dass Ihre UI-Elemente ein einheitliches Erscheinungsbild und einen einheitlichen Stil haben.

5. Skalierbarkeit verbessern: Fügen Sie bei Bedarf einfach Komponenten hinzu oder entfernen Sie sie.

6. Zusammenarbeit erleichtern: Teilen und retten Sie Komponenten zwischen verschiedenen Teams und Projekten.

7. Fehlerbehebung optimieren: Testen Sie Komponenten separat, um Probleme schnell zu finden.

Siehe auch: 

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

2. Drupal Recipe Module: Was ist das und wie funktioniert es? 

3. RFP: Wie erstellt man eine RFP für Open-Source-Lösungen? 

4. Drupal 7 End Of Life: Top-Gründe für eine Migration zu Drupal 10 

Drupal Storybook: Wann sollte man es verwenden?

Das Storybook Drupal-Modul verbessert die Twig-Vorlagenerstellung, indem es zwei neue Twig-Tags hinzufügt – stories und story – wodurch Benutzer Storybook-Stories direkt in Drupal erstellen können. Verwenden Sie Storybook für Drupal, um:

1. Komponenten zu dokumentieren und zu präsentieren: Erstellen Sie eine umfassende Bibliothek von Benutzeroberflächenkomponenten.

2. Front-End-Prototyping zu unterstützen: Entwickeln und verbessern Sie Komponenten außerhalb der Hauptcodebasis.

3. Neue Teammitglieder zu schulen: Bieten Sie einen visuellen, praktischen Leitfaden für Ihre Komponentenbibliothek.

4. An neuen Funktionen zusammenzuarbeiten: Optimieren Sie Diskussionen über Design und Funktionalität.

5. Content-Editoren zu unterstützen: Stellen Sie eine Bibliothek mit Designoptionen für die Erstellung von Landingpages bereit.

Erstellung modularer UIs mit Twig und Storybook

Wichtigste Erkenntnisse

1. Drupal SDC vereinfacht das Theming in Drupal, indem es alle komponentenbezogenen Dateien in einem Verzeichnis zusammenfasst.

2. Drupal Storybook bietet ein zentralisiertes, interaktives Tool zum Entwickeln, Testen und Dokumentieren von UI-Komponenten.

3. Während Drupal SDC Ihnen hilft, Ihre UI-Komponenten zu organisieren, ermöglicht Ihnen Storybook für Drupal, mit ihnen zu interagieren.

4. Beide Tools arbeiten Hand in Hand, um moderne Webentwicklungsprozesse zu verbessern.