Schnelle Entwicklung mit React-Admin und Fastify

(Verfasst in Zusammenarbeit mit Mihai-Andrei Dancu)

Einführung

Softwareentwicklung ist eine zeitintensive Aufgabe und erfordert qualifizierte Softwareingenieure, um die Arbeit zu erledigen. Zeit und Budget stehen direkt proportional zueinander, und daher sollten so wenig Entwicklungsressourcen wie möglich verschwendet werden. Besonders in kleinen bis mittelgroßen Projekten sollte der größte Teil der Entwicklungszeit für die Implementierung von Features aufgewendet werden, und die für andere Aufgaben aufgewendete Zeit sollte minimiert werden.

Als Teil des Rapid-Development-Projekts des Cloudflight Technical Lab haben wir Softwarelösungen mit Fokus auf das schnelle Erzielen von Ergebnissen und die Entwicklung eines funktionalen MVP in sehr kurzer Zeit untersucht. Jedes Team hatte die Aufgabe, ein generisches Ressourcenverwaltungssystem zu entwickeln, wie in der Einführung dieser Artikelserie beschrieben. Unser Team baute speziell ein interaktives React-Admin-Frontend und ein NodeJS-Backend mit Fastify und einer PostgreSQL-Datenbank. Unsere Entwicklungserkenntnisse werden in diesem Artikel besprochen, und die Technologien werden in Bezug auf ihre Eignung für die schnelle Entwicklung bewertet.

Tech-Stack

Neben der allgemeinen Ressourcenverwaltungsfunktionalität haben wir das Versenden automatisierter Bestätigungs-E-Mails im Backend mit Mailhog als Test-Mail-Server implementiert.

React-Admin

React ist ein leistungsstarkes Webentwicklungs-Framework mit branchenweiter Verbreitung dank seiner cleveren Komponentenarchitektur und seinen Fähigkeiten zur Erstellung interaktiver Webseiten. React-Admin baut auf diesen Attributen auf und fügt nützliche Erweiterungen hinzu, um die Entwicklung zu vereinfachen und die Wartbarkeit zu gewährleisten. Es ist die vielversprechende Brücke zwischen benutzerdefinierten High-Code-Lösungen und Low/No-Code-Lösungen, indem es die Entwicklungszeit durch Abstraktion bestehender React-Bibliotheken reduziert.

Der Hauptvorteil von React-Admin ist die Einbeziehung zahlreicher Out-of-the-Box-Material-UI-Komponenten, die verwendet werden können, um schnell Dashboard-artige Web-Apps ähnlich wie YouTube Studio und Spotify zu erstellen. Es bietet auch Integrationen zur schnellen Implementierung von Authentifizierung, Berechtigungen, Internationalisierung und vielen anderen nützlichen Funktionalitäten. React-Admin wird am besten für CRUD-basierte Anwendungen verwendet, kann aber beim Entwickeln komplexer Web-Apps einschränkend sein.

import {Admin, Resource} from "react-admin";
import {SpotList} from "../components/spots";
import {dataProvider} from "../providers/dataProvider";
export const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="spots" list={SpotList}/>
    </Admin>
);

Der Kern von React-Admin – die Data-Provider-Spezifikation, die deklarierten Ressourcen (in diesem Fall nur eine) und die Admin-Komponente

Die SpotList wird automatisch über DataProvider abgerufen und alle Daten werden in einer Tabelle angezeigt.

Vorteile

• React-Admin-Komponenten sind eine gute Basis für Dashboard-artige Apps
• Komponenten sind standardmäßig gestylt und responsiv
• Routen für Ressourcen-Endpunkte werden automatisch konfiguriert
• Data-Provider-Abstraktion ermöglicht automatische API-Kommunikation
• Integrierte rollenbasierte Zugriffskontrolle
• Integrierte Internationalisierung (40+ Lokalisierungen unterstützt)
• Skalierbarkeit durch Reacts Architektur gewährleistet

Nachteile

• Benutzerdefinierte Funktionalität (alles außer CRUD) kann schwierig zu implementieren sein
• Backend-API-Implementierung muss den Data-Provider-Spezifikationen folgen
• Einige Features und UI-Komponenten sind nur über ein Enterprise-Edition-Abonnement verfügbar (z. B. seitenweite Suche, Breadcrumb-Pfade, KI-Autovervollständigung und mehr)
• Wenig TypeScript-Dokumentation verfügbar, größtenteils JavaScript

Fastify

Fastify ist ein modernes NodeJS-Web-Framework, das sich auf Entwicklererfahrung, geringen Overhead und Reaktionsfähigkeit durch effizientes Management von Serverressourcen konzentriert. Seine leistungsstarke Plugin-Architektur ermöglicht es Entwicklern, Features schnell zu implementieren, während minimaler Konfigurationsaufwand erforderlich ist.

Plugins können selbst entwickelt werden, aber es gibt auch Core- und Community-Plugins, die als Abhängigkeiten hinzugefügt werden können. Als Beispiel kann ein „Datenbankverbindungs-Plugin” im Anwendungskontext registriert werden, und durch die Verwendung von Decorators kann es dann von überall in der Anwendung aufgerufen werden.

Als Web-Framework bietet Fastify eine einfache Lösung zum Deklarieren von Endpunkten und Routen für die HTTP-Kommunikation. Hooks können als Ereignis-Listener verwendet werden, um benutzerdefinierten Code auszuführen, wann immer eine bestimmte Aktion ausgeführt wird, z. B. wird ein Reply-Header hinzugefügt, bevor eine Anfrage zurückgegeben wird.

const fp = require('fastify-plugin');
module.exports = fp(function (fastify, opts, done) {
    fastify.addHook("onRequest", async function (request, reply) {
        reply.headers(
            {"Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Expose-Headers": "*"}
        );
    });
    done()
})

Ein einfaches Plugin, das jeder Antwort CORS-Header hinzufügt

Darüber hinaus erfordert Fastify im Vergleich zu ähnlichen Frameworks sehr wenig Overhead. Nur die Core-Konfigurationsdatei (package.json) für das Node.js-Ökosystem ist erforderlich, und es wird kein zusätzlicher Boilerplate-Code benötigt. Eine „Hello World”-Anwendung kann in ~10 Zeilen Code geschrieben werden.

const fastify = require('fastify')({ logger: true })
fastify.get('/', function (request, reply) {
    reply.send({hello: 'world'})
})
fastify.listen({port: 3000}, function (err, address) {
    if (err) {
        fastify.log.error(err)
        process.exit(1)
    }
})

„Hello World” in Fastify

Vorteile

• Plugin-Architektur kann die Entwicklung beschleunigen
• Plugins können einfach in verschiedenen Projekten wiederverwendet werden
• Fastify unterstützt TypeScript (Deklarationsdatei wird gepflegt)
• Fastify kann bis zu 30.000 Anfragen pro Sekunde verarbeiten (Angaben von Fastify)
• Das Plugin-System ermöglicht einen einfachen Wechsel von monolithischen Anwendungen zu Microservices (wenn der Kontext korrekt konfiguriert ist)
• Gute offizielle Dokumentationsressourcen

Nachteile

• Das Verstehen des Anwendungskontexts und des Geltungsbereichs der Plugin-Registrierung kann anfangs kompliziert sein
• Geringer Overhead bedeutet auch, dass alle erforderlichen Funktionalitäten selbst implementiert werden müssen
• Dateien können sehr ausführlich werden (insbesondere Routen mit Parameterdefinitionen)
• Relativ kleine Entwickler-Community (wenige Online-Diskussionen/Threads)
• Keine TypeScript-Dokumentation verfügbar, nur JavaScript

Lessons Learned

Die Wahl des richtigen Tech-Stacks ist eine der wichtigsten Entscheidungen beim Versuch, den Softwareentwicklungsprozess zu beschleunigen. Die beste Wahl variiert von Projekt zu Projekt, und es kann schwierig sein, den Sweet Spot zwischen High- und Low/No-Code-Lösungen zu finden. High-Code-Frameworks erfordern viel Setup- und Konfigurationszeit, bieten aber viele Funktionalitäten out-of-the-box (z. B. Spring Boot). Low-Code-Lösungen bieten vorgefertigte Komponenten, die es Entwicklern ermöglichen, eine Anwendung in Minuten zu bootstrappen, sind aber möglicherweise nicht so flexibel, wenn benutzerdefinierte Funktionalität erforderlich ist. Je nach gewählten Technologien und Frameworks muss bei der Berücksichtigung des Entwicklungsoverheads immer ein Kompromiss zwischen Flexibilität und investierter Zeit gemacht werden.

Das Fastify-Framework hat sehr wenig Overhead, aber das bedeutet auch, dass jede erforderliche Funktionalität selbst implementiert oder zumindest selbst konfiguriert werden muss, wenn ein vorhandenes Plugin existiert. Die Plugin-Architektur ist ein großartiges System zur Beschleunigung der Entwicklung, besonders wenn es eine Basis an bestehenden Plugins aus früheren Projekten gibt. Wenn ein Team sicher im Umgang damit ist, kann Fastify eine großartige Framework-Wahl sein.

React-Admin bietet nützliche Abstraktionen, um schnell einfache CRUD-basierte Dashboard-artige Apps in wenigen Zeilen Code zu erstellen. Wenn Entwickler innerhalb der Beschränkungen von React-Admin arbeiten, können zufriedenstellende Ergebnisse schnell erzielt werden, aber die Implementierung benutzerdefinierter Features kann bei der Arbeit mit dem Framework sehr einschränkend sein. Je nach Projektumfang kann React-Admin eine solide Wahl sein. Es wird am besten für weniger komplexe Projekte mit Ressourceninspektion und -manipulation als Hauptfokus verwendet.

Leider gibt es keine eindeutige Lösung zur Steigerung der Entwicklungsgeschwindigkeit durch die Wahl der richtigen Frameworks. Alle Projektanforderungen (und mögliche zukünftige Anforderungen) müssen berücksichtigt werden, um eine fundierte Entscheidung zu treffen. Am Ende sind Frameworks nur Werkzeuge, die Entwicklern helfen sollen, die Anforderungen zu erfüllen, aber suboptimale Framework-Entscheidungen können die Entwicklungszeit negativ beeinflussen oder sogar zum Projektscheitern führen. Die beste Framework-Wahl ist oft diejenige, mit der Teams am erfahrensten sind, weil Schlüsselkonzepte und Einschränkungen im Voraus bekannt sind. Wenn unbekannte Frameworks vorgeschlagen werden, sollte Zeit für Forschung und Vorbereitung aufgewendet werden, um zukünftige Probleme zu vermeiden. Wenn das richtige Framework für einen spezifischen Anwendungsfall gewählt wird, kann die Entwicklungsgeschwindigkeit erheblich gesteigert werden.

Wir hoffen, dass ihr durch das Lesen dieses Artikels etwas gelernt habt und vielleicht eine neue Perspektive auf die Framework-Wahl gewonnen habt. React-Admin und Fastify können solide Optionen sein, und hoffentlich habt ihr einige Einblicke erhalten, ob sie gut zu einem eurer zukünftigen Projekte passen könnten. Weiter coden, Prost!