Ez a cikk a Seattle-i Városi Egyetem kidolgozásán alapul. Kutatásom címe: “a Full Stack fejlesztés Szoftverdokumentációja és építészeti elemzése”. Kutatásom célja az volt, hogy csökkentsem a tanulási görbét a nyílt forráskódú projektek megértésében és a full stack fejlesztésben, és a MEAN Stack-et választom.
a következő diagramokat hoztam létre a Lucidchart használatával a könnyebb megértés érdekében. Ezek az UML diagramok a 4+1 építészeti nézet modellen alapultak:
- étterem analógia
- Folyamatnézet Sorrenddiagram használatával
- forgatókönyv Szekvenciadiagram használatával
- fizikai nézet telepítési Diagram használatával
- fejlesztési nézet Csomagdiagram használatával
- logikai nézet Osztálydiagram használatával
a kutatás inkább a telepítésre, a kérés és a válasz áramlására összpontosított.
Az átlagos verem egy teljes veremű JavaScript nyílt forráskódú megoldás. MongoDB, Express, Angular és Node.js.
az ötlet mögött az, hogy megoldja a közös problémák összekapcsolásával ezeket a keretrendszereket, építeni egy robusztus keretrendszer támogatja a napi fejlesztési igényeket, és segít a fejlesztők használni a jobb gyakorlatokat, miközben dolgozik a népszerű JavaScript komponenseket.
Back-end csomóponttal.js
csomópont.js épül kezelésére aszinkron I / O, míg a JavaScript egy esemény hurok beépített a kliens oldalon. Ez teszi csomópont.js gyors más környezetekhez képest. Az eseményvezérelt / visszahívási megközelítés azonban csomópontot hoz létre.js nehéz megtanulni és hibakeresés.
csomópont.a js olyan modulokat tartalmaz, mint a Mongoose, amely egy MongoDB objektum modellezés, valamint az Express web application framework. A Csomópontmodulokon keresztül absztrakció érhető el, ami csökkenti az átlagos verem általános összetettségét.
back-end Express Framework
Express egy minimalista és unopinated alkalmazás keretrendszer Node.js. Ez egy réteg a csomópont tetején.js, amely funkciókban gazdag webes és mobil fejlesztési elrejtése nélkül minden csomópont.js funkcionalitás.
Front-end Angular
Angular egy Webfejlesztő platform beépített TypeScript, amely a fejlesztők robusztus eszközök létrehozása a kliens oldalon a webes alkalmazások.
lehetővé teszi egyoldalas webes alkalmazások fejlesztését, ahol a tartalom dinamikusan változik a felhasználói viselkedés és preferenciák alapján. Jellemzője a függőség befecskendezése annak biztosítására, hogy amikor egy komponenst megváltoztatnak, a hozzá kapcsolódó egyéb összetevők automatikusan megváltozzanak.
Adatbázis MongoDB
MongoDB egy NoSQL adatbázis, amely tárolja az adatokat BJSON (bináris JavaScript Object Notation).
MongoDB lett a de facto standard Adatbázis Node.js alkalmazások a “JavaScript everywhere” paradigma teljesítéséhez a JSON (JavaScript Object Notation) használatával, hogy adatokat továbbítson a különböző szinteken (front-end, back-end és az adatbázis).
most, hogy ezeket az alapokat eltávolítottuk az útból, nézzük meg ezeket a diagramokat.
étterem analógia
mivel meg akartam oldani a meredek tanulási görbét, egy éttermi analógiát választottam, hogy a felhasználó megértse és megőrizze a kérés és válasz folyamatát egy teljes verem alkalmazásban.
az ügyfél (végfelhasználó) a pincéren (vezérlőn) keresztül kéri megrendelését, a pincér pedig átadja a kérést a rendelési ablakban lévő személynek (szerviz gyár).
Ez a három összetevő alkotja a front-end szervert. A Szolgáltató gyár lesz az, aki kommunikál a szakács (vezérlő) a back-end. A szakács ezután megragadja a szükséges összetevőket (adatokat) a hűtőben (adatbázis-kiszolgáló).
a hűtőszekrény képes lesz a szükséges anyagokat (adatokat) biztosítani a szakácsnak a háttérben. A szakács most feldolgozhatja ezeket az adatokat, és visszaküldheti a kezelőfelület szervizgyárába.
az adatkezelő (pincér) átadja az elkészített ételt az ügyfélnek (felhasználónak). Az ügyfél most képes lesz fogyasztani az ételt (adatok).
folyamat nézet Sorrenddiagram segítségével
Ki használja, vagy mit mutat:
- integrátorok
- teljesítmény
- skálázhatóság
a folyamat nézetben először külön mutatom meg a front-end szervert és a back-end szervert, majd összekapcsolom őket az adatbázis szerverrel.
az első példában egy Angular alkalmazást keményen kódolt JSON-val telepítettünk egy service.ts fájlba (a Szervizgyárban található).
az Angular alkalmazás képes kommunikálni harmadik féltől származó API-kkal, hogy adatokat szerezzen és megjelenítse azokat a felhasználó számára.
a háttérben, a csomópont.a JS alkalmazási példa egy kódolt JSON-nal kezdődik, amely feldolgozható és válaszként használható.
Ez a back-end csatlakoztatható harmadik féltől származó API-khoz vagy egy adatbázis-kiszolgálóhoz, hogy megszerezze a JSON-t, feldolgozza és visszaküldje a kérelmezőnek.
a front-end szerver, a back-end szerver és az adatbázis szerver folyamatok ismertetésével az alábbiakban bemutatom a három szerver kombinációját:
HTTP kérés esetén a kezelőfelület aktiválódik, az Angular pedig felveszi a kérést. A kérés kerül átadásra belsőleg szögletes útvonal küld egy kérést a nézetet, hogy megtekinthesse/sablon.
nézet/sablon kéri a vezérlőt. A vezérlő ezután létrehoz egy HTTP kérést egy RESTful (Representational state transfer) végponthoz a szerver oldalra, amely Express/Node.js. A kérést ezután belsőleg továbbítják az Express / Node segítségével.js az útvonaltól a vezérlőhöz / modellhez.
a vezérlő/modell kérést fog tenni a Mongoose ODM-en keresztül, hogy kölcsönhatásba lépjen a MongoDB-vel rendelkező adatbázis-kiszolgálóval. A MongoDB feldolgozza a kérést, és válaszol a visszahívásra az Express/Node-nak.js.
expressz / csomópont.a js JSON választ küld a Szögvezérlőnek. A szögletes vezérlő ezután kilátással válaszolna.
forgatókönyv nézet Sorrenddiagram használatával
Ki használja, vagy mit mutat:
- írja le az objektumok és folyamatok közötti kölcsönhatásokat
a forgatókönyv a fent leírtak szerint a felhasználó hozzáfér egy könyvesbolt alkalmazáshoz. Amikor a felhasználó beírja az URL-t, a JavaScript fut, és eléri a front-end szerver útválasztóját, amely az AppRoutingModule. Az AppRoutingModule felhívja a BooksComponent-et, amely függőségi injekcióként betölti a fetchBooks-ot. a
fetchBooks ezután létrehoz egy HTTP kérést a háttérkiszolgálónak, amely rendelkezik útválasztóval, vezérlővel és modellel a kérés feldolgozásához és az adatbáziskiszolgáló lekérdezéséhez.
az adatbázis-kiszolgáló feldolgozza a lekérdezést, és a back-end szerver várakozik, megragadja az adatokat, és JSON válaszként visszaküldi a front-end szervernek.
a front-end most már az adatok és a sablon nézet, hogy mutassa meg a felhasználónak.
fizikai nézet a telepítési Diagram használatával
Ki használja és mit mutat:
- rendszermérnök
- topológia
- kommunikáció
a telepítési diagram 3 kiszolgálót mutat: front-end, back-end és adatbázis. A kezelőfelületen szükségünk van a böngészőre, mivel az Angular alkalmazások böngésző alapú webes alkalmazások.
a back-end szerver tárolja a Csomópontunkat.js expressz a csomópont tetején.js. Az Expresszben az alkalmazás és a mongúz van a tetején. Az Express kezeli a kommunikációt mind a front-end, mind az adatbázisban. Az adatbázis-kiszolgáló csak a MongoDB-t tartalmazza. A JSON-t használja a kiszolgálók közötti kommunikációhoz.
Az átlagos verem első összeállításában helyileg telepítjük a helyi gépünket (localhost) a front-end szerver, a back-end szerver és az adatbázis szerver telepítésére.
a következő alapértelmezett portokat fogjuk használni: Angular – port 4200, Node.js / Express-port 3000 és MongoDB-port 27017.
az alábbi ábra a teljes verem webalkalmazást mutatja UML jelöléssel.
a tényleges termelés felé haladva a felhőbe való áttérés az adatbázisunk. A MongoDB esetében a MongoDB Atlas-t választottam felhőmegoldásként.
a gyártás telepítésének utolsó lépése a front-end kódunk feltöltése az Amazon S3-ra, majd a háttér feltöltése egy EC2 példányban AWS-sel. Mindegyik HTTP / HTTPS végpontokkal kommunikálna egymással.
itt van egy másik diagram, amely bemutatja a termelés telepítését UML jelölés használata nélkül.
fejlesztési nézet a Csomagdiagram használatával
Ki használja és mit mutat:
- programozók
- Szoftverkezelés
az Angular alkalmazás csomagnézete azt mutatja, hogy minden Angular komponens importálva van az appmodule-ban. AppModule és AppRoutingModule függ BooksComponent. A BooksComponent függ BookDetailComponentDialog és ApiService.
a csomópont csomagnézete.a js alkalmazás azt mutatja, hogy az összes CRUD műveletet (vezérlőt), például az összes könyv lekérését, a könyv lekérését, a könyv frissítését és a könyv törlését az alkalmazás importálja. Ezenkívül az összes CRUD művelet logikája a modellkönyvben található.
logikai nézet Osztálydiagram használatával
Ki használja és mit mutat:
- végfelhasználó
- funkcionalitás
a könyvesbolt alkalmazás csak egy könyv nevű osztályt mutatott be. Az osztály tagjai: cím, isbn, szerző, kép és ár. A módszerek a következők: addBook, fetchBooks, fetchBook, updateBook és deleteBook.
a modellkönyv szerkezete JSON formátumban.
íme néhány videó a diagramokhoz:
Documentation available on my GitHub:
Find me on LinkedIn. =)