Möchten Sie den MEAN Stack schnell verstehen? Hier ist eine Dokumentation mit nützlichen Diagrammen.

Dieser Artikel basiert auf meinem Schlussstein für die City University of Seattle. Der Titel meiner Forschung lautet "Softwaredokumentation und Architekturanalyse der vollständigen Stapelentwicklung". Das Ziel meiner Forschung war es, die Lernkurve für das Verständnis von Open Source-Projekten und die Entwicklung von Full Stacks zu verkürzen, und ich habe mich für den MEAN Stack entschieden.

Ich habe die folgenden Diagramme mit Lucidchart erstellt, um das Verständnis zu erleichtern. Diese UML-Diagramme basierten auf dem 4 + 1-Architekturansichtsmodell:

  • Restaurant Analogie
  • Prozessansicht mit Sequenzdiagramm
  • Szenario mit Sequenzdiagramm
  • Physische Ansicht mithilfe des Bereitstellungsdiagramms
  • Entwicklungsansicht mit Paketdiagramm
  • Logische Ansicht mit Klassendiagramm

Die Forschung konzentrierte sich mehr auf Bereitstellung sowie Anforderungs- und Antwortfluss.

MEAN Stack

Der MEAN Stack ist eine Full-Stack-Open-Source-Lösung für JavaScript. Es besteht aus MongoDB, Express, Angular und Node.js.

Die Idee dahinter ist, die allgemeinen Probleme beim Verbinden dieser Frameworks zu lösen, ein robustes Framework zur Unterstützung des täglichen Entwicklungsbedarfs zu erstellen und Entwicklern dabei zu helfen, bessere Praktiken bei der Arbeit mit gängigen JavaScript-Komponenten anzuwenden.

Backend mit Node.js.

Node.js wurde für die Verarbeitung asynchroner E / A entwickelt, während in JavaScript eine Ereignisschleife für die Clientseite integriert ist. Dies macht Node.js im Vergleich zu anderen Umgebungen schnell. Der ereignisgesteuerte / Rückruf-Ansatz macht es jedoch schwierig, Node.js zu lernen und zu debuggen.

Node.js enthält Module wie Mongoose, eine MongoDB-Objektmodellierung, und das Express-Webanwendungsframework. Durch Knotenmodule kann eine Abstraktion erreicht werden, wodurch die Gesamtkomplexität des MEAN-Stapels verringert wird.

Backend mit Express Framework

Express ist ein minimalistisches und unbefangenes Anwendungsframework für Node.js. Es ist eine Ebene über Node.js, die reich an Funktionen für die Web- und Mobilentwicklung ist, ohne die Funktionen von Node.js zu verbergen.

Frontend mit Angular

Angular ist eine in TypeScript integrierte Webentwicklungsplattform, die Entwicklern robuste Tools zum Erstellen der Client-Seite von Webanwendungen bietet.

Es ermöglicht die Entwicklung von einseitigen Webanwendungen, bei denen sich der Inhalt je nach Benutzerverhalten und -einstellungen dynamisch ändert. Es verfügt über eine Abhängigkeitsinjektion, um sicherzustellen, dass bei jeder Änderung einer Komponente andere damit verbundene Komponenten automatisch geändert werden.

Datenbank mit MongoDB

MongoDB ist eine NoSQL-Datenbank, die Daten in BJSON (Binary JavaScript Object Notation) speichert.

MongoDB wurde zur De-facto-Standarddatenbank für Node.js-Anwendungen, um das Paradigma "JavaScript überall" mithilfe von JSON (JavaScript Object Notation) zu erfüllen und Daten über verschiedene Ebenen (Front-End, Back-End und Datenbank) zu übertragen.

Nachdem wir diese Grundlagen aus dem Weg geräumt haben, schauen wir uns diese Diagramme an.

Restaurant Analogie

Da ich die steile Lernkurve bewältigen wollte, entschied ich mich für eine Restaurant-Analogie, damit der Benutzer den Prozess für die Anforderung und Antwort in einer Full-Stack-Anwendung verstehen und beibehalten kann.

Der Kunde (Endbenutzer) fordert seine Bestellung über den Kellner (Controller) an, und der Kellner übergibt die Anfrage an die Person im Bestellfenster (Servicefabrik).

Diese drei Komponenten bilden den Front-End-Server. Die Servicefabrik kommuniziert mit dem Koch (Controller) im Backend. Der Koch holt dann die notwendigen Zutaten (Daten) in den Kühlschrank (Datenbankserver).

Der Kühlschrank kann dem Koch im Backend das erforderliche Material (Daten) zur Verfügung stellen. Der Koch kann diese Daten nun verarbeiten und an die Servicefabrik des Frontends zurücksenden.

Der Controller (Kellner) übergibt das zubereitete Essen an den Kunden (Benutzer). Der Kunde kann nun die Mahlzeit (Daten) konsumieren.

Prozessansicht mit Sequenzdiagramm

Wer benutzt es oder was es zeigt:

  • Integratoren
  • Performance
  • Skalierbarkeit

In der Prozessansicht zeige ich zunächst den Front-End-Server und den Back-End-Server getrennt an und verbinde sie dann mit dem Datenbankserver.

Im ersten Beispiel wurde eine Angular-Anwendung mit fest codiertem JSON in einer service.tsDatei (in der Service Factory) bereitgestellt .

Die Angular-Anwendung kann mit APIs von Drittanbietern kommunizieren, um Daten abzurufen und dem Benutzer anzuzeigen.

In unserem Back-End beginnt das Anwendungsbeispiel für Node.js mit einem fest codierten JSON, der verarbeitet und als Antwort verwendet werden kann.

Dieses Back-End kann mit APIs von Drittanbietern oder einem Datenbankserver verbunden werden, um den JSON abzurufen, zu verarbeiten und an den Anforderer zurückzusenden.

Nachdem die Prozesse für Front-End-Server, Back-End-Server und Datenbankserver erläutert wurden, zeige ich die folgende Kombination dieser drei Server:

Wenn eine HTTP-Anfrage gestellt wird, wird das Front-End ausgelöst und Angular nimmt die Anfrage auf. Die Anforderung wird intern in Angular weitergeleitet, wobei Route eine Anforderung für die Ansicht an Ansicht / Vorlage sendet.

View / Template fordert den Controller an. Der Controller erstellt dann eine HTTP-Anforderung an einen RESTful-Endpunkt (Representational State Transfer) auf der Serverseite, Express / Node.js. Die Anforderung wird dann intern mit Express / Node.js von der Route an den Controller / das Modell weitergeleitet.

Der Controller / das Modell fordert über das Mongoose ODM eine Interaktion mit dem Datenbankserver mit MongoDB an. MongoDB verarbeitet die Anfrage und antwortet auf den Rückruf an Express / Node.js.

Express / Node.js sendet eine JSON-Antwort an den Angular Controller. Der Angular Controller würde dann mit einer Ansicht antworten.

Szenarioansicht mit Sequenzdiagramm

Wer benutzt es oder was es zeigt:

  • Beschreiben der Interaktionen zwischen Objekten und zwischen Prozessen

Das oben beschriebene Szenario beinhaltet, dass ein Benutzer auf eine Buchladenanwendung zugreift. Wenn der Benutzer die URL eingibt, wird JavaScript ausgeführt und trifft auf den Router des Front-End-Servers, das AppRoutingModule. Das AppRoutingModule ruft die BooksComponent auf, die fetchBooks als Abhängigkeitsinjektion lädt.

fetchBooks erstellt dann eine HTTP-Anforderung an den Back-End-Server, der über einen Router, einen Controller und ein Modell verfügt, um die Anforderung zu verarbeiten und den Datenbankserver abzufragen.

Der Datenbankserver verarbeitet die Abfrage. Wenn der Back-End-Server wartet, werden die Daten abgerufen und als JSON-Antwort an den Front-End-Server zurückgesendet.

Das Front-End verfügt nun über die Daten und die Vorlagenansicht, die dem Benutzer angezeigt werden sollen.

Physische Ansicht mithilfe des Bereitstellungsdiagramms

Wer benutzt es und was es zeigt:

  • Systemingenieur
  • Topologie
  • Kommunikation

Das Bereitstellungsdiagramm zeigt 3 Server: Front-End, Back-End und Datenbank. Im Front-End benötigen wir den Browser, da Angular-Anwendungen browserbasierte Webanwendungen sind.

Der Back-End-Server hostet unsere Node.js mit Express über Node.js. In Express haben wir die Anwendung und Mongoose darüber. Express übernimmt die Kommunikation sowohl im Front-End als auch in der Datenbank. Der Datenbankserver enthält nur MongoDB. Es verwendet JSON für die Kommunikation zwischen Servern.

In unserem ersten Build des MEAN-Stacks werden wir den Front-End-Server, den Back-End-Server und den Datenbankserver lokal mithilfe unseres lokalen Computers (localhost) bereitstellen.

Wir werden die folgenden Standardports verwenden: Angular - Port 4200, Node.js / Express - Port 3000 und MongoDB - Port 27017.

Das folgende Diagramm zeigt die Full-Stack-Webanwendung in UML-Notation.

Um zur eigentlichen Produktion überzugehen, müssen Sie unsere Datenbank in die Cloud migrieren. Für MongoDB habe ich MongoDB Atlas als Cloud-Lösung ausgewählt.

Der letzte Schritt zur Bereitstellung in der Produktion besteht darin, unseren Front-End-Code auf Amazon S3 hochzuladen und das Back-End in einer EC2-Instanz mit AWS hochzuladen. Sie würden alle mit HTTP / HTTPS-Endpunkten miteinander kommunizieren.

Hier ist ein weiteres Diagramm, das unsere Produktionsbereitstellung ohne Verwendung der UML-Notation zeigt.

Entwicklungsansicht mit Paketdiagramm

Wer benutzt es und was es zeigt:

  • Programmierer
  • Software-Management

Die Paketansicht der Angular-Anwendung zeigt, dass jede Angular-Komponente in das AppModule importiert wird. AppModule und AppRoutingModule sind von BooksComponent abhängig. Die BooksComponent ist abhängig von BookDetailComponentDialog und ApiService.

Die Paketansicht der Anwendung Node.js zeigt, dass alle CRUD-Vorgänge (Controller) wie das Abrufen aller Bücher, das Abrufen eines Buches, das Aktualisieren eines Buches und das Löschen eines Buches von der App importiert werden. Außerdem befindet sich die gesamte CRUD-Operationslogik im Modellbuch.

Logische Ansicht mit Klassendiagramm

Wer benutzt es und was es zeigt:

  • Endbenutzer
  • Funktionalität

Die Buchhandlungsanwendung zeigte nur eine einzige Klasse namens Buch. Die Klassenmitglieder sind: Titel, isbn, Autor, Bild und Preis. Die Methoden sind: addBook, fetchBooks, fetchBook, updateBook und deleteBook.

Die Struktur des Modellbuchs im JSON-Format.

Hier sind einige Videos für die Diagramme:

Dokumentation auf meinem GitHub verfügbar:

clarkngo / cityu_capstone Tragen Sie zur Entwicklung von clarkngo / cityu_capstone bei, indem Sie ein Konto auf GitHub erstellen. clarkngo GitHub

Finde mich auf LinkedIn. =)