Tento článek je založen na mém hlavním kameni pro městskou univerzitu v Seattlu. Název mého výzkumu je „softwarová dokumentace a architektonická analýza vývoje Full Stack“. Cílem mého výzkumu bylo snížit křivku učení v porozumění projektům s otevřeným zdrojovým kódem a vývoji plného zásobníku a já jsem si vybral střední zásobník.
vytvořil jsem následující diagramy, pomocí Lucidchart, pro snadnější porozumění. Tyto UML diagramy byly založeny na 4+1 architektonické zobrazení modelu:
- Restaurace Analogie
- Proces Zobrazení pomocí Sekvenční Diagram
- Scénář pomocí Sekvenční Diagram
- Fyzické Zobrazení pomocí Diagram Nasazení
- Vývoj Zobrazení pomocí Balíčku Diagram
- Logické Zobrazení pomocí Diagramu tříd
výzkum byl zaměřený na Nasazení a Žádost a Reakce Tok.
průměrný Stack je full-stack JavaScript open-source řešení. Skládá se z MongoDB, Express, Angular a Node.js.
myšlenka je, jak vyřešit běžné problémy s připojením těchto rámců, vybudovat robustní rámec pro podporu každodenní potřeby rozvoje, a pomoci vývojářům lépe využívat postupy při práci s populární JavaScript komponenty.
Back-end s uzlem.JS
uzel.js je postaven pro zpracování asynchronní I / O, zatímco JavaScript má smyčku událostí vestavěný na straně klienta. To dělá uzel.js rychle ve srovnání s jinými prostředími. Nicméně, událost-řízený / callback přístup dělá uzel.js obtížné se učit a ladit.
uzel.js zahrnuje moduly, jako je Mongoose, což je modelování objektů MongoDB, a rámec expresních webových aplikací. Prostřednictvím uzlových modulů lze dosáhnout abstrakce, což snižuje celkovou složitost středního zásobníku.
Back-end s Express Rámec
Express je minimalistický a nevyzpytatelných aplikační framework pro Uzel.js. Jedná se o vrstvu na vrcholu uzlu.js, který je bohatý na funkce pro vývoj webových a mobilních aplikací, aniž by skrýval jakýkoli uzel.funkce js.
Front-end s Úhlovou
Úhlové je webová vývojová platforma postavená na Stroji, který poskytuje vývojářům robustní nástroje pro vytváření klientské straně webových aplikací.
umožňuje vývoj jednostránkových webových aplikací, kde se obsah dynamicky mění na základě chování a preferencí uživatelů. Je vybaven závislost injekce, aby zajistily, že při každé změně komponenty, ostatní komponenty související s ním bude automaticky měnit.
databáze s MongoDB
MongoDB je databáze NoSQL, která ukládá data v BJSON (Binary JavaScript Object Notation).
MongoDB se stal de facto standardní databází uzlu.js aplikace pro splnění paradigmatu „JavaScript everywhere“ pomocí JSON (JavaScript Object Notation) pro přenos dat v různých úrovních (front-end, back-end a databáze).
Nyní, když jsme dostali tyto základy z cesty, podívejme se na tyto diagramy.
analogie Restaurace
Jak jsem chtěl řešit strmou křivku učení, vybral jsem analogii restaurace, aby uživatel pochopil a zachoval proces požadavku a odpovědi v plné aplikaci zásobníku.
zákazník (koncový uživatel) požaduje objednávku prostřednictvím číšníka (správce) a číšník předá požadavek osobě v okně objednávky(servisní továrna).
tyto tři komponenty tvoří front-end server. Servisní továrna bude ta, která bude komunikovat s kuchařem (ovladačem) v back-endu. Kuchař poté uchopí potřebné ingredience (data) do ledničky (databázový server).
ledničky, bude schopen poskytnout potřebný materiál (data) vařit v back-end. Kuchař nyní může tato data zpracovat a odeslat zpět do servisní továrny front-endu.
Správce (číšník) předá připravené jídlo zákazníkovi (uživateli). Zákazník bude nyní moci konzumovat jídlo (data).
Proces Zobrazení pomocí Sekvenční Diagram
Kdo ji používá, nebo co to ukazuje:
- Administrátoři
- Výkon
- Škálovatelnost
V procesu zobrazení, ukážu serveru front-end a back-end server samostatně na první, a pak spojit je dohromady s databází serveru.
v prvním příkladu byla aplikace Angular nasazena s pevně kódovaným JSON v souboru service.ts (umístěném v továrně služeb).
Úhlové aplikace může komunikovat s third-party Api pro získání dat a zobrazit je na uživateli.
V naší back-end, Node.příklad aplikace JS začíná pevně kódovaným JSON, který lze zpracovat a použít jako odpověď.
back-end může být připojen k třetí strany Api nebo databáze serveru získat JSON, zpracovat a odeslat ji zpět žadateli.
S server front-end, back-end server a databázový server zpracovává vysvětlil, ukážu kombinace těchto tří serverů níže:
Když je proveden HTTP požadavek, front-end bude spuštěna a Úhlové bude vyzvednout žádost. Požadavek bude předán interně v Angular s Route zasláním požadavku na zobrazení/šablonu.
View / Template požádá řadič. Řadič pak vytvoří požadavek HTTP na koncový bod RESTful (Representational state transfer) na stranu serveru, což je Express / Node.js. Požadavek bude poté předán interně pomocí Express / Node.js od jeho trasy k regulátoru/modelu.
řadič / Model požádá prostřednictvím Mongoose ODM o interakci s databázovým serverem, který má MongoDB. MongoDB zpracuje požadavek a odpoví na zpětné volání na Express / Node.js.
Express/Node.js pošle odpověď JSON do úhlového regulátoru. Úhlový Ovladač by pak reagoval pohledem.
Scénář, Zobrazení pomocí Sekvenční Diagram
Kdo ji používá, nebo co to ukazuje:
- Popsat interakce mezi objekty a mezi procesy
scénář Je popsáno výše, zahrnuje uživatele, přístup k book store aplikace. Když uživatel zadá adresu URL, spustí se JavaScript a zasáhne router front-end serveru, což je AppRoutingModule. AppRoutingModule zavolá BooksComponent, který načte fetchBooks jako jeho závislost injekce.
fetchBooks pak vytvoří požadavek HTTP na back-end server, který má router, řadič a model pro zpracování požadavku a dotazování na databázový server.
databázový server zpracuje dotaz a při čekání na back-end server uchopí data a odešle je zpět na front-end server jako odpověď JSON.
front-end bude mít nyní data a zobrazení šablony, které se uživateli zobrazí.
fyzické zobrazení pomocí diagramu nasazení
kdo jej používá a co ukazuje:
- Systémový inženýr
- Topologie
- Komunikace
diagram nasazení ukazuje 3 servery: front-end, back-end, a databáze. V přední části požadujeme prohlížeč, protože Úhlové aplikace jsou webové aplikace založené na prohlížeči.
back-end server hostí náš uzel.js s expresem v horní části uzlu.js. V Express, máme aplikaci a Mongoose na vrcholu toho. Express se postará o komunikaci na front-endu I databázi. Databázový server obsahuje pouze MongoDB. Používá JSON pro komunikaci napříč servery.
V naší první build ŘÍCT Zásobníku, budeme nasazení místně pomocí našeho místní počítač (localhost) chcete-li nasadit server front-end, back-end server a databázový server.
budeme používat následující výchozí porty: Angular-port 4200, Node.js / Express-port 3000 a MongoDB-port 27017.
níže uvedený diagram ukazuje webovou aplikaci full stack v notaci UML.
přesuneme-li se dále ke skutečné produkci, je migrací do cloudu naše databáze. Pro MongoDB jsem si vybral MongoDB Atlas jako cloudové řešení.
poslední krok k výrobě nasazení je nahrávání našeho front-end kódu na Amazon S3 a nahrávání back-end v EC2 instanci s AWS. Všichni by spolu komunikovali pomocí koncových bodů HTTP / HTTPS.
Tady je další diagram ukázat naše výrobní nasazení bez použití UML notace.
Vývoj Zobrazení pomocí Balíčku Diagram
Kdo to používá a co to ukazuje:
- Programátoři
- Software pro Řízení
balíček zobrazení Úhlové aplikace ukazuje, že každý Úhlové Komponenty se dováží v AppModule. AppModule a AppRoutingModule jsou závislé na BooksComponent. BooksComponent je závislá na BookDetailComponentDialog a ApiService.
zobrazení balíčku uzlu.aplikace js ukazuje, že všechny operace CRUD (řadiče), jako je načtení všech knih, načtení knihy, Aktualizace knihy a odstranění knihy, jsou importovány aplikací. Taky, veškerá logika operací CRUD je umístěna v knize modelů.
Logická Zobrazit pomocí Diagramu tříd
Kdo to používá a co to ukazuje:
- koncový uživatel
- funkčnost
aplikace knihkupectví představila pouze jednu třídu nazvanou kniha. Členové třídy jsou: název, isbn, autor, obrázek a cena. Metody jsou: addBook, fetchBooks, fetchBook, updateBook a deleteBook.
model Kniha je struktura ve formátu JSON.
Zde jsou některé videa pro diagramy:
Documentation available on my GitHub:
Find me on LinkedIn. =)