denne artikel er baseret på min capstone for City University of Seattle. Titlen på min forskning er “dokumentation og arkitektonisk analyse af fuld Stack udvikling”. Målet med min forskning var at reducere indlæringskurven i forståelsen af open source-projekter og udvikling af fuld stak, og jeg vælger den gennemsnitlige stak.
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:
- Restaurantanalogi
- Procesvisning ved hjælp af sekvensdiagram
- scenarie ved hjælp af sekvensdiagram
- fysisk visning ved hjælp af Implementeringsdiagram
- Udviklingsvisning ved hjælp af Pakkediagram
- logisk visning ved hjælp af klassediagram
forskningen var mere fokuseret på implementering og anmodning og Svarstrøm.
den gennemsnitlige stak er en fuld-stak JavaScript open source-løsning. Den består af MongoDB, udtrykkelig, kantet, og Node.js.
ideen bag det er at løse de almindelige problemer med at forbinde disse rammer, opbygge en robust ramme til støtte for 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 i forhold til andre miljøer. Men begivenheden-drevet / tilbagekald tilgang gør Node.js svært at lære og debug.
Node.js inkluderer moduler som Mongoose, som er en MongoDB objektmodellering, og den udtrykkelige ramme for internetapplikation. Gennem Knudemoduler kan abstraktion opnås, hvilket reducerer den samlede kompleksitet af MIDDELSTAKKEN.
Back-end med udtrykkelig ramme
udtryk er en minimalistisk og ikke-udtalt applikationsramme for Node.js. Det er et lag oven på Node.js, der er funktionsrig til internet-og mobiludvikling uden at skjule nogen knude.JS funktionalitet.
front-end med Angular
Angular er en platform til udvikling af internettet bygget i TypeScript, der giver udviklere robuste værktøjer til at skabe klientsiden af internetapplikationer.
det giver mulighed for udvikling af enkeltsidede applikationer, hvor indholdet ændres dynamisk baseret på brugeradfærd og præferencer. Den har afhængighedsinjektion for at sikre, at når en komponent ændres, ændres andre komponenter, der er relateret til den, automatisk.
Database med MongoDB
MongoDB er en Noskl database, der gemmer data i BJSON (Binary JavaScript Object Notation).
MongoDB blev de facto standard database for Node.js-applikationer til 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 ud af vejen, lad os se på disse diagrammer.
Restaurant analogi
da jeg ønskede at tackle den stejle indlæringskurve, valgte jeg en restaurant analogi for at lade brugeren forstå og bevare processen for anmodning og svar i en fuld stack applikation.
kunden (slutbrugeren) anmoder om deres ordre gennem tjeneren (controller), og tjeneren overleverer anmodningen til personen i ordrevinduet (servicefabrik).
disse tre komponenter udgør frontend-serveren. Servicefabrikken er den, der kommunikerer med cook (controller) i back-end. Kokken griber derefter de nødvendige ingredienser (data) i køleskabet (databaseserver).
køleskabet vil kunne levere det nødvendige materiale (data) til kokken i back-end. Kokken kan nu behandle disse data og sende tilbage til frontendens servicefabrik.
controlleren (tjeneren) overleverer det tilberedte måltid til kunden (brugeren). Kunden vil nu kunne forbruge måltidet (data).
Procesvisning ved hjælp af sekvensdiagram
hvem bruger det eller hvad det viser:
- integratorer
- ydeevne
- skalerbarhed
i procesvisningen viser jeg først front-end-serveren og back-end-serveren separat og forbinder dem derefter sammen med databaseserveren.
i det første eksempel blev en Vinkelapplikation implementeret med hardkodet JSON i en service.ts fil (placeret i Servicefabrikken).
Vinkelapplikationen kan kommunikere med tredjeparts API ‘ er for at hente data og vise dem til brugeren.
i vores back-end, noden.JS-applikationseksempel starter med en hardkodet JSON, der kan behandles og bruges som svar.
denne back-end kan forbindes til tredjeparts API ‘ er eller en databaseserver for at få JSON, behandle den og sende den tilbage til anmoderen.
med front-end server, back-end server og database server processer forklaret, viser jeg kombinationen af disse tre servere nedenfor:
når der foretages en HTTP-anmodning, udløses Front-End, og Angular henter anmodningen. Anmodningen sendes internt i vinkel med rute, der sender en anmodning om visningen til visning/skabelon.
Vis / skabelon vil anmode controlleren. Controlleren opretter derefter en HTTP-anmodning til et RESTful (Representational state transfer) slutpunkt til serversiden, som er Ekspres/Node.js. Anmodningen sendes derefter internt med ekspres / Node.js fra sin rute til controlleren/modellen.
controlleren / modellen vil anmode via Mongoose ODM om at interagere med den databaseserver, der har MongoDB. MongoDB vil behandle anmodningen og besvare tilbagekaldelsen for at udtrykke/Node.js.
udtrykke / Node.js sender et JSON-svar til Vinkelregulatoren. Vinkelregulatoren reagerer derefter med en visning.
Scenarievisning ved hjælp af sekvensdiagram
hvem bruger det, eller hvad det viser:
- beskriv interaktioner mellem objekter og mellem processer
den scenario beskrevet ovenfor involverer en bruger adgang til en bog butik ansøgning. 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 hentebøger som dens afhængighedsinjektion.
fetchBooks opretter derefter en HTTP-anmodning til back-end-serveren, der har en router, controller og model til at behandle anmodningen og forespørge på databaseserveren.
databaseserveren behandler forespørgslen, og med back-end-serveren venter, griber dataene og sender dem tilbage til front-end-serveren som et JSON-svar.
front-end vil nu have dataene og skabelonvisningen, der skal vises til brugeren.
fysisk visning ved hjælp af Implementeringsdiagram
hvem bruger det, og hvad det viser:
- systemingeniør
- topologi
- kommunikation
implementeringsdiagrammet viser 3 servere: front-end, back-end og database. I front-end, vi kræver bro.ser, da Vinkelapplikationer er bro. ser-baserede internetapplikationer.
back-end-serveren er vært for vores Node.js med ekspres på toppen af Node.js. I udtrykkelig, vi har ansøgningen og Mongoose på toppen af det. Hurtig vil håndtere kommunikationen på både front-end og database. Databaseserveren omfatter kun MongoDB. Det bruger JSON til at kommunikere på tværs af servere.
i vores første build af MIDDELSTAKKEN 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 / Ekspres-port 3000 og MongoDB-port 27017.diagrammet nedenfor viser den fulde stack-applikation i UML-notation.
flytning videre til den faktiske produktion, den ting at migrere til skyen er vores database. For MongoDB valgte jeg MongoDB Atlas som cloud-løsningen.
det sidste trin til produktionsudrulning uploader vores frontend-kode til
Her er et andet diagram, der viser vores produktionsudrulning uden brug af UML-notation.
Udviklingsvisning ved hjælp af Pakkediagram
hvem bruger det og hvad det viser:
- programmører
- Programstyring
pakkevisningen af vinkelapplikationen viser, at hver vinkelkomponent importeres i appmodule. AppModule og AppRoutingModule er afhængige af BooksComponent. Bogkomponenten er afhængig af BookDetailComponentDialog og ApiService.
pakkevisningen af noden.js ansøgning viser, at alle CRUD operationer (controllere) såsom hente alle bøger, hente en bog, Opdatere en bog, og slette en bog importeres af app. Også, al CRUD operations-logikken findes i modelbogen.
logisk visning ved hjælp af klassediagram
hvem bruger det og hvad det viser:
- slutbruger
- funktionalitet
book store-applikationen viste kun en enkelt klasse kaldet bog. Klassemedlemmerne er: Titel, isbn, forfatter, billede og pris. Metoderne er: addBook, fetchBooks, fetchBook, updateBook og deleteBook.
modelbogens struktur i JSON-format.
Her er nogle videoer til diagrammerne:
Documentation available on my GitHub:
Find me on LinkedIn. =)