Implementierung von Pattern Libraries mit Drupal

Konsistenz ist ein Schlüsselelement für zwei Dinge: Erfolg und Webentwicklung. Beide gehen Hand in Hand, wenn man an der Entwicklung einer Website arbeitet, sei es von Grund auf oder durch die Überarbeitung einer bestehenden. Was diese Konsistenz unterstützt, ist die Fähigkeit, ein Muster zu erkennen, das sich im Prozess oft wiederholt und dann befolgt wird, um ein gemeinsames Ergebnis zu erzielen.

Die Gewährleistung einer konsistenten und einfach zu wartenden Website ist eines der größten Kopfzerbrechen für große Organisationen. Genau hier kann der Vorschlag, eine Pattern Library als Lösung zu erstellen, ins Spiel kommen.

Aber was sind Pattern Libraries? Und wie können sie eingesetzt werden? Finden wir es heraus! 

Pattern Libraries helfen bei der Verwendung einfacher Elemente und Stile in einem Projekt, um die visuelle Sprache einer Website zu dokumentieren, die Konsistenz zu fördern, die Benutzerkontrolle zu gewährleisten und die kognitive Belastung zu reduzieren.

Was ist eine Pattern Library?

Die Hauptattraktion einer Pattern Library ist, dass der zeitaufwändige Prozess des Erstellens neuer Funktionen und Seiten auf ein Minimum reduziert wird.

Die Bedeutung von Pattern Libraries erlangte im Technologiebereich Aufmerksamkeit, als Entwickler begannen, die Vorteile von vorgefertigten Komponenten für Projekte zu verstehen. In dieser Zeit, in der schnelle und einfache Lösungen gefragt sind, besteht die Hauptattraktion einer Pattern Library darin, dass der zeitaufwändige Prozess des Erstellens neuer Funktionen und Seiten auf ein Minimum reduziert wird. Das Hauptziel ist also, dazu beizutragen, konsistente Websites zu erstellen, die einfach zu warten sind und einen festen Bestandteil des Design- und Entwicklungsprozesses darstellen. Eine Pattern Library funktioniert, indem sie alle "Patterns" (auch bekannt als Module) dokumentiert, um zu definieren, wie sie aussehen, wie sie sich verhalten und wie sie codiert sind.

Styleguides, Pattern Libraries, Designsysteme

Styleguides, Pattern Libraries und Designsysteme mögen für Designer und Entwickler eine ähnliche Bedeutung haben, aber sie existieren als individuelle Einheiten. Außerdem können Styleguides und Pattern Libraries (auch bekannt als Component Libraries) zusammen existieren, um vollständige und kohärente Designsysteme für ein Produkt zu bilden. Lassen Sie uns den Unterschied zwischen ihnen im Detail untersuchen. 

Ein Styleguide umfasst typischerweise die Branding-Richtlinien eines Unternehmens, einschließlich Komponenten wie die Verwendung des Logos, festgelegte Farbpaletten und redaktioneller Ton. Er ist eine Sammlung von vordefinierten Elementen, die befolgt werden müssen, um Konsistenz und ein kohäsives Erlebnis am Ende zu gewährleisten. Er wird oft vom Unternehmen als Ganzes als Ergebnis verpackt, um mit Anbietern in Partnerschaften zusammenzuarbeiten. Sie können das Aussehen und die Haptik einer Pattern Library direkt beeinflussen, wobei der grundlegende Unterschied darin besteht, dass Styleguides ohne Daten Bestand haben können, während Pattern Libraries auf einige Daten angewiesen sind, um zu funktionieren.

Auf der anderen Seite beschränkt eine Pattern Library oft statische UI-Elemente und dient als Speicher für Ihre Komponenten wie Artikel, Header, Galerien, Dropdown-Menüs, Akkordeons und sogar gängige Webseiten-Layouts wie Raster. Obwohl sich Styleguides nicht immer um den Kontext und die Beziehungen zu Daten kümmern, hängen UI-Elemente und ihre Anwendung in der gesamten User Experience stark vom Kontext und dem Zusammenspiel mit Inhalten ab. Pattern Libraries konzentrieren sich also auf das Interface Design und würden keine Regeln enthalten, die global für Print oder andere Medien gelten.

Dies bringt uns zu dem Designsystem, das die Punkte zwischen einem Styleguide und einer Pattern Library verbindet, um die Prinzipien zu definieren, die sich auf die Art und Weise beziehen, wie Komponenten zusammenwirken sollen. Es definiert, wie ein Layout funktionieren soll, ist eine Form der Produktdokumentation, die alles enthält, was zur Erzielung des Ergebnisses beiträgt.
 
Eine Pattern Library wird oft von einem Styleguide beeinflusst und enthält in der Regel HTML-Snippets oder eine lebendige Dokumentation für Website-Komponenten, die gut dokumentiert und responsiv sind. Pattern Libraries können beispielsweise Folgendes enthalten:

• Buttons
• Bilder
• Hero 
• Elemente
• Sliders
• Galerien
• Navigation
• Artikel

Warum brauchen Sie eine Pattern Library?

Wir haben erkannt, dass Pattern Libraries die Produktivität steigern, aber wie und auf welche Weise machen sie dies auf der Basisebene möglich? Im Folgenden sind die dreifachen Vorteile von Pattern Libraries aufgeführt:

Konsistenz

Die Entwicklung großer Websites erfolgt über einen längeren Zeitraum durch eine Gruppe von Entwicklern, die daran arbeiten, und muss regelmäßig überarbeitet werden. Dies führt zu einer fragmentierten Benutzeroberfläche, es sei denn, es ist alles vorhanden, um die Konsistenz zu gewährleisten.

Von der Navigationsverschiebung bis hin zu Formularelementen hat alles ein anderes Format und eine andere Herangehensweise. Eine Pattern Library bietet eine einfache Möglichkeit, bestehendes Design und Funktionalität auf jeder Seite der Website für eine stabile Benutzeroberfläche in einem festen Rahmen zu duplizieren.

Wiederverwendbarkeit

Wenn mehrere Webteams an mehreren Websites verschiedener Abteilungen in einem Unternehmen arbeiten, kann es passieren, dass sie die gleichen Stile zu erheblichen Kosten neu erfinden.

In solchen Fällen kann eine zentrale Pattern Library zur Wiederverwendung von Funktionalität und Design formuliert werden. Ein Pattern für eine bestimmte Anforderung im Verantwortungsbereich kann dann mit der gesamten Gruppe geteilt werden und steht auch für zukünftige Projekte zur Verfügung.

Dies führt dazu, dass eine neue Website oder ein neuer Unterabschnitt nur noch eine Frage der Kombination dieser Patterns ist, ähnlich wie man etwas aus Legosteinen baut.

Einfache Wartung

Eine konsistente Pattern Library, aus der sich jeder bedient, erleichtert die Wartungsarbeiten, da die Aufgabe mühelos wird, wenn man alle Teile an einem Ort sieht. 

Wenn die Elemente von Anfang an auf die gleiche Weise codiert wurden, ist es für einen Entwickler viel einfacher, an dem Code eines anderen zu arbeiten. Auch für einen neuen Entwickler kann sich die Arbeitseffizienz beschleunigen, indem er sich die vorhandene Pattern Library ansieht und die Website hauptsächlich darauf aufbaut.

Für wen ist sie gedacht?

Endbenutzer:

Aus der Sicht des Benutzers bieten Websites und Produkte, die vertraut und konsistent sind, eine reibungslose Erfahrung und reduzieren die kognitive Belastung des Benutzers.

Entwicklungsteam:

Damit sich Teams auf das große Ganze konzentrieren können, ohne sich um das Verschieben von Pixeln kümmern zu müssen, helfen Pattern Libraries dabei, Produkte schneller auszuliefern, um eine höhere Effizienz in internen Prozessen zu gewährleisten und es Ingenieuren zu ermöglichen, bestehende Codes wiederzuverwenden.

Organisation:

Pattern Libraries bieten Langlebigkeit für große Websites, die von verschiedenen Personen über einen längeren Zeitraum entwickelt und regelmäßig überarbeitet werden, und erweisen sich als produktivitätssteigernd für die gesamte Organisation.

Eine der beliebtesten Pattern Libraries, ein statischer Site-Generator namens Pattern Lab, basiert auf Brad Frosts Atomic Design-Konzept. Es gibt viele andere zur Auswahl, aber dieser Blog konzentriert sich auf Pattern Lab als dynamisches Prototyping- und Organisationstool.

Pattern Lab steht auf GitHub zum Download bereit und kann als Teil Ihrer bestehenden oder neuen Projekte verwendet werden.

Pattern Lab + Drupal 8 = Emulsify

Emulsify ist ein komponentenorientiertes Prototyping-Tool, das das Atomic-Design-Prinzip und moderne Frontend-Praktiken verwendet, um einen lebendigen Styleguide zu entwickeln. Es kann einfach in jedes CMS implementiert werden, um Twig-Dateien zu rendern, da es die Methodik anwendet, bei der die kleinsten Komponenten Atome sind, die zu Molekülen, Organismen, Vorlagen und schließlich Seiten zusammengefügt werden.

Mit der Verlagerung der Templating in Drupal 8 zu Twig steht nun eine ganze Reihe neuer Tools für das Theming zur Verfügung.

Emulsify ermöglicht es Ihnen, Komponenten so zusammenzustellen und zu verwalten, dass Ihr Workflow durch die Integration von Pattern Lab verbessert wird. Das Emulsify-basierte Projekt arbeitet mit benutzerdefinierten Vorlagennamen, die spezifisch für das Projekt, die Entwickler und die Kunden sind. Dies trennt kategorieweise Patterns (Module) und erhöht die Effizienz des Prozesses.

Emulsify ermöglicht es Ihnen, Komponenten so zusammenzustellen und zu verwalten, dass Ihr Workflow durch die Integration von Pattern Lab verbessert wird.

Wenn die Vorlagen für die Produktion bereit sind, verbindet Emulsify sie auf unkomplizierte Weise als Twig-Funktion (include, extends oder embed) mit Drupal und verbindet die Drupal-Vorlagen mit den Komponentendateien.

Emulsify schwört auf einen "Living Style Guide"-Ansatz, bei dem die Styleguide-Komponenten die gleichen sind, die auf der Live-Site verwendet werden. Man muss sich keine Sorgen machen, dass die Komponenten veralten oder ungewöhnlicher aussehen als der Styleguide.

Außerdem werden die mit Emulsify erstellten Komponenten in jedem Projekt verwendet, mit oder ohne Drupal. Einfacher ausgedrückt: Es kann mit jedem CMS verwendet werden, das Inhalte mit Twig rendert, einschließlich WordPress. Dies bietet die Möglichkeit, mit jedem Frontend-Experten in einem Entwicklungsteam zusammenzuarbeiten, da diese nur mit vertrauten Technologien arbeiten. Wenn Ihr Projekt jedoch kein Twig verwendet, kann Emulsify dennoch von Designern und Frontend-Entwicklern verwendet werden, um einen Styleguide zu erstellen, der dann von Backend-Entwicklern weitergeführt wird.

Zusammenfassend

Obwohl der Aufbau einer Pattern Library viel Arbeit erfordert, erleichtert sie, sobald sie eingerichtet ist, den Prozess für alle zukünftigen Projekte. Sie können jederzeit kleine Schritte unternehmen und klein anfangen, mit nur einer einfachen Übersicht über die wichtigsten Patterns und Module, ohne detaillierte Dokumentation. Später können Sie die Pattern Library im Laufe der Zeit immer wieder schrittweise überarbeiten und aktualisieren, indem Sie Funktionen entsprechend den Bedürfnissen des Teams hinzufügen.

Das Ziel, eine ausgereifte Pattern Library zu erstellen, die alle Probleme auf einmal löst, könnte die Zeit eines jahrelangen Projekts in Anspruch nehmen, ohne dass sofortige, greifbare Vorteile daraus gezogen werden können. 

Wir von OpenSense Labs bieten die besten Drupal-Dienstleistungen an, um Ihre Entwicklung in Bezug auf Industriestandards zu verbessern. Schreiben Sie uns eine E-Mail an [email protected], um sich zu vernetzen und mehr zu erfahren.