Dit artikel is gebaseerd op mijn capstone voor de City University of Seattle. De titel van mijn onderzoek is “Software Documentation and Architectural Analysis of Full Stack Development”. Het doel van mijn onderzoek was het verminderen van de leercurve in het begrijpen van open source projecten en volledige stack ontwikkeling, en ik kies de MEAN Stack.
Ik heb de volgende diagrammen gemaakt, met behulp van Lucidchart, voor een eenvoudiger begrip. Deze UML-diagrammen waren gebaseerd op het 4+1 architectural view model:
- Restaurant analogie
- Procesweergave met Sequentiediagram
- Scenario met Sequentiediagram
- fysieke weergave met Deployment Diagram
- Ontwikkelingsweergave met Pakketdiagram
- logische weergave met Class Diagram
het onderzoek was meer gericht op de implementatie en Request en Response Flow.
The MEAN Stack is a full-stack JavaScript open-source solution. Het bestaat uit MongoDB, Express, hoekig, en Node.js.
het idee erachter is om de veelvoorkomende problemen met het verbinden van deze frameworks op te lossen, een robuust framework op te bouwen om de dagelijkse ontwikkelingsbehoeften te ondersteunen, en ontwikkelaars te helpen betere praktijken te gebruiken tijdens het werken met populaire JavaScript-componenten.
Back-end met Node.js
Node.js is gebouwd voor het verwerken van asynchrone I / O, terwijl JavaScript heeft een event loop ingebouwd voor de client-side. Dit maakt Node.js snel in vergelijking met andere omgevingen. Echter, de event-driven/callback aanpak maakt knooppunt.js moeilijk te leren en debuggen.
Node.js bevat modules zoals Mongoose, dat is een MongoDB object modeling, en de Express web application framework. Door middel van Knooppuntmodules kan abstractie worden bereikt, wat de algehele complexiteit van de gemiddelde stapel vermindert.
Back-end met Express Framework
Express is een minimalistisch en ongeopinioneerd applicatie framework voor Node.js. Het is een laag bovenop knooppunt.js dat is feature-rijk voor web en mobiele ontwikkeling zonder het verbergen van een knooppunt.js functionaliteit.
Front-end met Angular
Angular is een Webontwikkelingsplatform gebouwd in TypeScript dat ontwikkelaars voorziet van robuuste tools voor het maken van de client-kant van webapplicaties.
Het maakt de ontwikkeling van single-page webapplicaties mogelijk waarbij inhoud dynamisch verandert op basis van gebruikersgedrag en voorkeuren. Het beschikt over afhankelijkheid injectie om ervoor te zorgen dat wanneer een component wordt gewijzigd, andere componenten die verband houden met het automatisch worden gewijzigd.
Database met MongoDB
MongoDB is een NoSQL-database die gegevens opslaat in BJSON (binaire Javascript-Objectnotatie).
MongoDB werd de de facto standaard database voor Node.js applicaties om het “JavaScript everywhere” paradigma te vervullen met behulp van JSON (JavaScript Object Notation) om gegevens over verschillende lagen (front-end, back-end, en de database) te verzenden.
nu we die basisprincipes uit de weg hebben, laten we eens kijken naar deze diagrammen.
Restaurant analogie
omdat ik de steile leercurve wilde aanpakken, koos ik voor een restaurant analogie om de gebruiker het proces te laten begrijpen en behouden voor verzoek en antwoord in een volledige stack applicatie.
de klant (eindgebruiker) vraagt zijn bestelling aan via de ober (controller), en de ober overhandigt het verzoek aan de persoon op het ordervenster (service factory).
Deze drie componenten vormen de front-end server. De service fabriek zal degene zijn om te communiceren met de kok (controller) in de back-end. De kok pakt dan de benodigde ingrediënten (data) in de koelkast (databaseserver).
de koelkast zal in staat zijn om het nodige materiaal (gegevens) aan de kok in de back-end. De kok kan nu die gegevens verwerken en terugsturen naar de servicefabriek van de front-end.
de verwerkingsverantwoordelijke (ober) geeft de bereide maaltijd aan de klant (gebruiker). De klant zal nu in staat zijn om de maaltijd te consumeren (data).
Procesweergave met behulp van Sequentiediagram
Wie gebruikt het of wat het toont:
- Integrators
- Performance
- schaalbaarheid
In de Procesweergave toon ik eerst de front-end-server en de back-endserver afzonderlijk en verbind ze vervolgens met de databaseserver.
in het eerste voorbeeld werd een Hoektoepassing geïmplementeerd met hard-gecodeerde JSON in een service.ts bestand (in de Service Factory).
De Hoekapplicatie kan communiceren met API ‘ s van derden om gegevens te verkrijgen en deze aan de gebruiker weer te geven.
In onze back-end, de Node.js applicatie voorbeeld begint met een hard-gecodeerde JSON die kan worden verwerkt en gebruikt als een reactie.
Deze back-end kan worden verbonden met API ‘ s van derden of een databaseserver om de JSON te verkrijgen, te verwerken en terug te sturen naar de aanvrager.
Met de front-end-server, back-end-server en database server processen uitgelegd, laat ik zien dat de combinatie van deze drie servers hieronder:
Als een HTTP-verzoek is ingediend, wordt de front-end zal worden geactiveerd en Hoekige ophalen van de aanvraag. Het verzoek zal intern worden doorgegeven in Hoekige met Route verzenden van een verzoek voor de view to View / Template.
beeld / sjabloon zal de Controller vragen. De Controller maakt vervolgens een HTTP-verzoek naar een Restful (Representational state transfer) eindpunt naar de Server, dat is Express/Node.js. Het verzoek zal dan intern worden doorgegeven met Express / Node.js van zijn Route naar de Controller/Model.
De Controller / Model zal via de Mongoose ODM een verzoek indienen om te communiceren met de databaseserver met MongoDB. MongoDB zal het verzoek verwerken en reageren op de callback naar Express / Node.js.
Express / Node.js stuurt een JSON-reactie naar de Angular Controller. De Hoekregelaar zou dan reageren met een uitzicht.
Scenarioweergave met behulp van Sequentiediagram
Wie gebruikt het of wat het laat zien:
- Beschrijf interacties tussen objecten en tussen processen
het hierboven beschreven scenario omvat een gebruiker toegang tot een boek winkel applicatie. Wanneer de gebruiker de URL invoert, zal JavaScript worden uitgevoerd en zal de router van de front-end server raken, dat is de AppRoutingModule. De AppRoutingModule zal het BooksComponent aanroepen, wat fetchBooks zal laden als de dependency injection.
fetchBooks zal dan een HTTP-aanvraag maken naar de back-end server die een router, controller en model heeft om het verzoek te verwerken en de databaseserver te bevragen.
de databaseserver verwerkt de query en terwijl de back-endserver wacht, zal hij de gegevens ophalen en terugsturen naar de front-endserver als een JSON-antwoord.
de front-end heeft nu de gegevens en de sjabloonweergave om aan de gebruiker te tonen.
fysieke weergave met Inzetdiagram
Wie gebruikt het en wat het laat zien:
- System engineer
- topologie
- communicatie
Het implementatiediagram toont 3 servers: front-end, back-end en database. In de front-end, we vereisen de browser als hoekige toepassingen zijn browser-gebaseerde webapplicaties.
De back-end server host ons knooppunt.js met Express op de top van het knooppunt.js. Uitdrukkelijk, hebben wij de toepassing en mangoest bovenop het. Express verzorgt de communicatie op zowel front-end als database. De database server bevat alleen MongoDB. Het gebruikt JSON om te communiceren tussen servers.
in onze eerste build van de MEAN Stack zullen we lokaal implementeren met behulp van onze lokale machine (localhost) om de front-end server, back-end server en databaseserver te implementeren.
We zullen de volgende standaardpoorten gebruiken: Angular-port 4200, Node.js / Express-poort 3000, en MongoDB-poort 27017.
het diagram hieronder toont de volledige stack-webtoepassing in UML-notatie.
verder gaan naar de werkelijke productie, het ding om te migreren naar de cloud is onze database. Voor MongoDB koos ik MongoDB Atlas als cloudoplossing.
de laatste stap naar productie implementatie is het uploaden van onze front-end code naar Amazon S3 en het uploaden van de back-end in een EC2 instantie met AWS. Ze zouden allemaal met elkaar communiceren met HTTP / HTTPS eindpunten.
Hier is een ander diagram om onze productie-implementatie te laten zien zonder UML-notatie te gebruiken.
Ontwikkelingsweergave met Pakketdiagram
Wie gebruikt het en wat het toont:
- Programmers
- softwarebeheer
De pakketweergave van de Angular applicatie laat zien dat elke hoekcomponent wordt geïmporteerd in de appmodule. AppModule en AppRoutingModule zijn afhankelijk van BooksComponent. Het Boekcomponent is afhankelijk van BookDetailComponentDialog en ApiService.
De pakketweergave van het knooppunt.js-applicatie laat zien dat alle CRUD-bewerkingen (controllers), zoals alle boeken ophalen, een boek ophalen, een boek bijwerken en een boek verwijderen, door de app worden geïmporteerd. Ook, alle CRUD operaties logica bevindt zich in het model boek.
logische weergave met behulp van klasse Diagram
Wie gebruikt het en wat het toont:
- eindgebruiker
- functionaliteit
De book store-toepassing toonde slechts één klasse genaamd Book. De class members zijn: titel, isbn, auteur, Foto en prijs. De methoden zijn: addBook, fetchBooks, fetchBook, updateBook en deleteBook.
de structuur van het modelboek in JSON-formaat.
Hier zijn enkele video ‘ s voor de diagrammen:
Documentation available on my GitHub:
Find me on LinkedIn. =)