Von der Idee zur Komponente: Wie ein Frontend-Feature entsteht

„Wir bräuchten nur eine Suche mit Filtern.” Von außen klingt so ein Wunsch nach einer Stunde Arbeit. Dazwischen liegen aber ein paar bewusste Schritte, die darüber entscheiden, ob das Feature nur in der Demo funktioniert oder im echten Alltag trägt. Hier der Weg, wie bei mir aus einer Anforderung eine fertige Komponente wird, am Beispiel genau so einer Produktsuche.

1. Verstehen, bevor ich baue

Die erste Arbeit ist nicht Code, sondern Zuhören. Was soll die Suche wirklich leisten? Wie viele Produkte, wie viele Filter, was passiert bei keinem Treffer? Wird sie eher am Handy oder am Desktop benutzt? Oft steckt hinter „eine Suche” eine wichtigere Frage, zum Beispiel: Wie finden Kunden schneller, was sie kaufen wollen? Diese Frage bestimmt das Ergebnis, nicht die Technik.

2. Die Komponente: klein und klar

Statt einer großen Suche, die alles auf einmal kann, baue ich kleine, klar abgegrenzte Teile: das Eingabefeld, die Filter-Chips, die Ergebnisliste, den leeren Zustand. Jedes Teil hat genau eine Aufgabe und einen sprechenden Namen. Dafür arbeite ich mit Vue und TypeScript: TypeScript fängt viele Fehler schon beim Schreiben ab, lange bevor ein Nutzer sie zu sehen bekommt. Kleine Teile lassen sich zudem später wiederverwenden und einzeln prüfen.

3. Testen, was zählt

Sobald die Logik steht, sichere ich sie mit automatisierten Tests ab, vor allem die unbequemen Fälle: Was passiert bei null Treffern, bei sehr vielen, bei mehreren gleichzeitig aktiven Filtern? Diese Tests sind das Sicherheitsnetz für später (mehr dazu in Mein Code, meine Verantwortung). Sie kosten am Anfang etwas Zeit und sparen sie bei jeder späteren Änderung um ein Vielfaches.

4. Live gehen, aber kontrolliert

Am Ende wird gebaut, geprüft und veröffentlicht, in kleinen nachvollziehbaren Schritten statt in einem großen Wurf. Ich schaue mir das Feature auf echten Geräten an, nicht nur im Entwickler-Browser, und behalte nach dem Start im Blick, ob es sich so verhält wie gedacht. Fällt etwas auf, wird nachgebessert, bevor es zum Problem wird.

Von außen sieht man am Ende nur: „Die Suche funktioniert.” Die eigentliche Arbeit steckt darin, dass sie auch in einem Jahr und mit zehnmal so vielen Produkten noch funktioniert.

Wenn Sie ein Frontend-Feature im Kopf haben und überlegen, wie es sauber umgesetzt wird, schreiben Sie mir gerne.