Praxistipp: Markup first

Das Entwickeln von Frontends und auch von kleineren Frontend-Modulen ist eine wiederkehrende Aufgabe für jeden Frontendentwickler. Hier müsste man meinen, dass es einen klaren roten Faden bei der Entwicklung gibt, den man verfolgen muss. Jedoch haben jeder Entwickler und jede Firma unterschiedliche Ansätze. Bei kleinen Änderungen geht man oft über „Trial and Error” vor. Das Coden und der Refresh direkt im Browser zeigen auf, was geändert wurde. Bei größeren Änderungen oder Modulen kann es schwierig werden, den Funktionsumfang bis in das letzte Detail im Kopf zu haben. Vor allem bei Dialogen und Formularen kann der Code mehrere hundert Zeilen haben, da das Markup (HTML) und auch die Logik schnell wachsen. Gerade bei Formularen, bei denen verschiedene Buttons von der Validierung der eingegebenen Felder abhängig sein können, entsteht oftmals mehr Code als man erwartet hat und hier kann es hilfreich sein, sich zunächst um das Markup zu kümmern.

Klassisches Vorgehen

Oftmals implementiert man den ersten Teil und fängt direkt mit der Logik an. Dann fällt einem auf, dass man den "Disabled State" noch gar nicht gestyled hat. Und so springt man zwischen dem Stylen und der Logik hin und her. Bei kleineren Modulen funktioniert das gut. Spätestens, wenn man einige Stunden mit dem Hin- und Herspringen verbracht hat, merkt man, dass sich immer mehr Fehler einschleichen oder auch Funktionen vergessen werden.

Markup first

Besser funktioniert dies, wenn zunächst das Markup und Styling des gesamten Formulars mit allen Zuständen fertig implementiert wird.

Durch das Implementieren des Markups am Stück ist der Prozess des Formulars verinnerlicht. Man weiß ganz genau, was als Nächstes kommt. Dies ist extrem hilfreich, da man dieses Feature, welches man eventuell nur aus einer User-Story kennt, direkt versteht.

Dazu implementiert man alle Styles die später benötigt werden: wie z.B. Active, Disabled, sowie benötigte Transitions bei mehrstufigen Formularen. Damit ist schon der größte Teil geschafft.

Die Kür ist jetzt nur noch, das Formular durch unsere Logik zum Leben zu erwecken. Dadurch, dass schon alles „da” ist, geht es sehr schnell und ohne Context-Switch von der Hand. Das Live-Testen funktioniert viel besser, da man nicht noch schauen muss, ob das Styling richtig funktioniert, da dies schon im vorhergehenden Schritt getestet wurde. Dieser Praxistipp ist keine Rocket Science. Vermutlich gibt es viele, die es genauso machen. Aus der Praxis kennen und sehen wir sehr oft das genaue Gegenteil. Und dies ist ein großer Zeitfresser. Es ist nur eine kleine Änderung im Vorgehen, jedoch so effektiv.

Nun nochmal zusammengefasst:

1. Frontend Modul zunächst in Sketch / XD / Figma oder auf Papier visualisieren
2. HTML und Styles für das Modul implementieren und testen
3. Logik implementieren
4. Testen

Wenn man diese Schritte anwendet, ist der Start-Aufwand etwas höher als wenn man direkt startet. Allerdings ist diese Vorarbeit ein echter Booster, was sich zudem sofort in der Qualität der Arbeit widerspiegelt.