FastAPI und Vue sind eine produktive Kombination für Geschäftsanwendungen. FastAPI liefert typisierte Python-APIs und automatisch erzeugte Schemata. Vue ermöglicht fokussierte Oberflächen ohne unnötigen Ballast. Die Wahl der Frameworks ist jedoch nur der Anfang. Produktionsqualität entsteht durch klare Grenzen, verlässliche Verträge und Betriebsabläufe, die auch bei mehr Funktionen und Beteiligten verständlich bleiben.
Eine gute Architektur macht alltägliche Änderungen unspektakulär. Ein neues Feld, eine weitere Berechtigung oder die Verlagerung langsamer Arbeit in eine Queue folgt einem bekannten Muster und löst keine grundlegende Neuplanung aus.
Nach fachlichen Fähigkeiten gliedern
Kleine Projekte beginnen häufig mit Ordnern namens Router, Models und Services. Mit zunehmendem Umfang verteilt diese Struktur eine einzelne Funktion über das gesamte Projekt. Wir bevorzugen fachliche Module wie Auftrag, Bestand, Identität oder Reporting. Jedes Modul enthält seine API-Routen, Anwendungsdienste, Fachregeln und Persistenzadapter. Die gemeinsam genutzte Infrastruktur bleibt bewusst klein.
Die Trennung dient dem Alltag. Route Handler übersetzen HTTP-Anfragen und Antworten. Anwendungsdienste koordinieren Geschäftsvorgänge. Domänencode enthält Regeln, die ohne FastAPI ausführbar sind. Repository-Adapter kommunizieren mit der Datenbank. Fachliches Verhalten lässt sich dadurch ohne gestarteten Webserver testen und ist weniger eng an ein bestimmtes ORM gebunden.
Abhängigkeiten zeigen nach innen. Eine Preisregel importiert kein HTTP-Request-Objekt. Ein Anwendungsfall muss nicht wissen, ob er durch einen API-Aufruf oder eine Warteschlange gestartet wurde. FastAPIs Dependency Injection eignet sich am Rand für Datenbanksitzungen, angemeldete Identitäten und Adapter.
Den API-Vertrag ausdrücklich gestalten
Pydantic-Modelle für Anfragen und Antworten sind öffentliche Verträge und keine bequemen Kopien der Datenbanktabellen. Getrennte Modelle verhindern, dass interne Spalten, Audit-Felder oder Mandantenkennungen versehentlich nach außen gelangen. Zugleich kann sich die API weiterentwickeln, ohne jede Änderung direkt in das Persistenzmodell zu übernehmen.
Das OpenAPI-Dokument wird in der Continuous Integration erzeugt. Unerwartete Änderungen erscheinen damit als prüfbarer Unterschied. Der Vue-Client kann generierte TypeScript-Typen oder eine kleine typisierte API-Schicht verwenden. Beides beendet doppelte Annahmen über Nullwerte, Aufzählungen und Antwortformate.
Nicht jede Weiterentwicklung verlangt eine neue URL-Version. Ergänzungen können kompatibel bleiben. Umbenannte oder entfernte Felder brauchen eine angekündigte Übergangszeit. Fehlerantworten verdienen dieselbe Sorgfalt wie erfolgreiche Antworten: ein stabiler maschinenlesbarer Code, eine sichere Meldung für den Anwender und eine Korrelations-ID für den Support.
Zustand und Identität richtig abgrenzen
Der Browser darf nicht über Berechtigungen entscheiden. Vue kann Aktionen zur besseren Bedienung ausblenden, doch FastAPI prüft jede Autorisierung auf dem Server. Benutzer- und Mandantenkontext werden aus einer verifizierten Sitzung oder einem geprüften Token abgeleitet und nicht aus beliebigen Anfragefeldern übernommen.
Bei browserbasierter Geschäftssoftware sind sichere HTTP-only-Cookies häufig besser zu schützen als in JavaScript gespeicherte Tokens. Die passende Lösung hängt von Infrastruktur und Identity Provider ab. Sie umfasst je nach Verfahren CSRF-Schutz, kurze Sitzungsdauer, Rotation und ein klar definiertes Abmelden.
Datenbankabfragen sollten die Mandantengrenze zentral anwenden. Wenn jeder Entwickler selbst an einen Filter denken muss, ist die Kontrolle zu schwach. Sensible Änderungen erhalten zusätzlich einen Audit-Eintrag mit Akteur, Aktion, Ziel und Zeitpunkt, jedoch ohne Geheimnisse oder unnötige personenbezogene Daten.
Langsame Arbeit aus Anfragen verlagern
PDF-Erzeugung, Importe, Benachrichtigungen und KI-Aufrufe können eine sinnvolle Anfragezeit überschreiten. Der API-Endpunkt prüft die Eingabe, legt einen Auftrag an und gibt eine Kennung zurück. Ein Worker erledigt die Arbeit. Der Client fragt den Status ab oder erhält, wo es die Bedienung verbessert, ein serverseitig gesendetes Update.
Aufträge müssen idempotent sein und ihren Fortschritt speichern. Bei Wiederholungen ist zwischen vorübergehenden Störungen und ungültigen Eingaben zu unterscheiden. Fällt ein externer Dienst aus, sind wachsende Wartezeiten sinnvoll. Eine Datei im falschen Format zehnmal einzulesen, verzögert dagegen nur die hilfreiche Rückmeldung.
Vue bildet diese Zustände ausdrücklich ab. Ein Ladeindikator reicht bei einem fünfminütigen Import nicht. Die Oberfläche zeigt wartend, in Arbeit, abgeschlossen oder fehlgeschlagen, behält den Auftrag nach einem Seitenwechsel und liefert eine handlungsorientierte Fehlermeldung.
Eine änderbare Oberfläche bauen
Seitenkomponenten koordinieren Daten, während kleinere Vue-Komponenten Interaktion und Darstellung übernehmen. Gemeinsamer Zustand gehört nur dann in einen Store, wenn mehrere Bereiche ihn wirklich benötigen. Lokaler Zustand bleibt lokal und ist dadurch leichter nachzuvollziehen.
Route Guards verbessern die Navigation, ersetzen aber keine serverseitige Sicherheit. Formulare ordnen Validierungsfehler den richtigen Feldern zu und bewahren bereits eingegebene Werte. Barrierefreiheit gehört in den Komponentenvertrag. Beschriftungen, Tastatursteuerung, Fokusführung und verständliche Statusmeldungen werden zusammen mit der Funktion getestet.
Ein kleines Designsystem für Abstände, Typografie, Bedienelemente und Rückmeldungen verhindert, dass jede neue Seite eigene Regeln erfindet. Verbesserungen an Barrierefreiheit und responsivem Verhalten lassen sich so zentral umsetzen.
Verträge und Betrieb testen
Unit-Tests prüfen Fachregeln und Randfälle. API-Integrationstests arbeiten mit einer echten Testdatenbank und decken Anmeldung, Mandantentrennung, Transaktionen und Antwortschemata ab. Wenige gezielte Browsertests sichern zentrale Wege wie Anmeldung, Auftragserfassung und die Erholung nach einer fehlgeschlagenen Anfrage.
Zur Produktionsreife gehören außerdem Migrationen, Health-Endpunkte und Beobachtbarkeit. Ein Readiness Check bestätigt, dass die Instanz Verkehr annehmen kann. Er darf nicht einfach 200 melden, obwohl die Datenbank fehlt. Strukturierte Logs, Traces und Metriken verwenden gemeinsame Korrelations-IDs und speichern keine sensiblen Anfrageinhalte.
API und Frontend können als getrennt versionierte Artefakte ausgeliefert werden, wenn ihre Release-Zyklen dies verlangen. Kompatible Versionen werden dennoch gemeinsam getestet. Datenbankmigrationen unterstützen rollierende Releases: neue Strukturen ergänzen, passenden Code ausrollen und alte Strukturen erst später entfernen.
Magnificent Services entwickelt mit FastAPI und Vue Systeme, die auch nach dem Start verständlich bleiben. Gute Architektur zeigt sich daran, dass Teams ein Produkt ohne verborgenes Wissen erweitern, untersuchen und betreiben können. Mehr finden Sie unter Leistungen und Projekte.