Die komponentenbasierte Entwicklung von Softwareanwendungen

Das sich in den letzten Jahren der Trend zum auf Komponenten basierenden Entwicklungsansatz (component driven development) hin entwickelt hat, haben wir im Blogartikel “Wie wir bei kreITiv ein stimmiges User Interface entwickeln” kürzlich schon beschrieben.

In einem zweiten und deutlich technischeren Beitrag möchten wir nun weiterführend auf die Vorteile dieses Ansatzes eingehen und das Konzept mit der sogenannten Redux-Implementierung vervollständigen.

Vorteile des komponentenbasierten Entwicklungsansatzes

Die komponentenbasierte Entwicklung beschreibt ein innovatives Vorgehen, welches sich in unserer Branche immer größerer Beliebtheit erfreut. Im Vergleich zu herkömmlichen Ansätzen, wird hier von vornherein mehr auf klare Strukturierung und ein hohes Maß an Wiederverwendbarkeit von Codestrukturen geachtet. Arbeitspakete sind deutlich einfacher zu gliedern und lassen sich flexibler in Teams teilen.

Der Ansatz stammt aus dem Bereich der Entwicklung von webbasierter Software und kann Unternehmen als Neuerung wertvolle Rückschlüsse auf Entwicklungsprozesse für Anwendungen liefern. Er eignet sich besonders für Projekte, die mehr als einen Entwickler in der Umsetzung benötigen oder einen sehr hohen qualitativen Anspruch an das User Interface legen. Mit dem Konzept schafft man sich Strukturen, die eine spätere Weiterentwicklung sowie die Skalierbarkeit der eigenen Anwendung deutlich erleichtern.

Ganz konkret lassen sich vier entscheidende Vorteile festhalten.

Isolierte Komponentenentwicklung
Damit ist es dem Entwickler möglich, seinen Fokus klar auf verschiedene Teilaspekte einer Anwendung zu legen. Jeder Teil einer Anwendung wird hierbei separat entwickelt und auch getestet. Das führt in der Regel zu wesentlich weniger Fehlern bei der späteren Implementierung.
Komponentenzustände
Im Komponenten Tree werden vorab alle notwendigen und möglichen Zustände geplant und aufgelistet. Dies hat zur Folge, dass eine Komponente in jedem Kontext der Anwendung sauber funktioniert und auf jeden Anwendungsfall entsprechend reagieren kann.
Parallelisierte Entwicklung
Die gleichzeitige Umsetzung mehrerer Komponenten ermöglicht es, Aufgaben zwischen verschiedenen Teammitgliedern so zu teilen, wie es auf der Ebene von “Bildschirmen” nicht möglich ist.
Vielfältige Testmöglichkeiten
Neben den klassischen visuellen Tests über das Storybook, können die Entwickler hier auch Module, wie den Unit Test (JEST) oder automatisierte DOM Tests, nutzen.

Sind alle Komponenten mit ihren States entwickelt worden, so können diese auch optional in eine Library, also eine Bibliothek, implementiert werden, um in späteren Projekten wiederverwendet zu werden. In der Regel folgt danach die Implementierung der Anwendung. Dies kann innerhalb des Storybooks oder auch außerhalb realisiert werden. In diesem Schritt werden nun die zuvor entwickelten Komponenten in Container Elemente implementiert, damit diese eine direkte Anbindung an den Store der Bibliothek erhalten können.

In einem unserer Storybooks können Sie sich einen Überblick der einzelnen Komponenten, eingearbeitet in den jeweiligen Views, verschaffen. Komponenten können z.B. Input-Felder, Grafiken, aber auch die umschließenden Komponenten in Form einer Karte sein. Ein Storybook beinhaltet im Normalfall tatsächlich nur einzelne Komponenten, keine ganzen Seitenansichten. Das Ziel ist es, alle benötigten Elemente in ihren verschiedenen Stadien während der Entwicklung darzustellen. Eine weitreichende Logik wird dabei vernachlässigt.

Das Konzept der Redux-Implementierung

Die Überführung der entwickelten Komponenten in eine Bibliothek macht nun die Installation von Redux als State Management Library und der Erweiterung React-Redux notwendig. Redux selbst ist eine quelloffene und mittlerweile von React unabhängige Bibliothek und kann auch für andere reaktive Frameworks verwendet. So zum Beispiel für die auch von uns in Projekten verwendeten Frameworks Vue oder Angular.

Aufbau einer Redux-Implementierung

Actions: Beschreiben, wie Daten manipuliert werden.
Action Creator: Erzeugen aus der Action ein JavaScript-Objekt, verknüpfen dieses mit Daten und führen gegebenenfalls asynchrone Operationen wie API-Calls aus. Hierfür wird Thunk als Erweiterung empfohlen.
Reducer: Erzeugen einen neuen Anwendungsstate. Wichtig ist, dass ein State nie manipuliert werden kann. Es wird immer ein neuer State erzeugt, der dann vom Reducer in den Store geschrieben wird.
Store: Ist der anwendungseigene Speicher. Werden Komponenten mit ihm verknüpft, dann erhält jede deren Änderungen und kann entsprechend neugerendet werden.

Vorteile der Redux-basierenden Datenverarbeitung

Strikte Trennung von Präsentation und Verarbeitung der Daten: Die Darstellung der Daten selbst wird in der Regel über Stateless-Komponenten realisiert, welche Änderungen der Daten selbst über ihre Properties und Container triggern können. Die eigentliche Manipulation der Information geschieht über die Reducer, die als Pure Function geschrieben werden.
Deterministische Zustände: Dank der strikten Vorgaben für die Konzeption eines Reducers sind alle Zustände, welche Daten einer Anwendung annehmen können, begrenzt. Dies minimiert die möglichen Fehler in Punkto Verarbeitung enorm.
Standardisiertes Architekturkonzept: Redux als Library gibt den Aufbau der Datenverarbeitung vor, was zu Folge hat, dass Anwendungen einheitlicher und damit wartbarer werden.

Auf Basis unserer Projekterfahrungen können wir damit als Fazit ziehen: Mit einem komponentenbasierten Entwicklungsansatz benötigt man mehr Zeit für die Entwicklung von Anwendungen, jedoch rechtfertigt sich mehr Mehraufwand, da letztlich qualitativ hochwertige Anwendungen entstehen.

Wir sind gespannt, welche Entwicklungen es in diesem Bereich in den kommenden Jahren noch geben wird und behalten natürlich insbesondere die Webtechnologien für unsere Kunden und Projekte genau im Auge.

Anfrage an die kreITiv-Softwareentwicklung