den här artikeln är baserad på min huvudsten för City University of Seattle. Titeln på min forskning är”Software Documentation and Architectural Analysis of Full Stack Development”. Målet med min forskning var att minska inlärningskurvan för att förstå open source-projekt och full stackutveckling, och jag väljer MEDELSTACKEN.
Jag har skapat följande diagram, med Lucidchart, för enklare förståelse. Dessa UML-diagram baserades på 4 + 1 arkitektonisk vymodell:
- Restauranganalogi
- Processvy med sekvensdiagram
- Scenario med sekvensdiagram
- fysisk vy med Distributionsdiagram
- Utvecklingsvy med Paketdiagram
- logisk vy med klassdiagram
forskningen var mer fokuserad på distribution och begäran och Svarflöde.
MEDELSTACKEN är en Fullstackad JavaScript-lösning med öppen källkod. Den består av MongoDB, Express, Angular och Node.js. tanken bakom det är att lösa de vanliga problemen med att ansluta dessa ramar, bygga en robust ram för att stödja dagliga utvecklingsbehov och hjälpa utvecklare att använda bättre metoder när de arbetar med populära JavaScript-komponenter.
Back-end med nod.JS
nod.js är byggd för att hantera asynkron I/O medan JavaScript har en händelse loop inbyggd för klientsidan. Detta gör nod.js snabbt jämfört med andra miljöer. Den händelsestyrda / återuppringningsmetoden gör dock nod.js svårt att lära sig och felsöka.
nod.js innehåller moduler som Mongoose, som är en MongoDB-objektmodellering, och Express web application framework. Genom Nodmoduler kan abstraktion uppnås, vilket minskar den totala komplexiteten hos MEDELSTACKEN.
Back-end Med Express Framework
Express är en minimalistisk och oopinionerad applikationsram för Node.js. Det är ett lager ovanpå Node.js som är funktionsrik för webb-och mobilutveckling utan att dölja någon nod.JS funktionalitet.
Front-end med Angular
Angular är en webbutvecklingsplattform inbyggd TypeScript som ger utvecklare robusta verktyg för att skapa klientsidan av webbapplikationer.
det möjliggör utveckling av webbapplikationer med en sida där innehållet ändras dynamiskt baserat på användarbeteende och preferenser. Den har beroendeinjektion för att säkerställa att när en komponent ändras kommer andra komponenter relaterade till den att ändras automatiskt.
databas med MongoDB
MongoDB är en NoSQL-databas som lagrar data i BJSON (Binary JavaScript Object Notation).
MongoDB blev de facto standarddatabasen för Node.js-applikationer för att uppfylla paradigmet ”JavaScript everywhere” med JSON (JavaScript Object Notation) för att överföra data över olika nivåer (front-end, back-end och databasen).
Nu när vi har fått dessa grunder ur vägen, låt oss titta på dessa diagram.
Restauranganalogi
När jag ville ta itu med den branta inlärningskurvan valde jag en restauranganalogi för att låta användaren förstå och behålla processen för begäran och svar i en full stack-applikation.
kunden (slutanvändaren) begär sin beställning via servitören (controller), och servitören överlämnar begäran till personen i orderfönstret (service factory).
dessa tre komponenter utgör front-end-servern. Servicefabriken kommer att vara den som kommunicerar med kocken (styrenheten) i back-end. Kocken tar sedan de nödvändiga ingredienserna (data) i kylen (databasservern).
kylskåpet kommer att kunna tillhandahålla det nödvändiga materialet (data) till kocken i back-end. Kocken kan nu bearbeta dessa data och skicka tillbaka till servicefabriken i front-end.
regulatorn (servitören) överlämnar den färdiga måltiden till kunden (användaren). Kunden kommer nu att kunna konsumera måltiden (data).
Processvy med sekvensdiagram
vem använder det eller vad det visar:
- integratorer
- prestanda
- skalbarhet
i processvyn visar jag först front-end-servern och back-end-servern separat och ansluter dem sedan till databasservern.
i det första exemplet användes en Angular-applikation med hårdkodad JSON i en service.ts – fil (finns i Service Factory).
Angular-applikationen kan kommunicera med tredjeparts API: er för att få data och visa den för användaren.
i vår back-end, noden.js applikationsexempel börjar med en hårdkodad JSON som kan bearbetas och användas som svar.
denna back-end kan anslutas till tredjeparts API: er eller en databasserver för att hämta JSON, bearbeta den och skicka den tillbaka till den som begär det.
med front-end-servern, back-end-servern och databasserverprocesserna förklarade visar jag kombinationen av dessa tre servrar nedan:
När en HTTP-begäran görs kommer front-end att utlösas och angular hämtar begäran. Begäran kommer att skickas internt i vinkel med rutt som skickar en begäran om vyn för att visa/Mall.
visa / mall kommer att begära styrenheten. Styrenheten skapar sedan en HTTP-begäran till en RESTful (Representational state transfer) slutpunkt till serversidan, som är Express/Node.js. Begäran skickas sedan internt med Express / Node.js från dess väg till styrenheten / modellen.
styrenheten / modellen kommer att göra en begäran via Mongoose ODM att interagera med databasservern som har MongoDB. MongoDB kommer att behandla begäran och svara på återuppringning till Express/nod.js.
uttryck / nod.js skickar ett JSON-svar till Vinkelregulatorn. Vinkelstyrenheten skulle då svara med en vy.
Scenariovy med sekvensdiagram
vem använder det eller vad det visar:
- beskriv interaktioner mellan objekt och mellan processer
scenariot beskrivet ovan innebär att en användare får tillgång till en bokhandelsapplikation. När användaren går in i webbadressen kommer JavaScript att köras och kommer att träffa routern på front-end-servern, som är AppRoutingModule. AppRoutingModule kommer att ringa BooksComponent, som kommer att ladda hämtningsböcker som sin beroendeinjektion.
hämtningsböcker skapar sedan en HTTP-begäran till back-end-servern som har en router, kontroller och modell för att behandla begäran och fråga databasservern.
databasservern behandlar frågan, och med back-end-servern som väntar, kommer att ta tag i data och skickade den tillbaka till front-end-servern som ett JSON-svar.
front-end har nu data och mallvyn att visa för användaren.
fysisk vy med hjälp av Distributionsdiagram
vem använder det och vad det visar:
- systemingenjör
- topologi
- kommunikation
distributionsdiagrammet visar 3 servrar: front-end, back-end och databas. I fronten kräver vi webbläsaren eftersom Angular-applikationer är webbläsarbaserade webbapplikationer.
back-end-servern är värd för vår nod.js med Express ovanpå Node.js. I Express har vi applikationen och Mongoose ovanpå den. Express kommer att hantera kommunikationen på både front-end och databas. Databasservern innehåller endast MongoDB. Den använder JSON för att kommunicera över servrar.
i vår första byggnad av MEDELSTACKEN kommer vi att distribuera lokalt med vår lokala maskin (localhost) för att distribuera front-end-servern, back-end-servern och databasservern.
Vi använder följande standardportar: Angular – port 4200, Node.js / Express-port 3000, och MongoDB-port 27017.
diagrammet nedan visar webbapplikationen full stack i UML-notation.
flytta vidare till den faktiska produktionen, saken att migrera till molnet är vår databas. För MongoDB valde jag MongoDB Atlas som molnlösning.
det sista steget till produktionsdistribution är att ladda upp vår front-end-kod till Amazon S3 och ladda upp back-end i en EC2-instans med AWS. De skulle alla kommunicera med varandra med HTTP / HTTPS-slutpunkter.
Här är ett annat diagram för att visa vår produktionsdistribution utan att använda UML-notation.
Utvecklingsvy med hjälp av Paketdiagram
vem använder det och vad det visar:
- programmerare
- Software Management
paketvyn för angular-applikationen visar att varje angular-komponent importeras i appmodulen. AppModule och AppRoutingModule är beroende av BooksComponent. BooksComponent är beroende av BookDetailComponentDialog och ApiService.
Paketvyn för noden.js ansökan visar att alla CRUD operationer (controllers) såsom hämta alla böcker, hämta en bok, uppdatera en bok, och ta bort en bok importeras av appen. Dessutom finns all CRUD-operationslogik i modellboken.
logisk vy med klassdiagram
vem använder det och vad det visar:
- slutanvändare
- funktionalitet
bokhandelsprogrammet visade bara en enda klass som heter bok. Klassdeltagarna är: Titel, isbn, författare, bild och pris. Metoderna är: addBook, fetchBooks, fetchBook, updateBook och deleteBook.
modellbokens struktur i JSON-format.
här är några videor för diagrammen:
Documentation available on my GitHub:
Find me on LinkedIn. =)