Freshly Arrived: MaraDocs-Demo-Modus und Software-Architektur

Wir haben das Osterwochenende genutzt, und einen Demo-Mode für MaraDocs geschrieben und veröffentlicht.

Der MaraDocs-Blog ist eine Mischung aus Ankündigungsplattform von MaraDocs-bezogenen Ereignissen aber auch Ort um legal- und tech-bezogene Gedanken zu Papier zu bringen.

Wir sind wahnsinnig stolz...

Raui und ich haben im letzten Jahr intensiv an MaraDocs gearbeitet. Nach einigen Monaten Vorarbeit von mir, haben wir sicher 8 Monate reine Produktentwicklung betrieben. Immer das Ziel vor Augen: Die eine Dokumentenaufbereitung für Kanzleien zu erschaffen, die uns alle vom Schmerz der qualitativ immer schlechter werdenden Posteingänge befreien soll.

Wir haben mit ein paar Partnerkanzleien zusammengearbeitet (Dank an RA Bafteh vom BSvH geht raus!) um sicherzustellen, dass wir nicht am Enduser vorbei entwickeln. Und wir haben viele sehr sinnvolle Tipps bekommen: So ist zum Beispiel die Dokumentenvorschau maßgeblich anhand des Feedbacks einer frühen Nutzerin (RAin im Familienrecht aus Freiburg, vielen Dank :)) und den Rückmeldung der Sekretariatsmitarbeiter der Kanzlei Kurtz & Lynen (https://kanzlei-kurtz.net) entstanden.

...und doch gibt es noch einiges zu tun

Ein gutes Produkt allein macht noch kein erfolgreiches Produkt aus. MaraDocs ist top und wird von denen, die es für ihre tägliche Arbeit benutzen, täglich benutzt und geliebt. Aber die, die es noch nicht benutzen, kennen es meist noch nicht.

In einer aufmerksamkeitsüberladenen Welt ist es nicht leicht, die Aufmerksamkeit potentieller Kunden zu bekommen.

Der Weg des potentiellen Kunden ist weit:

• Da gibt es etwas...

• Das probiere ich mal aus...

• Ich gehe tatsächlich auf die Webseite...

• Ich melde mich mit meiner E-Mail-Adresse an...

• Ich klicke auf den Login-Link, den ich per Mail bekommen habe...

• Ich öffne die App und füge Mail-Anhänge zum optimieren ein und erkenne, dass das Produkt genial ist.

Shortcuts in die App

Mit dem Demo-Modus können wir den Weg drastisch reduzieren und potentiellen Kunden eine unkomplizierte, frühe und echte Erfahrung bieten, MaraDocs auszuprobieren. MaraDocs macht Spaß: Die saubere UI und das Verschieben und Kombinieren von Seiten zu neuen PDFs hat etwas spielerisches.

Gleichzeitig kostet uns der Demo-Modus nichts. Zum Hintergrund muss man wissen, dass das Hochladen von echten Dateien und Mailanhängen Kosten in unserer Infrastruktur verursacht. Wir müssen gewissen Ressourcen bereithalten, um die Bearbeitungsaufträge von Nutzern schnell und reaktiv abarbeiten zu können. Ein Demo-Modus, der echte Dateien an unsere Server schicken würde und nicht einmal eine Anmeldung voraussetze, könnte leicht dazu führen, dass unsere Server durch eine Vielzahl von Anfragen überlastet wird und unsere tatsächlichen Kunden darunter leiden würden.

Technische Implementierung

Wir setzen im Frontend auf React / NextJs. Die im Browser laufende React-App kommuniziert im normalen Modus mit unseren für die Dateibearbeitung zuständigen Servern per WebSocket (Websocket is eine bidirektionale Verbindung, bei der auch der Server selbstständig, also ohne Abfragen des Browsers, Ergebnisse an den Browser schicken kann).

Mir war wichtig, den Demo-Modus so zu entwickeln, dass der immer den aktuellen Entwicklungsstand vom MaraDocs widerspiegelt und kein neues, weiteres System darstellt, das eigenständig mitentwickelt werden müsste.

Redux Middleware

Ein großer Teil der App-internen Ablauflogik wird durch Redux-Middlewares gesteuert. Letztlich kann man sich die App wie eine riesige state-maschine vorstellen, bei der verschiedene Events vordefinierte Abläufe auslösen und die interene Datenrepräsentation verändern.

Ein Event ist etwa das Klicken auf eine Button (z.B. drehe diese PDF Seite) oder auch das Einfügen einer Datei in die App oder auch eine Websocket-Nachricht vom Server mit den Ergebnissen einer optimierten PDF.

Ich hatte mich dazu entschieden, die asynchronen Teile der sich an diese Events anschließenden Aktionen, also etwas das Versenden von Daten per Websocket an den Server, aber auch einige der extensiven PDF-Bearbeitungen, die wir im Browser vornehmen, in Middleware-Logik zu implementieren. Diese Middleware(s) horchen und reagieren bei bestimmten Events und führen dann Logik aus.

Hot-Swapping Middlewares

Im Demo-Modus wird also unsere normale App gestartet. Bei der Registrierung der verschiedenen Middlewares wird allerdings die, die normalerweise die WebSocket-Kommunikation vornimmt, gegen eine Demo-Middleware ausgetauscht, die bei entsprechenden Events simulierte (vorgefertigte) Ergebnisse mit kleiner Wartezeit anzeigt.

Diese Dateien müssen also nicht jedes mal von unseren Servern analysiert und optimiert werden, sondern nur ein einziges Mal. Anschließend können sie immer wieder aus unserem statischem Cache geladen werden und verursachen auf diese Weise praktisch keine Kosten.

Allgemeine Gedanken zu Redux

Redux ist eine bestimmte Art, state in Javascript App zu verwalten. Dem liegt der Gedanke zugrunde, dass nur sog. actions, die auf eine bestimmte Art und Weise ausgeführt werden müssen, die in der App vorhandenen Zustandsdaten verändern dürfen. React zum Beispiel kann auf diese Weise sicherstellen, dass sichtbare Teile der App auf Zustandsveränderungen reagieren.

Die Redux-Library, die dieses Software-Modell zumindest in der Frontend-Welt bekannt gemacht hat (Redux) gilt teilweise als überkomplex und wird in vielen jüngeren Projekten durch leichtgewichtigere Alternativen verdrängt. Wir haben den Einsatz jedoch sorgfältig für uns abgewogen. Insbesondere die mächtige Middleware-Struktur hat uns erlaubt, eine so komplexe App wie MaraDocs in den Browser zu holen.

Der Demo-Modus und die einfache Handhabung, diesen durch das Austauschen eines einzelnen "Moduls" (die Middleware) an- und abzuschalten, bestätigt für mich, dass wir hier auf das richtige Pferd gesetzt haben.

Fazit

Ich freue mich insbesondere über Kolleginnen und Kollegen aus der Anwaltschaft, die die Leidenschaft für Digitalisierung und Softwareentwicklung mit mir teilen.

Der Artikel heute war mal etwas technischer. Aber so ist das manchmal: Man startet unverfänglich und taucht dann doch etwas tiefer in die Themen ein.

Rückmeldungen / Feedback / Fragen sehr gerne über LinkedIn oder per E-Mail an info@maradocs.io.