Eine Komponente ist ein in sich geschlossener Baustein einer Benutzeroberfläche, der Aufbau, Gestaltung und Verhalten zusammenfasst. Ein Button, eine Produktkarte oder ein ganzes Formular kann eine Komponente sein, und aus vielen davon setzt sich die Seite zusammen.
- Komponente
Ein wiederverwendbarer Baustein einer Benutzeroberfläche, der Markup, Gestaltung und Verhalten bündelt.
Beispiel: „Die Komponente für die Teamkarte nutzen wir auf der Über-uns-Seite und in jedem Blogartikel.“Auch: Component, der englische Begriff, der in Code und Dokumentation überwiegt.
Verwandt: Web Components, der Browserstandard für Komponenten, der ohne Framework auskommt.
Was eine Komponente ausmacht
Eine klare Schnittstelle nach außen. Über Eigenschaften, oft Props genannt, bekommt sie ihre Daten, etwa Titel, Bild und Preis einer Produktkarte. Was innen passiert, geht den Rest der Seite nichts an.
Dadurch lässt sich eine Komponente an vielen Stellen einsetzen und an einer Stelle ändern. Wer die Produktkarte überarbeitet, ändert sie überall auf einmal.
Komponenten in Frameworks und CMS
Fast alle aktuellen Frontend-Frameworks bauen auf Komponenten auf, von React über Vue.js bis Svelte. Auch auf dem Server ist das Prinzip verbreitet. Auf dieser Website stecken die Formulare in Blade-Komponenten von Laravel, und jeder Abschnitt einer Seite ist ein Baustein aus dem Page Builder von Statamic.
In der Gestaltung entspricht das dem Design System: Jede Komponente im Code hat ihr Gegenstück in der Designdatei.
Wie fein eine Komponente geschnitten sein sollte
So fein, dass sie eine Aufgabe hat, und so grob, dass sie für sich Sinn ergibt. Ein Button ist eine gute Komponente, ein einzelnes Symbol darin meist nicht. Ein ganzer Seitenabschnitt kann eine sein, wenn er an mehreren Stellen in gleicher Form vorkommt.
Zu feine Schnitte machen den Code unübersichtlich, zu grobe verhindern die Wiederverwendung. Die richtige Größe zeigt sich oft erst, wenn derselbe Baustein zum dritten Mal gebraucht wird.