Atome gegen Spaghetti-Code

Wie wir mit Atomic Design unseren Workflow optimieren

Tech // Lilli Ahner-Wetzel // Jun 22, 2017

TAL Atomic Design Content Final 2x

Die Frontend-Entwicklung war lange Zeit das Kuckuckskind der Internetgemeinde. Weder Mutter Design noch Vater Entwicklung wussten so recht, wie am besten mit diesem Spross zu verfahren sei, der seine ganze eigene Sprache und Regeln brauchte. Hauptstreitpunkt in der Erziehung: Bestimmt die Technik das Design oder das Design die Technik? Die Lösung des Problems liegt, wie so oft, in einem Wechsel der Perspektive: Brad Frost hat sich darauf spezialisiert, im Spannungsfeld zwischen Design und Backend-Entwicklung zu vermitteln. Der Webdesigner aus Pittsburgh ist Mitbegründer der Software Patternlab und ideologischer Vater des Atomic Design, mit dem Frost eine neue Art der Web-Entwicklung in der Multi-Device Landschaft des Web 2.0 etablieren möchte.

Die Lösung des Problems liegt, wie so oft, in einem Wechsel der Perspektive: Brad Frost hat sich darauf spezialisiert, im Spannungsfeld zwischen Design und Backend-Entwicklung zu vermitteln. Der Webdesigner aus Pittsburgh ist Mitbegründer der Software Patternlab und ideologischer Vater des Atomic Design, mit dem Frost eine neue Art der Web-Entwicklung in der Multi-Device Landschaft des Web 2.0 etablieren möchte.

Der Kern der Methode Atomic Design besteht darin, ein Webprodukt nicht als Ansammlung einzelner Seiten, sondern als Design-System zu verstehen. Hierzu empfiehlt Frost, jedes Interface in seine kleinsten Bestandteile aufzuspalten. Bei dieser Formulierung schwingen nicht zufällig Assoziationen aus der Chemie mit. Genau hierher nimmt Frost die Analogie seiner Methode.

Die kleinste Einheit, die Atome, sind schlichte HTML Tags, wie beispielsweise ein Eingabefeld oder ein Button, eine Schriftgröße oder eine Farbe. Sie sind jeweils an nur einer Stelle veränderbar und können dadurch vielfältig miteinander kombiniert werden. Die Verbindung mehrerer Atome bildet ein Molekül. Die Verbindung aus unserem Button-Atom und dem Eingabefeld-Atom ergibt so zum Beispiel ein simples Formular. Durch die Kombination diverser Moleküle entsteht ein Organismus, der über ein wesentlich komplexeres Interface verfügt. Eine Ebene höher stehen die Templates, die mit konkreten Inhalten gefüllt und so zu vollständige Seiten transformiert werden können.

Das Atomic Design bildet die Grundlage, auf der alle Beteiligten die Sprache und die Regeln unseres metaphorischen Kuckuckskinds, der Frontend-Entwicklung, verstehen können. Dies beginnt schon in der Konzeptphase und zieht sich über Design, Frontend- und Backend-Entwicklung durch den gesamten Prozess. Der Ansatz ermöglicht so einerseits strukturelle Vorteile, die den Workflow erleichtern können: Begrifflichkeiten werden abteilungsübergreifend vereinheitlicht, bereits designte Komponenten können wiederverwendet werden und paralleles Arbeiten wird enorm erleichtert. Andererseits werden die Gesamtwirkung und die Pflegbarkeit des Produkts verbessert. Die Wiederverwertbarkeit der Atome, Moleküle und Co ermöglicht es, einen einheitlichen Stil selbst dann einzuhalten, wenn ein Projekt mal über diverse Schreibtische wandert. So werden ein einheitliches Aussehen sowie eine konsistente Code-Basis geschaffen, die von Designänderungen, personellen Übergaben und parallelem Arbeiten unberührt bleiben. Das alles wirkt sich maßgeblich auf die Effizienz eines Projekts aus!

Grundvoraussetzungen sind eine sorgfältige Dokumentation und Sortierung der einzelnen Design-Atome sowie zeitgemäße Tools wie Sketch, Zeplin und Invision, die es im Gegensatz zum Bildbearbeitungs-Tool Photoshop unterstützen, Webseiten unabhängig vom Ausspielmedium zu planen und umzusetzen.

Bei Tallence nutzen wir das Tool Patternlab zur Pflege einer Pattern-Library. Diese räumt uns im statischen Frontend viele Vorteile ein:

  • Schnelle Orientierung: Die übersichtliche Pattern Library ermöglicht neuen Kollegen, unverzüglich in ein Projekt einzusteigen. Bestehende Teammitglieder können beendete Projekte leicht rekapitulieren. Stakeholder, Redakteure und Entwickler erhalten einen schnellen Überblick über Bestehendes.
  • Keine Code-Dubletten: In der Pattern Library kommt jede Komponente nur einmal vor. Gleiche Komponenten mit nur geringfügig anderer Ausprägung werden gelöscht, um zusätzlichen Code zu vermeiden.
  • Weniger Einarbeitung: DasHTML kann modular behandelt werden, ohne dass sich Frontend-Entwickler mit Backend-Template-Technologien (JSP, Freemarker etc.) für etwaige CMS auseinandersetzen müssen.
  • Mehr Konsistenz: Durch das Wiederverwenden derselben Module wird der Styleguide mühelos eingehalten, auch dann, wenn mehrere Entwickler übergreifend am Projekt arbeiten. Abweichungen vom Konzept können auch in späteren Phasen schnell festgestellt und behoben werden.
  • Einfache Skalierbarkeit: Das System lässt sich strukturiert um neue „Atome“ erweitern. Komponenten können nachträglich in der Pattern-Library erstellt, gewartet und getestet werden.

Bei Tallence ist Atomic Design unerlässlich geworden. Im Teamwork gibt es uns die beruhigende Sicherheit, schnell und effizient zu arbeiten, indem neue Teammitglieder gedanklich schneller ins Projekt einsteigen können, Komponenten nicht unnötig mehrfach erstellt werden und das Arbeiten im Frontend alles in allem ungemein vereinfacht wird. Zwar bedeutet die Erstellung und Planung einzelner Atome anfangs einen größeren Zeitaufwand. Das Baukastenprinzip ermöglicht es jedoch, die Atome im Prozess schnell und einfach zusammenzusetzen, wodurch die Zeit um ein Vielfaches reingeholt wird.

Für uns ist Atomic Design daher die konstruktivste Methode, Spaghetti-Code und Code-Dubletten zu vermeiden.