Dieser Artikel basiert auf meinem Abschlussstein für die City University of Seattle. Der Titel meiner Forschung lautet „Software Documentation and Architectural Analysis of Full Stack Development“. Das Ziel meiner Forschung war es, die Lernkurve beim Verständnis von Open-Source-Projekten und Full-Stack-Entwicklung zu reduzieren, und ich wähle den MEAN-Stack.
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 mit Bereitstellungsdiagramm
- Entwicklungsansicht mit Paketdiagramm
- Logische Ansicht mit Klassendiagramm
Die Forschung konzentrierte sich mehr auf die Bereitstellung sowie den Anforderungs- und Antwortfluss.
Der MEAN Stack ist eine Full-Stack-JavaScript-Open-Source-Lösung. Es besteht aus MongoDB, Express, Angular und Node.js.
Die Idee dahinter ist, die häufigsten Probleme beim Verbinden dieser Frameworks zu lösen, ein robustes Framework zu erstellen, das die täglichen Entwicklungsanforderungen unterstützt, und Entwicklern dabei zu helfen, bessere Praktiken bei der Arbeit mit gängigen JavaScript-Komponenten anzuwenden.
Backend mit Knoten.js
Knoten.js wurde für die Verarbeitung asynchroner E / A entwickelt, während JavaScript über eine Ereignisschleife für die Clientseite verfügt. Dies macht Knoten.js schnell im Vergleich zu anderen Umgebungen. Der ereignisgesteuerte / Callback-Ansatz ist jedoch sinnvoll.js schwer zu erlernen und zu debuggen.
Knoten.js enthält Module wie Mongoose, eine MongoDB-Objektmodellierung, und das Express-Webanwendungsframework. Durch Knotenmodule kann eine Abstraktion erreicht werden, die die Gesamtkomplexität des MEAN-Stacks reduziert.
Backend mit Express-Framework
Express ist ein minimalistisches und unopinioniertes Anwendungsframework für Node.js. Es ist eine Ebene über dem Knoten.js, das reich an Funktionen für die Web- und mobile Entwicklung ist, ohne einen Knoten auszublenden.js-Funktionalität.
Frontend mit Angular
Angular ist eine in TypeScript integrierte Webentwicklungsplattform, die Entwicklern robuste Tools zum Erstellen der Clientseite von Webanwendungen bietet.
Es ermöglicht die Entwicklung von einseitigen Webanwendungen, bei denen sich der Inhalt dynamisch basierend auf dem Benutzerverhalten und den Vorlieben ändert. Es verfügt über Dependency Injection, 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 erfüllen das Paradigma „JavaScript Everywhere“ mithilfe von JSON (JavaScript Object Notation), um Daten über verschiedene Ebenen (Front-End, Back-End und Datenbank) zu übertragen.
Nun, da wir diese Grundlagen aus dem Weg geräumt haben, schauen wir uns diese Diagramme an.
Restaurant Analogy
Da ich die steile Lernkurve angehen wollte, entschied ich mich für eine Restaurant-Analogie, damit der Benutzer den Prozess für Anfrage 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 (Service Factory).
Diese drei Komponenten bilden den Front-End-Server. Die Service Factory kommuniziert mit dem Cook (Controller) im Back-End. Der Koch holt dann die notwendigen Zutaten (Daten) in den Kühlschrank (Datenbankserver).
Der Kühlschrank kann dem Koch im Backend das notwendige Material (Daten) zur Verfügung stellen. Der Cook kann diese Daten nun verarbeiten und an die Service Factory des Frontends zurücksenden.
Der Controller (Kellner) übergibt die zubereitete Mahlzeit an den Kunden (Benutzer). Der Kunde wird nun in der Lage sein, die Mahlzeit (Daten) zu konsumieren.
Prozessansicht mit Sequenzdiagramm
Wer verwendet es oder was es zeigt:
- Integratoren
- Performance
- Skalierbarkeit
In der Prozessansicht zeige ich den Front-End-Server und den Back-End-Server zunächst getrennt an und verbinde sie dann mit dem Datenbankserver.
Im ersten Beispiel wurde eine Angular-Anwendung mit fest codiertem JSON in einer service.ts -Datei (in der Service Factory) bereitgestellt.
Die Angular-Anwendung kann mit APIs von Drittanbietern kommunizieren, um Daten abzurufen und dem Benutzer anzuzeigen.
In unserem Backend der Knoten.das js-Anwendungsbeispiel beginnt mit einem fest codierten JSON, der verarbeitet und als Antwort verwendet werden kann.
Dieses Backend 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 Front-End-Server, Back-End-Server und Datenbankserver erläutert wurden, zeige ich im Folgenden die Kombination dieser drei Server:
Wenn eine HTTP-Anfrage gestellt wird, wird das Front-End ausgelöst und Angular nimmt die Anfrage entgegen. Die Anforderung wird intern in Angular übergeben, wobei Route eine Anforderung für die Ansicht an View / Template sendet.
View/Template fordert den Controller an. Der Controller erstellt dann eine HTTP-Anforderung an einen RESTful-Endpunkt (Representational State Transfer) auf der Serverseite, der Express / Node ist.js. Die Anforderung wird dann intern mit Express / Node übergeben.js von seiner Route zum Controller / Modell.
Der Controller / das Modell fordert über die Mongoose-API die Interaktion mit dem Datenbankserver mit MongoDB an. MongoDB verarbeitet die Anfrage und beantwortet den Rückruf an Express / Node.js.
Drücken Sie/Node aus.js sendet eine JSON-Antwort an den Angular Controller. Der Winkelregler würde dann mit einer Ansicht antworten.
Szenarioansicht mit Sequenzdiagramm
Wer verwendet es oder was es zeigt:
- Beschreiben Sie Interaktionen zwischen Objekten und zwischen Prozessen
Bei dem oben beschriebenen Szenario greift ein Benutzer auf eine Buchhandlung Anwendung. Wenn der Benutzer die URL eingibt, wird JavaScript ausgeführt und trifft 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 und während der Back-End-Server wartet, werden die Daten abgerufen und als JSON-Antwort an den Front-End-Server gesendet.
Das Frontend hat nun die Daten und die Vorlagenansicht, die dem Benutzer angezeigt werden sollen.
Physische Ansicht mit Bereitstellungsdiagramm
Wer verwendet es und was es zeigt:
- System Engineer
- Topologie
- Kommunikation
Das Bereitstellungsdiagramm zeigt 3 Server: Front-End, Back-End und Datenbank. Im Frontend benötigen wir den Browser, da Angular-Anwendungen browserbasiert sind Webanwendungen.
Der Backend-Server hostet unseren Knoten.js mit Express oben auf dem Knoten.js. In Express haben wir die Anwendung und Mungo darüber. Express übernimmt die Kommunikation sowohl im Front-End als auch in der Datenbank. Der Datenbankserver enthält nur MongoDB. Es verwendet JSON, um serverübergreifend zu kommunizieren.
In unserem ersten Build des MEAN Stacks werden wir lokal mit unserem lokalen Computer (localhost) bereitstellen, um den Front-End-Server, den Back-End-Server und den Datenbankserver bereitzustellen.
Wir verwenden die folgenden Standardports: Angular – port 4200, Node.js / Express – Port 3000 und MongoDB – Port 27017.
Das folgende Diagramm zeigt die Full-Stack-Webanwendung in UML-Notation.
Weiter zur eigentlichen Produktion, die Sache in die Cloud zu migrieren ist unsere Datenbank. Für MongoDB habe ich MongoDB Atlas als Cloud-Lösung gewählt.
Der letzte Schritt zur Produktionsbereitstellung besteht darin, unseren Front-End-Code in Amazon S3 und das Back-End in eine EC2-Instanz mit AWS hochzuladen. Sie würden alle über HTTP / HTTPS-Endpunkte miteinander kommunizieren.
Hier ist ein weiteres Diagramm, das unsere Produktionsbereitstellung ohne UML-Notation zeigt.
Entwicklungsansicht unter Verwendung des Paketdiagramms
Wer verwendet es und was es zeigt:
- Programmierer
- Softwareverwaltung
Die Paketansicht des Angular application 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 des Knotens.die js-Anwendung zeigt, dass alle CRUD-Vorgänge (Controller) wie Abrufen aller Bücher, Abrufen eines Buches, Aktualisieren eines Buches und 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 Book Store-Anwendung zeigte nur eine einzige Klasse namens Book. 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:
Documentation available on my GitHub:
Find me on LinkedIn. =)