Eine einfache Freelancerverwaltung: Das Flux Pattern im Einsatz

Komplexe Webapplikationen bedeuten fast immer auch eine interaktive Oberfläche. Das bringt wiederum eine eigene Businesslogik mit sich. Diese dreht sich vor allem um die Frage, wie der Nutzer mit der Oberfläche und damit mit der gesamten Anwendung interagieren kann. Damit wird einerseits sichergestellt, dass nur relevante Daten das Backend erreichen. Durch Validatoren und Parser können Nutzereingaben so aufbereitet werden, dass sie von dem Backend restlos verarbeitet werden können. Andererseits kann somit ein besseres und flüssigeres Nutzungserlebnis erzeugt werden.

Damit steigt jedoch der Entwicklungsaufwand. Das Entwicklungsteam muss sich nun nicht nur um die fachliche Businesslogik kümmern, sondern auch eine reibungslose Ein- und Ausgabe der Daten sicherstellen. Durch zunehmende Komplexität wächst das Projekt damit um eine weitere Dimension der Softwareentwicklung an.

Der Frontendcode muss wie der Backendcode strukturiert und wartbar entwickelt werden.

Über die Zeit entstanden Designpattern, welche sich mit genau diesem Thema befassen. In einem älteren Artikel befassten wir uns mit dem dazugehörigen Flux-Pattern.

In diesem Artikel soll euch eine kleine Beispielapplikation zur Verwaltung von externen Mitarbeitern präsentiert werden, welche mit dem Flux-Pattern umgesetzt wurde. Dabei werden alle wichtigen Komponenten des Patterns einzeln betrachtet und miteinander in Verbindung gebracht, so dass dies hoffentlich zur Diskussion angeregt.

Der Fluxed Freelancer

Das Flux-Pattern zusammengefasst

Grundlegend werden im Flux-Pattern drei wichtige Arten von Komponenten definiert welche einen unidirektionalen Datenfluss realisieren.

  1. Dispatcher
  2. Stores
  3. Views

Der Dispatcher triggert Events, welche von den Stores behandelt werden. Letztere beinhalten gleichermaßen die Daten, welche von den Views lediglich dargestellt werden. Die Views wiederum sind die Schnittstellen, über die Nutzer mit der Applikation interagieren können. Sie definieren Events, die an den Dispatcher übergeben werden. Weitere Informationen des Patterns können in einem detaillierteren Artikel nachgelesen werden.

Freelancer App: Funktionsumfang

Als Beispiel entsteht eine App zur Verwaltung von externen Mitarbeitern. Diese umfasst grundlegende Funktionen wie das Auslesen, Bearbeiten, Löschen und Speichern von diesen. Aufgrund des beispielhaften Charakters wird keine Persistenz umgesetzt. Die App läuft ausschließlich im Browser und wird bei jedem Seitenrefresh in einem Standardzustand sein.

 

Wie man dem Screenshot entnehmen kann, sind in dem Zustand drei Freelancer vorhanden. Sie werden tabellarisch dargestellt. Weiterhin existiert eine vierte Zeile zum Hinzufügen eines neuen Mitarbeiters.

Wie die Nutzerinteraktionen im Code abgebildet werden erfahrt ihr auf der nächsten Seite.

Seiten: 1 2 3

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.