clean architecture front end
1.0.0
Hallo, hier ist ein Repository, das Ihnen meine Vision von Clean Architecture (zuerst vorne und später zurück) in verschiedenen Versionen schickt.
Ich habe einen Artikel geschrieben, um die Beispiele dieses Projekts zu unterstützen: https://www.hexa-web.fr/blog/hexagonal-architecture-front-end, um die saubere Architektur zu verstehen.
Für diese Beispiele habe ich mich für die Verwendung von Next.js anhand von React entschieden, aber der gesamte Punkt dieser Architektur besteht darin, sie unabhängig von den verwendeten Frameworks und Bibliotheken zu verwenden (externe Abhängigkeiten).
Um ein einfaches Beispiel zu haben, habe ich ein einfaches Thema ausgewählt: eine Todo -Liste!
Um die Aufgaben zu sehen, die noch im Projekt ausgeführt werden müssen, gehen Sie zur Datei /docs/todo.md
Wenn Sie Fragen, Vorschläge oder etwas anderes haben, zögern Sie nicht, mich zu kontaktieren! Und wenn Ihnen dieses Repository geholfen hat, sollten Sie es mit Ihren Bekannten teilen.
Installieren Sie zunächst die Abhängigkeiten:
npm install
# or
yarn install-
Führen Sie dann den Entwicklungsserver aus:
npm run dev
# or
yarn devÖffnen Sie http: // localhost: 3000 mit Ihrem Browser, um das Ergebnis zu sehen.
-
Um in Einheitstests zu starten:
jest-
So testen die App online: https://front-end-clean-architecture.netlify.app/
Die sechseckige Architektur oder Architektur basierend auf Ports und Adaptern ist ein Architekturmuster, das im Bereich der Softwaredesign verwendet wird. Ziel ist es, Systeme zu erstellen, die auf Anwendungskomponenten basieren, die locker gekoppelt sind und durch Ports und Adapter leicht mit ihrer Softwareumgebung verbunden werden können. Diese Komponenten sind modular und austauschbar, was die Konsistenz der Verarbeitung verstärkt und die Automatisierung von Tests erleichtert.
In der sauberen Architektur befinden sich drei Teile: den Anwendungsteil (die primären Ports und Adapter), die Domäne (die Anwendungsfälle, die Domänenmodelle usw.) und der Infrastrukturteil (die Sekundäranschlüsse und Adapter).
Diese Architektur basiert auf dem Port / Adapter -Muster und dem Abhängigkeitsinversionsprinzip.
Indem Sie Sie über saubere Architektur (oder sechseckige Architektur) dokumentieren. Sie finden verschiedene Namen für diese Teile. Die hier ausgewählten Namen sind persönlich, das Ziel ist, dass sie verständlich sind.
Die Verwendungsfälle definieren die Aktionen Ihrer Benutzer. Ziel ist es nicht, in diesen Elementen Framework oder Bibliotheken zu verwenden (um eine Logik nicht mit diesen Tools gekoppelt zu halten).
Auf der Vorderseite können sie durch die Funktion, die Klasse in JS oder TS, dargestellt werden. Bei React ist es möglich, Redux für diesen Teil zu verwenden.
Falls Redux verwendet wird, sind die Aktionen die Anwendungsfälle, der Zustand eines der Modelle und die Selektoren werden zur Zuordnung verwendet.
Der primäre Port wird verwendet, um einen Vertrag zwischen dem Primäradapter und den Anwendungsfällen festzulegen. Dafür kann eine Schnittstelle erstellt werden. In der Praxis wird der Anwendungsfall auch als Primärport angesehen.
Anschließend wird die Implementierung dieser Schnittstellen verwendet, um mit der Domäne zu dialog: Das erste ist das, was wir die primären Adapter nennen. Ihr Ziel ist es, die Ausführung von Anwendungsfällen auszulösen. Zum Beispiel können diese Adapter auf der Vorderseite die React -Komponenten sein, die eine Aktion ausführen (Redux oder nicht).
Der Sekundärport wird verwendet, um einen Vertrag zwischen dem Sekundäradapter und den Anwendungsfällen festzulegen. Dafür erstellen wir normalerweise eine Schnittstelle. Diese Schnittstelle wird direkt im Anwendungsfall verwendet.
Tipps: Dafür können Sie die Abhängigkeitsinjektion verwenden. Einige staatliche Verwaltungsbibliotheken ermöglichen es Ihnen, dies zu tun. Zum Beispiel mit Redux-Thunk und Redux-beobachtbarem Diensten ist es möglich, "extraArgumente" zu bestehen, die direkt in den Redux-Aktionen verfügbar sein werden. In "Vanille" gibt es auch Inversifyjs.
Die zweite Implementierung von Schnittstellen (Ports) wird als Sekundäradapter bezeichnet. Sie werden von den Anwendungsfällen aufgerufen. Zum Beispiel können diese Adapter die HTTP-Anforderungen, der Zugriff auf die im lokalen Storage vorhandenen Daten usw. sein.
Auf Englisch :
Auf Französisch:
