Ein Styleguide, der auf Atomic Design basiert, enthält Atome, Moleküle und Organismen

Styleguide und Atomic Design: Frontend kann Spaß machen

Ein dynamischer Styleguide ist dazu da, nicht die Theorie, sondern die aktuelle Praxis auszudrücken, was die Optik einer Webseite betrifft. Welche Farben, Schriften, Buttons, Formularfelder, weitere Elemente werden gerade auf unseren Seiten verwendet?  Das ist ein noch recht bescheidener Wunsch.

Was wäre ein deutlich kühnerer Wunsch eines Testers oder Produktmanagers oder vielleicht sogar eines Frontend-Entwicklers? Vielleicht der hier:

„Ich möchte in beliebigen Formaten dieses Formular in allen möglichen Zuständen gleichzeitig sehen (leer, gefüllt, mit Fehlern, alles korrekt) und mit einem zusätzlichen Klick auch noch in Rechts-Nach-Links-Modus für unseren arabischen Kunden.“

Klingt gewagt, ist aber möglich.

Wiederverwendbarkeit

Dazu kommt der Aspekt der Wiederverwendbarkeit und der Modularisierung: Zu nennen ist hier der  „Atomic Design„-Ansatz, der von Design-„Atomen“ (wie z.B. den verwendeten Farben) über „Moleküle“ (z.B. einem Formularfeld mit Label) zu „Organismen“ übergeht, die man sonst vielleicht Widgets oder Komponenten nennen würde. Aus diesen Widgets wiederum sind die Seiten aufgebaut.

Es sind genau diese Ebenen, die Patternlab abbildet und die helfen, samt dazugehöriger Varianten von darzustellenden Daten, Code wiederverwendbar machen.

Über den Styleguide hinaus

Je nach Ehrgeiz könnte man sogar versucht sein, selbst dynamisches Verhalten sehen zu wollen. Wenn ich im falsch ausgefüllten Formular „Submit“ drücke, dann soll Ereignis X ausgelöst werden und im anderen Fall Ereignis Y… auch unsere automatischen Tests sollen über all diese Fälle drübergehen und Alarm schlagen, sobald ein Verhalten nicht mehr der Erwartung entspricht (z.B. wenn ein Widget plötzlich nach einem Klick drastisch an Höhe gewinnt oder verliert).

Zudem besteht in einer Welt voller Microservices oft der Wunsch, vom „Backend“ unabhängig zu sein. Auch offline und zu Hause ohne Intranet-Verbindung möchte ich an Frontend-Entwürfen arbeiten können, die ich dann später einchecken kann. Auch für Dienstleister ist diese Variante sehr interessant.

Modulumfang

Ich würde mich gerne im Rahmen dieses Moduls mit ihrem Entwicklungsteam auf den Weg machen, diese Ziele umzusetzen. Meine bevorzugte Lösung ist dabei die Freie Software Patternlab in Version 2, das in verschiedenen Programmiersprachen (JavaScript /Node.js, PHP) und Template-Engines(Twig, Mustache) umgesetzt ist.

Erwartbare Ergebnisse

Der kleinste Geschäftswert, der herauskommen könnte, wäre eine separate Installation, auf der sich schnell Frontend-Teile entwickeln, zeigen und testen lassen.

Der maximale aber mit viel größeren Aufwänden zu erreichende Geschäftswert liegt darin, das Tool so mit der Entwicklungsumgebung zu verzahnen, dass es die Vorausschau, das Testen isolierter Komponenten und eine gut dokumentierte Single Source of Truth ergibt.

Kommentar verfassen