Ten artykuł jest oparty na moim kapitale dla City University of Seattle. Tytuł moich badań to „dokumentacja oprogramowania i analiza architektoniczna rozwoju pełnego stosu”. Celem moich badań było zmniejszenie krzywej uczenia się w zrozumieniu projektów open source i rozwoju pełnego stosu, a ja wybieram stos średni.
stworzyłem następujące diagramy, używając Lucidchart, dla łatwiejszego zrozumienia. Te diagramy UML zostały oparte na modelu widoku architektonicznego 4+1:
- analogia restauracji
- Widok procesu za pomocą diagramu sekwencji
- scenariusz za pomocą diagramu sekwencji
- Widok fizyczny za pomocą diagramu wdrażania
- Widok rozwoju za pomocą diagramu pakietów
- Widok logiczny za pomocą diagramu klas
badania koncentrowały się bardziej na wdrożeniu oraz przepływie żądań i odpowiedzi.
The MEAN Stack is a full-stack JavaScript open-source solution. Składa się z MongoDB, Express, Angular i Node.js.
ideą tego rozwiązania jest rozwiązanie typowych problemów związanych z połączeniem tych frameworków, zbudowanie solidnego frameworku wspierającego codzienne potrzeby programistyczne i pomoc programistom w korzystaniu z lepszych praktyk podczas pracy z popularnymi komponentami JavaScript.
Back-end z węzłem.js
js jest zbudowany do obsługi asynchronicznych we / wy, podczas gdy JavaScript ma wbudowaną pętlę zdarzeń po stronie klienta. To tworzy węzeł.js szybki w porównaniu do innych środowisk. Jednak podejście oparte na zdarzeniach / wywołaniu zwrotnym tworzy węzeł.js trudne do nauczenia się i debugowania.
węzeł.js zawiera moduły takie jak Mongoose, który jest modelowaniem obiektowym MongoDB, oraz Express web application framework. Poprzez moduły węzłów można uzyskać abstrakcję, co zmniejsza ogólną złożoność stosu średnich.
Back-end z frameworkiem Express
Express jest minimalistycznym i nieopinionowanym frameworkiem aplikacji dla węzła.js. Jest to warstwa na szczycie węzła.js, który jest bogaty w funkcje do tworzenia stron internetowych i mobilnych bez ukrywania żadnego węzła.funkcjonalność js.
Front-end z Angular
Angular to platforma programistyczna zbudowana w maszynopisie, która zapewnia programistom solidne narzędzia do tworzenia aplikacji internetowych po stronie klienta.
umożliwia tworzenie jednostronicowych aplikacji internetowych, w których zawartość zmienia się dynamicznie w zależności od zachowania i preferencji użytkownika. Posiada funkcję wstrzykiwania zależności, aby zapewnić, że za każdym razem, gdy komponent zostanie zmieniony, inne komponenty z nim związane zostaną zmienione automatycznie.
baza danych z MongoDB
MongoDB jest bazą danych NoSQL, która przechowuje dane w BJSON (binarna notacja obiektów JavaScript).
MongoDB stał się de facto standardową bazą danych dla węzła.aplikacje js spełniające paradygmat „JavaScript everywhere” wykorzystujące JSON (JavaScript Object Notation) do przesyłania danych między różnymi warstwami (front-end, back-end I baza danych).
teraz, gdy już pozbyliśmy się tych podstaw, spójrzmy na te diagramy.
analogia do restauracji
ponieważ chciałem poradzić sobie ze stromą krzywą uczenia się, wybrałem analogię do restauracji, aby umożliwić użytkownikowi zrozumienie i zachowanie procesu żądania i odpowiedzi w aplikacji z pełnym stosem.
klient (użytkownik końcowy) żąda zamówienia za pośrednictwem kelnera (kontrolera), a kelner przekazuje żądanie osobie w oknie zamówienia (fabryka usług).
te trzy komponenty tworzą serwer front-end. Fabryka serwisowa będzie tą, która będzie komunikować się z kucharzem (kontrolerem) w zapleczu. Następnie kucharz pobierze niezbędne składniki (dane) do lodówki (serwer bazy danych).
lodówka będzie w stanie dostarczyć niezbędny materiał (DANE) kucharzowi w zapleczu. Kucharz może teraz przetwarzać te dane i wysyłać je z powrotem do fabryki serwisowej front-endu.
kontroler (kelner) przekaże przygotowany posiłek klientowi (użytkownikowi). Klient będzie mógł teraz spożywać posiłek (dane).
Widok procesu za pomocą diagramu sekwencji
kto go używa lub co pokazuje:
- integratorzy
- wydajność
- skalowalność
w widoku procesu najpierw pokazuję serwer front-end I back-end osobno, a następnie podłączam je razem z serwerem bazy danych.
w pierwszym przykładzie aplikacja Angular została wdrożona z zakodowanym na stałe JSON w plikuservice.ts (znajdującym się w fabryce usług).
aplikacja Angular może komunikować się z interfejsami API innych firm, aby uzyskać Dane i wyświetlić je użytkownikowi.
w naszym zapleczu, węzeł.przykład aplikacji js zaczyna się od zakodowanego na stałe pliku JSON, który może być przetwarzany i używany jako odpowiedź.
Ten back-end może być podłączony do zewnętrznych interfejsów API lub serwera bazy danych, aby uzyskać JSON, przetworzyć go i wysłać z powrotem do żądającego.
po wyjaśnieniu procesów serwera front-end, serwera back-end i serwera bazy danych pokazuję kombinację tych trzech serwerów poniżej:
gdy zostanie wykonane żądanie HTTP, front-end zostanie uruchomiony, a angular odbierze żądanie. Żądanie zostanie przekazane wewnętrznie w Angular z trasą wysyłającą żądanie widoku do View / Template.
View / Template zażąda kontrolera. Następnie kontroler utworzy żądanie HTTP do punktu końcowego RESTful (Representational state transfer) po stronie serwera, którym jest Express/Node.js. Żądanie zostanie przekazane wewnętrznie za pomocą Express / Node.js od jego trasy do kontrolera/modelu.
Kontroler/Model wyśle żądanie za pośrednictwem Mongoose ODM do interakcji z serwerem bazy danych, który ma MongoDB. MongoDB przetworzy żądanie i odpowie na wywołanie zwrotne do Express / Node.js.
Express/Node.js wysyła odpowiedź JSON do kontrolera kątowego. Kontroler kątowy odpowiadałby wtedy widokiem.
Widok scenariusza za pomocą diagramu sekwencji
kto go używa lub co pokazuje:
- opisz interakcje między obiektami i między procesami
scenariusz opisany powyżej użytkownik uzyskuje dostęp do aplikacji księgarni. Gdy użytkownik wprowadzi adres URL, JavaScript zostanie uruchomiony i uderzy w router serwera front-end, który jest AppRoutingModule. AppRoutingModule wywoła komponent BooksComponent, który załaduje fetchBooks jako wstrzykiwanie zależności.
fetchbooks utworzy żądanie HTTP na serwerze zaplecza, który ma router, kontroler i model do przetwarzania żądania i odpytywania serwera bazy danych.
serwer bazy danych przetwarza zapytanie, a gdy serwer back-end czeka, pobierze Dane i wyśle je z powrotem do serwera front-end jako odpowiedź JSON.
front-end będzie teraz miał Dane i widok szablonu do wyświetlenia użytkownikowi.
Widok fizyczny z wykorzystaniem diagramu wdrażania
kto go używa i co pokazuje:
- inżynier systemowy
- Topologia
- Komunikacja
diagram wdrażania przedstawia 3 serwery: front-end, back-end I bazę danych. W front-endzie wymagamy przeglądarki, ponieważ Aplikacje Angular to aplikacje internetowe oparte na przeglądarce.
serwer zaplecza hostuje nasz węzeł.js z ekspresem na szczycie węzła.js. W ekspresowym mamy na nim aplikację i Mangustę. Express zajmie się komunikacją zarówno na front-endzie, jak i w bazie danych. Serwer bazy danych zawiera tylko MongoDB. Używa JSON do komunikacji między serwerami.
w naszej pierwszej kompilacji stosu MEAN będziemy wdrażać lokalnie za pomocą naszej maszyny lokalnej (localhost) do wdrażania serwera front-end, serwera back-end i serwera bazy danych.
będziemy używać następujących portów domyślnych: Angular – port 4200, Node.js / Express-port 3000 i MongoDB-port 27017.
poniższy diagram pokazuje pełną aplikację webową w notacji UML.
przechodząc dalej do rzeczywistej produkcji, rzeczą do migracji do chmury jest nasza baza danych. Dla MongoDB wybrałem MongoDB Atlas jako rozwiązanie chmurowe.ostatnim krokiem do wdrożenia produkcyjnego jest przesłanie naszego kodu front-end do Amazon S3 i przesłanie back-endu w instancji EC2 za pomocą AWS. Wszystkie komunikują się ze sobą za pomocą punktów końcowych HTTP / HTTPS.
oto kolejny schemat, aby pokazać nasze wdrożenie produkcyjne bez użycia notacji UML.
Widok rozwoju za pomocą diagramu pakietów
kto go używa i co pokazuje:
- Programiści
- Zarządzanie oprogramowaniem
widok pakietu aplikacji Angular pokazuje, że każdy komponent Angular jest importowany do appmodule. AppModule i AppRoutingModule są zależne od BooksComponent. Skład książki jest zależny od BookDetailComponentDialog i ApiService.
widok pakietu węzła.aplikacja js pokazuje, że wszystkie operacje CRUD (Kontrolery), takie jak pobieranie wszystkich książek, pobieranie książki, aktualizowanie książki i usuwanie książki, są importowane przez aplikację. Ponadto wszystkie logiki operacji CRUD znajdują się w książce modeli.
Widok logiczny z wykorzystaniem diagramu klas
kto go używa i co pokazuje:
- End-user
- funkcjonalność
aplikacja book store prezentowała tylko jedną klasę o nazwie Book. Członkami klasy są: Tytuł, isbn, autor, zdjęcie i cena. Metody te to: addBook, fetchBooks, fetchBook, updateBook i deleteBook.
struktura książki modelu w formacie JSON.
oto kilka filmów do diagramów:
Documentation available on my GitHub:
Find me on LinkedIn. =)