denne artikkelen er basert på min hjørnestein For City University Of Seattle. Tittelen på min forskning er «Software Documentation and Architectural Analysis Of Full Stack Development». Målet med min forskning var å redusere læringskurven i å forstå åpen kildekode-prosjekter og full stack utvikling, og jeg velger MEAN Stack.

jeg har laget følgende diagrammer, ved Hjelp Av Lucidchart,for lettere forståelse. DISSE UML-diagrammene var basert på den 4 + 1 arkitektoniske visningsmodellen:

• Restaurant Analogi
• Prosessvisning ved Hjelp Av Sekvensdiagram
• Scenario ved Hjelp Av Sekvensdiagram
• Fysisk Visning ved Hjelp Av Distribusjonsdiagram
• Utviklingsvisning ved Hjelp Av Pakkediagram
• Logisk Visning ved Hjelp av Klassediagram

forskningen var mer fokusert på Distribusjon og Forespørsel og Responsflyt.

MIDDELSTAKKEN er En Full-stack JavaScript åpen kildekode-løsning. Den består Av MongoDB, Express, Angular og Node.js. ideen bak det er å løse de vanlige problemene med å koble disse rammene, bygge et robust rammeverk for å støtte daglige utviklingsbehov, og hjelpe utviklere å bruke bedre praksis mens de jobber med populære JavaScript-komponenter.

Back-end med Node.Js

Node.js er bygget for å håndtere asynkron i / O mens JavaScript har en hendelsessløyfe innebygd for klientsiden. Dette gjør Node.js rask i forhold til andre miljøer. Imidlertid gjør hendelsesdrevet / tilbakeringing Tilnærming Node.js vanskelig å lære og feilsøke.

Node.js inkluderer moduler som Mongoose, som er En MongoDB objektmodellering, Og Express web application framework. Gjennom Nodemoduler kan abstraksjon oppnås, noe som reduserer DEN totale kompleksiteten TIL MIDDELSTAKKEN.

Back-end med Express Framework

Express Er et minimalistisk og uopinionert applikasjonsrammeverk for Node.js. Det er et lag pa Toppen Av Noden.js som er funksjonsrik for web og mobil utvikling uten å skjule Noen Node.js funksjonalitet.

Front-end Med Angular

Angular Er en webutviklingsplattform bygget I TypeScript som gir utviklere robuste verktøy for å lage klientsiden av webapplikasjoner.

det tillater utvikling av enkeltsidede webapplikasjoner der innholdet endres dynamisk basert på brukeradferd og preferanser. Den har avhengighet injeksjon for å sikre at når en komponent er endret, andre komponenter knyttet til det vil bli endret automatisk.

Database Med MongoDB

MongoDB er En NoSQL database som lagrer data I BJSON (Binary JavaScript Object Notation).

MongoDB ble de facto standard database For Node.js programmer for å oppfylle» JavaScript overalt » paradigme ved HJELP AV JSON (JavaScript Object Notation) for å overføre data på tvers av ulike nivåer(front-end, back-end, og databasen).

Nå som vi har fått de grunnleggende ut av veien, la oss se på disse diagrammene.

Restaurant Analogi

Da jeg ønsket å takle den bratte læringskurven, valgte jeg en restaurant analogi for å la brukeren forstå og beholde prosessen for forespørsel og svar i en full stack-applikasjon.

kunden (sluttbruker) ber om bestillingen gjennom servitøren (kontroller), og servitøren overleverer forespørselen til personen i bestillingsvinduet (servicefabrikk).

disse tre komponentene utgjør frontserveren. Servicefabrikken vil være den som kommuniserer med kokken (kontrolleren) i back-end. Kokken vil da ta de nødvendige ingrediensene (data) i kjøleskapet (databaseserver).

kjøleskapet vil kunne levere det nødvendige materialet (data) til kokken i bakenden. Kokken kan nå behandle disse dataene og sende tilbake til servicefabrikken på frontenden.

kontrolleren (servitør) vil overlevere det tilberedte måltidet til kunden (bruker). Kunden vil nå kunne konsumere måltidet(data).

Prosessvisning ved Hjelp Av Sekvensdiagram

hvem bruker Det eller hva det viser:

• Integratorer
• Ytelse
• Skalerbarhet

i prosessvisningen viser jeg først front-end-serveren og back-end-serveren separat og kobler dem deretter sammen med databaseserveren.

i det første eksemplet ble En Vinkelapplikasjon distribuert med hardkodet JSON i en service.ts fil (plassert I Servicefabrikken).

Vinkelprogrammet kan kommunisere med Tredjeparts Apier for å hente data og vise den til brukeren.

I Vår back-end, Noden.js applikasjonseksempel starter med en hardkodet JSON som kan behandles og brukes som svar.

denne bakenden kan kobles til Tredjeparts Apier eller en databaseserver for å hente JSON, behandle DEN og sende den tilbake til forespørselen.

kombinasjonen av disse tre serverne vises nedenfor:

når en http-forespørsel er gjort, vil fronten utløses og angular vil hente forespørselen. Forespørselen vil bli sendt internt I Vinkel Med Rute som sender en forespørsel om visningen Til Visning / Mal.

Vis / Mal vil be Om Kontrolleren. Kontrolleren vil da opprette EN HTTP-forespørsel til et RESTful (Representational state transfer) endepunkt Til Serversiden,Som Er Express / Node.js. Forespørselen vil da bli sendt internt Med Express / Node.js Fra Ruten til Kontrolleren / Modellen.

Kontrolleren / Modellen vil gjøre en forespørsel gjennom Mongoose ODM å samhandle med Databaseserveren Som Har MongoDB. MongoDB vil behandle forespørselen og svare tilbakeringing Til Express / Node.js.

Express / Node.js sender ET json-svar til Vinkelkontrollen. Vinkelkontrollen vil da svare med en visning.

Scenariovisning ved Hjelp Av Sekvensdiagram

hvem bruker Det eller hva det viser:

• Beskriv interaksjoner mellom objekter og mellom prosesser



scenariet beskrevet ovenfor innebærer en bruker tilgang til en bokhandel Program. Når brukeren går INN I URL, JavaScript vil bli kjørt og vil treffe ruteren av front-end server, som Er AppRoutingModule. Den AppRoutingModule vil kalle BooksComponent, som vil laste fetchBooks som sin avhengighet injeksjon. fetchBooks vil da opprette EN HTTP-forespørsel til back-end-serveren som har en ruter, kontroller og modell for å behandle forespørselen og spørre databaseserveren.

databaseserveren behandler spørringen, og med back-end-serveren venter, vil hente dataene og sende den tilbake til front-end-serveren som ET JSON-svar.

front-end vil nå ha data og mal visning for å vise til brukeren.

Fysisk Visning ved Hjelp Av Distribusjonsdiagram

hvem bruker Det og hva det viser:

• Systemingeniør
• Topologi
• Kommunikasjon

distribusjonsdiagrammet viser 3 servere: front-end, back-end og database. I front-end, krever vi nettleseren Som Kantete applikasjoner er nettleserbaserte webapplikasjoner.

back-end-serveren er vert For Noden vår.js Med Express på Toppen Av Node.js. I Express har vi søknaden og Mongoose på toppen av den. Express vil håndtere kommunikasjonen på både front-end og database. Databaseserveren inneholder Bare MongoDB. DEN bruker JSON til å kommunisere på tvers av servere.



i vår første bygge AV MEAN Stack, vil vi distribuere lokalt ved hjelp av vår lokale maskin (localhost) for å distribuere front-end server, back-end server og databaseserver.

Vi bruker følgende standardporter: Angular-port 4200, Node.js / Express-port 3000 Og MongoDB-port 27017.

diagrammet nedenfor viser full stack webapplikasjon I UML notasjon.



Flytte videre til selve produksjonen, ting å migrere til skyen er vår database. For MongoDB valgte Jeg MongoDB Atlas som skyløsningen.



det siste trinnet til produksjonsdistribusjon er å laste opp vår frontend-kode Til Amazon S3 og laste opp back-end i EN EC2-forekomst med AWS. De ville alle kommunisere med HVERANDRE MED HTTP / HTTPS endepunkter.



her er et annet diagram for å vise vår produksjon distribusjon uten Å bruke UML notasjon.



Utviklingsvisning ved Hjelp Av Pakkediagram

hvem bruker Det og hva det viser:

• Programmerere
• Programvarehåndtering

pakkevisningen av angular-programmet viser at hver angular-komponent importeres i appmodulen. AppModule og AppRoutingModule er avhengige Av BooksComponent. BooksComponent er avhengig Av BookDetailComponentDialog Og ApiService.



pakkevisningen av Noden.js programmet viser at alle CRUD operasjoner (kontrollere) som hente alle bøker, hente en bok, oppdatere en bok, og slette en bok er importert av app. Også, all CRUD operations logikken ligger i modellboken.



Logisk Visning ved Hjelp Av Klassediagram

hvem bruker Det og hva det viser:

• Sluttbruker
• Funksjonalitet

bokhandelprogrammet viste bare en enkelt klasse Kalt Bok. Klassemedlemmene er: tittel, isbn, forfatter, bilde og pris. Metodene er: addBook, fetchBooks, fetchBook, updateBook og deleteBook.



modellbokens struktur i json-format.



her er noen videoer for diagrammene:

Documentation available on my GitHub:

clarkngo/cityu_capstone

Contribute to clarkngo/cityu_capstone development by creating an account on GitHub.

clarkngoGitHub



Find me on LinkedIn. =)