Acest articol se bazează pe capstone meu pentru City University of Seattle. Titlul cercetării mele este „documentația Software și analiza arhitecturală a dezvoltării stivei complete”. Scopul cercetării mele a fost de a reduce curba de învățare în înțelegerea proiectelor open source și dezvoltarea completă a stivei și aleg stiva medie.
am creat următoarele diagrame, folosind Lucidchart, pentru o înțelegere mai ușoară. Aceste diagrame UML s-au bazat pe modelul de vizualizare arhitecturală 4+1:
- analogie Restaurant
- vizualizare proces folosind diagrama de secvență
- scenariu folosind diagrama de secvență
- vizualizare fizică folosind diagrama de implementare
- vizualizare dezvoltare folosind diagrama de pachete
- vizualizare logică folosind diagrama de clasă
cercetarea a fost mai concentrată pe Implementare și flux de solicitare și răspuns.
stiva medie este o soluție open-source JavaScript Full-stack. Este alcătuit din MongoDB, expres, unghiular și nod.js.
ideea din spatele ei este de a rezolva problemele comune cu conectarea acestor cadre, de a construi un cadru robust pentru a sprijini nevoile zilnice de dezvoltare și de a ajuta dezvoltatorii să utilizeze practici mai bune în timp ce lucrează cu componente JavaScript populare.
Back-end cu nod.js
nod.js este construit pentru manipularea i/O asincron în timp ce JavaScript are o buclă de eveniment built-in pentru client-side. Acest lucru face nod.js rapid în comparație cu alte medii. Cu toate acestea, abordarea bazată pe evenimente/callback face nod.js dificil de a învăța și de depanare.
nod.js include module precum Mongoose, care este o modelare a obiectelor MongoDB și Cadrul de aplicații Web Express. Prin modulele nodului, se poate realiza abstractizarea, ceea ce reduce complexitatea generală a stivei medii.
Back-end cu cadru expres
Express este un cadru de aplicare minimalist și unopinionat pentru nod.js. Este un strat deasupra nodului.js care este bogat în funcții pentru dezvoltarea web și mobilă fără a ascunde niciun nod.funcționalitate js.
Front-end cu Angular
Angular este o platformă de dezvoltare web construită în TypeScript care oferă dezvoltatorilor instrumente robuste pentru crearea părții client a aplicațiilor web.
permite dezvoltarea de aplicații web cu o singură pagină în care conținutul se schimbă dinamic pe baza comportamentului și preferințelor utilizatorului. Acesta dispune de injecție dependență pentru a se asigura că ori de câte ori o componentă este schimbat, alte componente legate de acesta va fi schimbat automat.
baza de date cu MongoDB
MongoDB este o bază de date NoSQL care stochează date în Bjson (Binary JavaScript Object Notation). MongoDB a devenit baza de date standard de facto pentru Node.aplicații js pentru a îndeplini paradigma „JavaScript everywhere” folosind JSON (JavaScript Object Notation) pentru a transmite date pe diferite niveluri (front-end, back-end și baza de date).
acum, că am luat aceste elemente de bază din drum, să ne uităm la aceste diagrame.
Restaurant analogie
așa cum am vrut să abordeze curba de învățare abruptă, am ales o analogie restaurant pentru a permite utilizatorului să înțeleagă și să păstreze procesul de cerere și răspuns într-o aplicație stivă completă.
Clientul (Utilizatorul final) solicită comanda prin intermediul chelnerului (controlor), iar chelnerul predă cererea persoanei de la fereastra comenzii (fabrica de service).
aceste trei componente alcătuiesc serverul front-end. Fabrica de service va fi cea care va comunica cu bucătarul (controlerul) în back-end. Bucătarul va apuca apoi ingredientele necesare (date) în frigider (server de baze de date).
frigider va fi în măsură să furnizeze materialul necesar (date) pentru a găti în back-end. Bucătarul poate procesa acum aceste date și trimite înapoi la fabrica de service a front-end-ului.
controlorul (chelnerul) va preda masa pregătită Clientului (Utilizatorului). Clientul va putea acum să consume masa (date).
vizualizare proces folosind diagrama de secvență
cine îl folosește sau ce arată:
- integratori
- performanță
- scalabilitate
în vizualizarea procesului, arăt serverul front-end și serverul back-end separat la început și apoi conectați-le împreună cu serverul bazei de date.
în primul exemplu, o aplicație unghiulară a fost implementată cu JSON codat într-un fișier service.ts (situat în fabrica de Service).
aplicația Angular poate comunica cu API-uri terțe pentru a obține date și a le afișa utilizatorului.
În back-end-ul nostru, nodul.exemplu de aplicare js începe cu un JSON greu codificate, care pot fi procesate și utilizate ca răspuns.
Acest back-end poate fi conectat la API-uri terțe sau la un server de baze de date pentru a obține JSON, a-l procesa și a-l trimite înapoi solicitantului.
cu serverul front-end, serverul back-end și procesele serverului de baze de date explicate, arăt combinația acestor trei servere mai jos:
atunci când se face o cerere HTTP, front-end va fi declanșat și angular va ridica cererea. Cererea va fi transmisă intern în unghiular cu ruta care trimite o cerere pentru vizualizare pentru vizualizare/șablon.
View / Template va solicita controlorului. Controlerul va crea apoi o cerere HTTP către un punct final RESTful (Representational state transfer) pe partea serverului, care este Express/Node.js. Cererea va fi apoi transmisă intern cu Express / Node.js de la traseul său către controler / Model.
controlerul / modelul va face o cerere prin Mongoose ODM pentru a interacționa cu serverul de baze de date care are MongoDB. MongoDB va procesa cererea și va răspunde la apel invers la Express/Node.js.
expres / nod.js trimite un răspuns JSON la controlerul unghiular. Controlerul unghiular ar răspunde apoi cu o vedere.
vizualizare scenariu folosind diagrama de secvență
cine îl folosește sau ce arată:
- descrieți interacțiunile dintre obiecte și între procese
scenariul descris mai sus implică un utilizator care accesează o aplicație de magazin de cărți. Când utilizatorul introduce adresa URL, JavaScript va fi rulat și va lovi routerul serverului front-end, care este AppRoutingModule. AppRoutingModule va apela BooksComponent, care va încărca fetchBooks ca injecție de dependență. fetchBooks va crea apoi o cerere HTTP către serverul back-end care are un router, un controler și un model pentru a procesa cererea și a interoga serverul bazei de date.
serverul bazei de date procesează interogarea și, cu serverul back-end în așteptare, va prelua datele și le va trimite înapoi la serverul front-end ca răspuns JSON.
front-end va avea acum datele și vizualizarea șablon pentru a arăta utilizatorului.
vizualizare fizică folosind diagrama de implementare
cine o folosește și ce arată:
- inginer de sistem
- topologie
- comunicații
diagrama de implementare prezintă 3 servere: front-end, back-end și bază de date. În front-end, avem nevoie de browser-ul ca aplicații Angular sunt aplicații web bazate pe browser.
serverul back-end găzduiește nodul nostru.js cu Express pe partea de sus a nodului.js. În Express, avem aplicația și Mongoose pe partea de sus a acesteia. Express va gestiona comunicarea atât pe front-end, cât și pe baza de date. Serverul de baze de date include numai MongoDB. Acesta utilizează JSON pentru a comunica între servere.
în prima noastră construcție a stivei medii, vom implementa local folosind mașina noastră locală (localhost) pentru a implementa serverul front-end, serverul back-end și serverul bazei de date.
vom folosi următoarele porturi implicite: Angular – port 4200, Node.js / Express-port 3000, și MongoDB – port 27017.
diagrama de mai jos prezintă aplicația web Full stack în notație UML.
Mergând mai departe la producția reală, lucrul de migrat în cloud este baza noastră de date. Pentru MongoDB, am ales MongoDB Atlas ca soluție cloud.
ultimul pas pentru implementarea producției este încărcarea codului nostru front-end pe Amazon S3 și încărcarea back-end-ului într-o instanță EC2 cu AWS. Toți comunicau între ei cu puncte finale HTTP / HTTPS.
Iată o altă diagramă pentru a arăta implementarea noastră de producție fără a utiliza notația UML.
vizualizare dezvoltare folosind diagrama pachetului
cine îl folosește și ce arată:
- programatori
- gestionare Software
vizualizarea pachetului aplicației Angular arată că fiecare componentă unghiulară este importată în appmodule. AppModule și AppRoutingModule sunt dependente de BooksComponent. BooksComponent este dependentă de BookDetailComponentDialog și ApiService.
vizualizarea pachetului nodului.aplicația js arată că toate operațiunile crude (controlere), cum ar fi preluarea tuturor cărților, preluarea unei cărți, actualizarea unei cărți și ștergerea unei cărți sunt importate de aplicație. De asemenea, toate logica operațiunilor CRUD se află în cartea de model.
vizualizare logică folosind diagrama de clasă
cine o folosește și ce arată:
- utilizator final
- funcționalitate
aplicația book store a prezentat doar o singură clasă numită carte. Membrii clasei sunt: Titlu, isbn, autor, imagine și preț. Metodele sunt: addBook, fetchBooks, fetchBook, updateBook și deleteBook.
structura cărții model în format JSON.
iată câteva videoclipuri pentru diagrame:
Documentation available on my GitHub:
Find me on LinkedIn. =)