Vil du forstå MEAN Stack hurtigt? Her er dokumentation med nyttige diagrammer.

Denne artikel er baseret på min hovedsten til City University of Seattle. Titlen på min forskning er "Software Documentation and Architectural Analysis of Full Stack Development". Målet med min forskning var at reducere indlæringskurven i forståelse af open source-projekter og fuld stack-udvikling, og jeg vælger MEAN Stack.

Jeg har oprettet følgende diagrammer ved hjælp af Lucidchart for lettere forståelse. Disse UML-diagrammer var baseret på 4 + 1-arkitektonisk visningsmodel:

  • Restaurant Analogy
  • Processvisning ved hjælp af sekvensdiagram
  • Scenarie ved hjælp af sekvensdiagram
  • Fysisk visning ved hjælp af implementeringsdiagram
  • Udviklingsvisning ved hjælp af pakke diagram
  • Logisk visning ved hjælp af klassediagram

Forskningen var mere fokuseret på implementering og anmodning og responsflow.

BETYD stak

MEAN Stack er en open-source-JavaScript-open-source-løsning. Den består af MongoDB, Express, Angular og Node.js.

Ideen bag det er at løse de almindelige problemer med at forbinde disse rammer, opbygge en robust ramme til at understøtte daglige udviklingsbehov og hjælpe udviklere med at bruge bedre praksis, mens de arbejder med populære JavaScript-komponenter.

Back-end med Node.js

Node.js er bygget til håndtering af asynkron I / O, mens JavaScript har en hændelsessløjfe indbygget til klientsiden. Dette gør Node.js hurtigt sammenlignet med andre miljøer. Den hændelsesdrevne / tilbagekaldstilgang gør Node.js imidlertid vanskelig at lære og fejle.

Node.js inkluderer moduler som Mongoose, som er en MongoDB-objektmodellering, og Express webapplikationsrammen. Gennem nodemoduler kan abstraktion opnås, hvilket reducerer den samlede kompleksitet af MEAN-stakken.

Back-end med Express Framework

Express er en minimalistisk og uopinioneret applikationsramme for Node.js. Det er et lag oven på Node.js, der er funktionsrige til web- og mobiludvikling uden at skjule nogen Node.js-funktionalitet.

Front-end med kantet

Angular er en webudviklingsplatform indbygget i TypeScript, der giver udviklere robuste værktøjer til at oprette klientsiden af ​​webapplikationer.

Det giver mulighed for udvikling af enkeltsides webapplikationer, hvor indhold ændres dynamisk baseret på brugeradfærd og præferencer. Den har afhængighedsindsprøjtning for at sikre, at når en komponent ændres, ændres andre komponenter, der er relateret til den automatisk.

Database med MongoDB

MongoDB er en NoSQL-database, der gemmer data i BJSON (Binary JavaScript Object Notation).

MongoDB blev de facto-standarddatabasen for Node.js-applikationer for at opfylde "JavaScript overalt" -paradigmet ved hjælp af JSON (JavaScript Object Notation) til at overføre data på tværs af forskellige niveauer (front-end, back-end og databasen).

Nu hvor vi har fået disse grundlæggende af vejen, lad os se på disse diagrammer.

Restaurant Analogy

Da jeg ønskede at tackle den stejle indlæringskurve, valgte jeg en restaurantanalogi for at lade brugeren forstå og fastholde processen til anmodning og svar i en fuld stak-applikation.

Kunden (slutbruger) anmoder om deres ordre gennem tjeneren (controller), og tjeneren afleverer anmodningen til personen i ordrevinduet (servicefabrik).

Disse tre komponenter udgør front-end-serveren. Servicefabrikken kommunikerer med kokken (controller) i back-end. Kokken henter derefter de nødvendige ingredienser (data) i køleskabet (databaseserver).

Køleskabet vil være i stand til at levere det nødvendige materiale (data) til kokken i bagenden. Kokken kan nu behandle disse data og sende tilbage til frontendens servicefabrik.

Den registeransvarlige (tjeneren) afleverer det tilberedte måltid til kunden (brugeren). Kunden kan nu forbruge måltidet (data).

Processvisning ved hjælp af sekvensdiagram

Hvem bruger det, eller hvad det viser:

  • Integratorer
  • Ydeevne
  • Skalerbarhed

I procesvisningen viser jeg front-end-serveren og back-end-serveren først, og forbinder dem derefter sammen med databaseserveren.

I det første eksempel blev en vinkelapplikation implementeret med hardkodet JSON i en service.tsfil (placeret i servicefabrikken).

Angular-applikationen kan kommunikere med tredjeparts-API'er for at hente data og vise dem for brugeren.

I vores back-end starter Node.js-applikationseksemplet med en hårdkodet JSON, der kan behandles og bruges som et svar.

Denne back-end kan tilsluttes tredjeparts-API'er eller en databaseserver for at hente JSON, behandle den og sende den tilbage til rekvirenten.

Når front-server, back-end-server og databaseserverprocesser er forklaret, viser jeg kombinationen af ​​disse tre servere nedenfor:

Når der foretages en HTTP-anmodning, udløses frontend, og Angular afhenter anmodningen. Anmodningen videregives internt i Angular med Route, der sender en anmodning om visningen til View / Template.

View / Template vil anmode controlleren. Controlleren opretter derefter en HTTP-anmodning til et RESTful (repræsentativ tilstandsoverførsel) slutpunkt til serversiden, som er Express / Node.js. Anmodningen sendes derefter internt med Express / Node.js fra dens rute til controlleren / modellen.

Controlleren / modellen fremsætter en anmodning gennem Mongoose ODM om at interagere med den databaseserver, der har MongoDB. MongoDB behandler anmodningen og besvarer tilbagekaldet til Express / Node.js.

Express / Node.js sender et JSON-svar til Angular Controller. Vinkelkontrolleren svarer derefter med en visning.

Scenariovisning ved hjælp af sekvensdiagram

Hvem bruger det, eller hvad det viser:

  • Beskriv interaktioner mellem objekter og mellem processer

Scenariet beskrevet ovenfor involverer en bruger, der får adgang til en bogbutikapplikation. Når brugeren indtaster URL'en, køres JavaScript og rammer routeren på front-end-serveren, som er AppRoutingModule. AppRoutingModule kalder BooksComponent, som indlæser fetchBooks som dens afhængighedsinjektion.

fetchBooks opretter derefter en HTTP-anmodning til back-end-serveren, der har en router, controller og model til behandling af anmodningen og forespørgsel på databaseserveren.

Databaseserveren behandler forespørgslen, og når back-end-serveren venter, vil hente dataene og sende dem tilbage til front-end-serveren som et JSON-svar.

Frontend har nu dataene og skabelonvisningen, der skal vises for brugeren.

Fysisk visning ved hjælp af implementeringsdiagram

Hvem bruger det, og hvad det viser:

  • System ingeniør
  • Topologi
  • Kommunikation

Implementeringsdiagrammet viser 3 servere: front-end, back-end og database. I frontend-en kræver vi browseren, da Angular-applikationer er browserbaserede webapplikationer.

Back-end-serveren er vært for vores Node.js med Express oven på Node.js. I Express har vi applikationen og Mongoose oven på den. Express håndterer kommunikationen på både front-end og database. Databaseserveren inkluderer kun MongoDB. Det bruger JSON til at kommunikere på tværs af servere.

I vores første build af MEAN Stack implementerer vi lokalt ved hjælp af vores lokale maskine (localhost) til at implementere front-end-serveren, back-end-serveren og databaseserveren.

Vi bruger følgende standardporte: Angular - port 4200, Node.js / Express - port 3000 og MongoDB - port 27017.

Diagrammet nedenfor viser den fulde stak-webapplikation i UML-notation.

Når vi bevæger os videre til faktisk produktion, er vores database at migrere til skyen. For MongoDB valgte jeg MongoDB Atlas som cloud-løsning.

Det sidste trin til implementering af produktionen er at uploade vores front-end-kode til Amazon S3 og uploade back-end i en EC2-instans med AWS. De vil alle kommunikere til hinanden med HTTP / HTTPS-slutpunkter.

Her er et andet diagram, der viser vores produktionsinstallation uden brug af UML-notation.

Udviklingsvisning ved hjælp af pakke diagram

Hvem bruger det, og hvad det viser:

  • Programmører
  • Software Management

Pakkeoversigten til applikationen Angular viser, at alle kantede komponenter importeres til AppModule. AppModule og AppRoutingModule er afhængige af BooksComponent. BooksComponent er afhængig af BookDetailComponentDialog og ApiService.

Pakkeoversigten til Node.js-applikationen viser, at alle CRUD-operationer (controllere) såsom at hente alle bøger, hente en bog, opdatere en bog og slette en bog importeres af appen. Også al CRUD-operationelogik findes i modelbogen.

Logisk visning ved hjælp af klassediagram

Hvem bruger det, og hvad det viser:

  • Slutbruger
  • Funktionalitet

Boghandlerapplikationen viste kun en enkelt klasse kaldet Book. Klassemedlemmerne er: titel, isbn, forfatter, billede og pris. Metoderne er: addBook, fetchBooks, fetchBook, updateBook og deleteBook.

Model Bogens struktur i JSON-format.

Her er nogle videoer til diagrammerne:

Dokumentation tilgængelig på min GitHub:

clarkngo / cityu_capstone Bidrag til clarkngo / cityu_capstone udvikling ved at oprette en konto på GitHub. clarkngo GitHub

Find mig på LinkedIn. =)