Blogartikel zum Schlagwort: User Interface

Erfahrungen und Erkenntnisse aus der komponentenbasierten Entwicklung

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.

Wie wir bei der kreITiv ein stimmiges User Interface entwickeln

Wie wir bei kreITiv ein stimmiges User Interface entwickeln

Dem User Interface kommt als Schnittstelle zum Endanwender eine entscheidende Bedeutung für jede Form von Software zu. Sie bestimmt, ob eine Anwendung – so komplex oder simpel sie auch ist – überhaupt sinnvoll genutzt werden kann.

Fehler im Design können Motivation beim Nutzer und damit den Betreiber viel Geld kosten, wenn bspw. in einem Onlineshop kein Kauf ausgelöst oder in einem Webportal kein Account registriert werden kann. Aus diesem Grund beschäftigen wir uns also auch als Softwareentwickler immer schon frühzeitig mit dem Thema User Interface (UI).

1. Der Komponentenbaum für bessere Übersicht

Die Planung ist und bleibt ein wichtiger Bestandteil der Softwareentwicklung. Auch bei der Entwicklung mit komponenten-basierenden Frameworks, die bereits zahlreiche Vorarbeiten liefern, darf die Planung nicht zu knapp ausfallen. Ein stufenweises Herangehen hat sich inzwischen etabliert und erscheint aus mehreren Gründen sinnvoll.

Wichtig ist es, mit einem Prototypen zu beginnen. Dieser gibt das Design und eine gewisse Teilfunktionalität vor. Drei Arten des Prototypings in der Softwareentwicklung haben wir im Blog schon einmal behandelt. Basierend auf dem Prototyp, kann im nächsten Schritt ein Komponentenbaum aufgebaut werden. Dieser visualisiert den Aufbau der Anwendung und stellt die Zusammenhänge zwischen den Komponenten dar.

2. Ein Storybook zur interaktiven Entwicklung

Aufbauend auf dem Komponentenbaum kann ein sogenanntes Storybook entwickelt werden. Das Storybook dient zur Visualisierung der UI-Komponenten einer Software.

  • Für Entwickler bietet das Storybook die Möglichkeit, diese Komponenten interaktiv zu entwickeln sowie die einzelnen Komponenten intensiv zu testen.
  • Zusätzlich dient es als eine Art Dokumentation, welche es ermöglicht, Komponenten in anderen Projekten wiederzuverwenden. Dies hat den positiven Effekt, dass bei Folgeprojekten Entwicklungszeit eingespart werden kann.

Storybook zur interaktiven SoftwareentwicklungDurch das interaktive Entwickeln bekommt der Kunde auch einen Einblick in die Entstehung der Software und kann den Fortschritt stets mitverfolgen. Eine zeitnahe Feedback-Übermittlung bzw. Gegensteuerung bei ungeplanten oder ungewollten Entwicklungen ist damit jederzeit möglich. Missverständnisse, die oft erst gegen Ende von Projekten sichtbar werden, können deutlich reduziert werden. Das trägt zur Zufriedenheit aller Stakeholder des Entwicklungsprojektes bei.

Zwei Trends in Sachen User Interface

In der Entwicklercommunity ist die Unterstützung für das Thema Storybook in letzter Zeit stark gestiegen. Nicht nur große Firmen, wie Airbnb oder Xebia, setzen auf das Konzept, sondern auch einzelne Entwickler konzentrieren sich jetzt mit Vollzeit auf die Weiterentwicklung des Storybooks. Sehr lesenswerte Ansätze und Ausblicke liefert der Artikel “Storybook: The Next Chapter” auf medium.com

Ein weiterer positiver Trend in diesem Bereich ist die Verwendung von Komponenten-Bibliotheken, wie zum Beispiel Material UI von Google. Entwickler können sich dabei aus einem Repertoire von vorgefertigten Komponenten bedienen, welche bereits über ein gewisses Maß an Grundlogik verfügen. Das Design dieser Elemente ist an Android angelehnt und kann daher intuitiv verwendet werden. So müssen die Grundlagen nicht immer wieder neu erarbeitet, sondern können bei jedem Projekt verfeinert und optimiert werden.

Dieses modulare Vorgehen und die Best-Practice-Ansätze führen zu einer schlanken, einheitlichen und schnellen Entwicklung und werden in zunehmendem Maße auch in die alltägliche Arbeit der kreITiv-Softwareentwicklung integriert.