Komponentenbasiertes Frontend

Komponentenbasiertes Frontend-Design 2023 – alles Wissenswerte auf einen Blick

Bei der komponentenbasierten Entwicklung handelt es sich um einen *modularen Ansatz, in dem Frontend-Monolithen in kleine, wiederverwendbare Elemente zerlegt werden. Frontend-Entwickler können von einem verschlanken Prozess, einer schnellen und effizienten Entwicklung sowie hoher Skalierbarkeit profitieren.

Was ist komponentenbasierte Entwicklung?

Komponentenbasierte Entwicklung ist vereinfacht ausgedrückt eine Entwicklungsstrategie, die lose gekoppelte Komponenten verwendet, um Anwendungen zu erstellen, die wieder verwendet werden können.

Der Grundgedanke lautet herbei, dass Frontend-Entwickler wiederverwendbare Komponenten verwenden, um bei der Apps Entwicklung so wenig Code wie möglich neu zu schreiben. Somit wird das Web Frontend für die neue Webseite nicht mehr von Grund auf, sondern nach dem Baukastenprinzip zusammengestellt.

Man stelle sich hierzu eine typische Website mit Elementen wie der Kopfzeile, Seitenbereich, Suchleiste, Inhalt, etc. vor. In einer komponentenbasierten Architektur sind alle diese Elemente unabhängig voneinander und werden als Komponenten bezeichnet. Dies ergibt ein modulares System im Frontend, in dem mehrere Teams gleichzeitig an einzelnen Komponenten in derselben Oberfläche arbeiten können.

Was genau sind Komponenten?

Während wir nun eine ungefähre Vorstellung davon haben, was die komponentenbasierte Frontend-Entwicklung vom „Spaghetti-Code“ unterscheidet, ist es sinnvoll, genauer zu definieren, was eigentlich Komponenten umfasst.

Hierbei handelt es sich um nichts Geringeres als die Bausteine innerhalb einer komponentenbasierten Architektur. Diese sind wiederverwendbar und können über verschiedene Schnittstellen und Module hinweg verwendet werden, ohne dass der Code jedes Mal neu geschrieben muss oder die UX-Integrität beeinträchtigt wird.

Um zerlegbare Softwaresysteme und Anwendungen zu erstellen, werden den Komponenten einige Eigenschaften verliehen. Die Komponenten sind in sich abgeschlossen, haben ihre eigene Schnittstelle und sind über Ports miteinander verbunden. Eine Komponente oder ein Modul aus Komponenten kann ohne Modifikationen erweitert und aufgerüstet werden. Zudem kann das gesamte System in wiederverwendbare, zusammenhängende und unabhängige Einheiten zerlegt werden, die wiederum zu anderen Modulen zusammengesetzt werden können.

Wie werden die Komponenten strukturiert? Die Atomic Design Methodology

Wie lassen sich Komponenten für die neue Website praktisch umsetzen? Generell gilt hier das Prinzip, dass einzelne Komponenten zusammengesteckt werden können. Hier ist es sinnvoll, eine gewisse Hierarchie einzuhalten. Beispielsweise kann der Kopfbereich einer Webseite aus der Navigationsleiste sowie dem Firmenlogo bestehen. Die Leiste wiederum lässt sich weiter in einzelne Navigationselemente gliedern.

Hier kommt die *Atomic Design Methodology ins Spiel. Diese wurde bereits von Brad Frost im Jahre 2013 vorgestellt. Hierbei geht es vereinfacht ausgedrückt darum, dass größere Strukturen, beispielsweise Organismen, kleinere Strukturen wie Moleküle beinhalten.

In dieser Methodologie stellen Atome die kleinste Struktur dar, während Pages die größte Struktur darstellen. Wer die Analogie noch weiterführen möchte, kann dem Modell Protonen und Atomkerne hinzufügen, die wiederum als eigene Bibliothek dienen und projektübergreifend genutzt werden können.

Atome

Atome sind die kleinsten Komponenten der Anwendung. Hierbei kann es sich sowohl um Texte von SEO Webseiten als auch Schaltflächen, Formulareingaben oder ähnliches handeln. Generell gilt hierbei: Wenn sich die Komponente nicht in noch kleinere Komponenten aufteilen lässt, muss es sich um ein Atom handeln.

Moleküle

Moleküle sind Kompositionen mehrerer Atome, die aneinander gebunden sind. Ein typisches Beispiel wären Text- und Input-Atome, die sich zu einem InputField-Molekül kombinieren lassen. Ein anderes Beispiel wäre eine Kombination aus einem Formularfeld und einem Button.

Organismen

Während Moleküle Kombinationen mehrerer Atome darstellen, sind Organismen Kombinationen mehrerer Moleküle. Werden zwei oder mehr Moleküle gemischt, erhält man dementsprechend einen Organismus. Hierbei kann es sich um ganze Teilbereiche einer Website handeln, wie beispielsweise der Kopf- oder Fußbereich.

Templates

Die nächstgrößere Struktur sind Templates. Hierbei handelt es sich um einen Zusammenschluss mehrerer Organismen, die in der richtigen Reihenfolge eingebunden werden. Ein Template bzw. eine Vorlage ermöglicht einen modularen Ansatz zur Inhaltsstrukturierung, was beispielsweise die Zeit zur Erstellung von Inhalten verkürzen und die Branding-Standards vereinheitlichen kann.

Pages

Pages sind die größte Strukturebene innerhalb der Atomic Design Methodology. Hier können nur noch wenige Anpassungen vorgenommen werden, die vornehmlich das Design betreffen. Kurz gesagt werden hier alle Designebenen zusammengeführt. Beispielsweise kann eine Hauptseite anders als ein Blog aussehen, während die grundsätzliche Gestaltung erhalten bleibt.

Was sind Komponententeams?

Jetzt, wo wir ein klareres Bild vom komponentenbasierten Frontend-Design haben, ist es an der Zeit, einen genaueren Blick auf die unterschiedlichen Teamstrukturen zu werfen, die aus diesem Ansatz hervorgehen.

Das komponentenbasierte Frontend-Design verändert die traditionelle Kommunikationsstruktur in Unternehmen. Während in traditionellen Strukturen eine natürliche Barriere zwischen Designern und Frontend-Entwicklern besteht, wächst diese Kluft in der komponentenbasierten Frontend-Entwicklung enger zusammen.

Bei Komponententeams handelt es sich um abteilungsübergreifende Design- und Entwickler-Teams, die Komponenten entwerfen, die im gesamten System wiederverwendet werden können. Sie übernehmen die vollständige Verantwortung für das Produkt und verbessern es ständig weiter, ohne den Rest des Ökosystems zu beeinträchtigen.

Vorteile der komponentenbasierten Entwicklung

Komponentenbasiertes Frontend-Design hilft nicht nur großen Organisationen, sondern kann auch der richtige Ansatz für Start-ups und sogar Einzelpersonen sein. Im Folgenden werden die wichtigsten Vorteile der komponentenbasierten Frontend-Entwicklung aufgelistet:

Schnellere Entwicklung & Website Kosten

Kosten für die Erstellung einer Website: Die komponentenbasierte Entwicklung kann die Entwicklungszeit drastisch verkürzen und dementsprechend auch die Website Kosten erheblich senken. Mit einer gemeinsam genutzten Bibliothek müssen Teams keine Lösung mehr von Grund auf neu erstellen. Gleichzeitig sind funktionale Anforderungen wie Sicherheit, Benutzerfreundlichkeit oder Leistung gewährleistet.

Wiederverwendbarkeit

Code-Duplizierung wird durch den komponentenbasierten Ansatz so gut es geht minimiert. Sobald die Komponente einmal erstellt wurde, kann sie in so viel Modulen wie nötig verwendet werden. Dies trägt zur Reduzierung des Entwicklungsaufwands und der Website Kosten bei.

Einfache Wartung

Eine aufgeblähte Codebasis macht es um einiges schwieriger, eine bestimmte Funktionalität zu verbessern. Je länger dieser Ansatz voranschreitet, desto ineffizienter wird die Wartung. Der modulare Charakter von komponentenbasierter Frontend-Entwicklung zerlegt den Monolithen in kleine, leicht verdauliche Komponenten, wodurch Upgrades oder Modifikationen zum Kinderspiel werden.

Autonome Teams

Funktionsübergreifenden Komponententeams zeichnen sich im Regelfall durch eine erhöhte Verantwortlichkeit aus und entwickeln umfassende Lösungen, anstatt sich durch ein verworrenes System zu manövrieren.

Skalierbarkeit

Wenn es um Skalierbarkeit geht, wird die Frontend-Entwicklung von vielen Unternehmen vernachlässigt. Hierbei handelt es sich häufig noch um denselben Monolithen, während das Backend bereits auf einer Microservices-Architektur läuft. Die komponentenbasierte Entwicklung ermöglicht es, die Vorteile einer modularen Architektur nun auch auf das Frontend auszudehnen.

Populäre Frontend-Frameworks

Heutzutage trennen die populärsten *Frontend-Frameworks Design und Funktion voneinander und tragen somit zu mehr Flexibilität bei. Bis dato gilt React unangefochten als das populärste Frontend-Framework, gefolgt von Vue und Angular.

Deine Webagentur in Frankfurt

Wenn du eine neue Webseite erstellen lassen möchten und einen verlässlichen Partner für dein nächstes Projekt suchst, stehen wir an deiner Seite. blackHound ist eine Internetagentur mit Sitz in Frankfurt, die Unternehmen wie E.On, Mercedes-Benz, Hugo Boss oder IKEA mit innovativen Web-, App- und 3D-Lösungen unterstützt.