Искате ли бързо да разберете стека MEAN? Ето документация с полезни диаграми.

Тази статия се основава на моя основен камък за градския университет в Сиатъл. Заглавието на моето изследване е "Софтуерна документация и архитектурен анализ на разработването на пълен стек". Целта на моето изследване беше да се намали кривата на обучение при разбиране на проекти с отворен код и цялостно развитие на стека и аз избирам стека MEAN.

Създал съм следните диаграми, използвайки Lucidchart, за по-лесно разбиране. Тези UML диаграми се основават на модела на архитектурен изглед 4 + 1:

  • Ресторант Аналогия
  • Изглед на процеса с помощта на диаграма на последователността
  • Сценарий, използващ диаграма на последователността
  • Физически изглед с помощта на диаграма за разполагане
  • Изглед за разработка с помощта на диаграмата на пакета
  • Логически изглед с помощта на диаграма на класа

Изследването беше по-фокусирано върху внедряване и поток на заявки и отговори.

СРЕДСТВО Стек

MEAN Stack е пълно стеково решение с отворен код за JavaScript. Състои се от MongoDB, Express, Angular и Node.js.

Идеята зад нея е да се решат често срещаните проблеми при свързването на тези рамки, да се изгради стабилна рамка, която да поддържа ежедневните нужди от развитие и да помогне на разработчиците да използват по-добри практики, докато работят с популярни JavaScript компоненти.

Back-end с Node.js

Node.js е създаден за обработка на асинхронни I / O, докато JavaScript има вграден цикъл на събития за клиентската страна. Това прави Node.js бърз в сравнение с други среди. Въпреки това подходът, управляван от събития / обратно извикване, прави Node.js труден за изучаване и отстраняване на грешки.

Node.js включва модули като Mongoose, който е MongoDB обектно моделиране, и рамката за уеб приложения Express. Чрез модули Node може да се постигне абстракция, което намалява общата сложност на стека MEAN.

Back-end с Express Framework

Express е минималистична и неограничена рамка за приложения за Node.js. Това е слой върху Node.js, който е богат на функции за уеб и мобилно разработване, без да крие функционалността на Node.js

Преден край с ъглова

Angular е платформа за уеб разработка, вградена в TypeScript, която предоставя на разработчиците стабилни инструменти за създаване на клиентската страна на уеб приложения.

Тя позволява разработването на уеб страници с една страница, където съдържанието се променя динамично въз основа на поведението и предпочитанията на потребителите. Той разполага с инжектиране на зависимост, за да гарантира, че когато компонентът се променя, другите компоненти, свързани с него, ще се променят автоматично.

База данни с MongoDB

MongoDB е база данни NoSQL, която съхранява данни в BJSON (двоична JavaScript нотация на обект).

MongoDB се превърна в де факто стандартната база данни за приложения Node.js, за да изпълни парадигмата „JavaScript навсякъде“, използвайки JSON (JavaScript Object Notation) за предаване на данни през различни нива (отпред, отзад и от базата данни).

Сега, след като отстранихме тези основи, нека разгледаме тези диаграми.

Ресторант Аналогия

Тъй като исках да се справя със стръмната крива на обучение, избрах аналогия на ресторанта, за да позволя на потребителя да разбере и запази процеса за заявка и отговор в приложение за пълен стек.

Клиентът (краен потребител) иска своята поръчка чрез сервитьора (контролера), а сервитьорът предава заявката на лицето в прозореца на поръчката (фабрика за услуги).

Тези три компонента съставляват предния сървър. Заводът за услуги ще комуникира с готвача (контролера) в задната част. След това готвачът ще вземе необходимите съставки (данни) в хладилника (сървъра на базата данни).

Хладилникът ще може да предостави необходимия материал (данни) на готвача в задната част. Готвачът вече може да обработва тези данни и да ги изпраща обратно до фабриката за услуги на предния край.

Контролерът (сервитьор) ще предаде готовата храна на клиента (потребителя). Клиентът вече ще може да консумира ястието (данни).

Изглед на процеса с помощта на диаграма на последователността

Кой го използва или какво показва:

  • Интегратори
  • производителност
  • Мащабируемост

В изгледа на процеса първо показвам отделно сървъра отпред и отзад и след това ги свързвам заедно със сървъра на базата данни.

В първия пример приложението Angular е внедрено с твърдо кодиран JSON във service.tsфайл (намиращ се в Service Factory).

Приложението Angular може да комуникира с API на трети страни, за да получава данни и да ги показва на потребителя.

В нашия back-end примерът на приложението Node.js започва с твърдо кодиран JSON, който може да бъде обработен и използван като отговор.

Този back-end може да бъде свързан с API на трети страни или сървър на база данни, за да получи JSON, да го обработи и да го изпрати обратно на заявителя.

С обяснените процеси на сървъра отпред, отзад и от сървъра на база данни, показвам комбинацията от тези три сървъра по-долу:

Когато се направи HTTP заявка, интерфейсът ще се задейства и Angular ще вземе заявката. Заявката ще бъде предадена вътрешно в Angular с Route, изпращаща заявка за изгледа към View / Template.

Изглед / Шаблон ще поиска контролера. След това контролерът ще създаде HTTP заявка към RESTful (Представително състояние трансфер) крайна точка към страната на сървъра, която е Express / Node.js. След това заявката ще бъде предадена вътрешно с Express / Node.js от нейния маршрут до контролера / модела.

Контролерът / моделът ще направи заявка чрез Mongoose ODM за взаимодействие със сървъра за бази данни, който има MongoDB. MongoDB ще обработи заявката и ще отговори на обратното обаждане до Express / Node.js.

Express / Node.js изпраща JSON отговор на ъгловия контролер. След това ъгловият контролер ще отговори с изглед.

Изглед на сценарий с помощта на последователна диаграма

Кой го използва или какво показва:

  • Опишете взаимодействията между обектите и между процесите

Описаният по-горе сценарий включва потребител с достъп до приложение за книжарница. Когато потребителят въведе URL адреса, JavaScript ще бъде стартиран и ще удари рутера на предния сървър, който е AppRoutingModule. AppRoutingModule ще извика BooksComponent, който ще зареди fetchBooks като инжекция за зависимост.

След това fetchBooks ще създаде HTTP заявка към задния сървър, който има рутер, контролер и модел за обработка на заявката и заявка към сървъра на базата данни.

Сървърът на базата данни обработва заявката и с изчакване на задния сървър ще вземе данните и ще ги изпрати обратно на предния сървър като JSON отговор.

Предният край сега ще има данните и изгледа на шаблона, за да се покаже на потребителя.

Физически изглед с помощта на диаграма за разполагане

Кой го използва и какво показва:

  • Системен инженер
  • Топология
  • Комуникации

Диаграмата за внедряване показва 3 сървъра: преден, заден и база данни. Във фронт-енда се изисква браузърът, тъй като Angular приложенията са уеб базирани на браузъра приложения.

Задният сървър хоства нашия Node.js с Express върху Node.js. В Express имаме приложението и Mongoose отгоре. Express ще се справи с комуникацията както на предния край, така и на базата данни. Сървърът на базата данни включва само MongoDB. Той използва JSON за комуникация между сървъри.

В първата ни компилация на стека MEAN ще разполагаме локално с помощта на нашата локална машина (localhost) за разполагане на сървъра отпред, сървъра отзад и сървъра на база данни.

Ще използваме следните портове по подразбиране: Angular - порт 4200, Node.js / Express - порт 3000 и MongoDB - порт 27017.

Диаграмата по-долу показва пълното уеб приложение на стека в UML нотация.

Преминавайки по-нататък към действителното производство, това, което трябва да мигрира към облака, е нашата база данни. За MongoDB избрах MongoDB Atlas като облачно решение.

Последната стъпка към внедряването на продукцията е качване на нашия преден код на Amazon S3 и качване на заден край в екземпляр EC2 с AWS. Всички те биха комуникирали помежду си с HTTP / HTTPS крайни точки.

Ето още една диаграма, която показва нашето внедряване на производството, без да използваме UML нотация.

Изглед за разработка с помощта на диаграмата на пакета

Кой го използва и какво показва:

  • Програмисти
  • Управление на софтуера

Изгледът на пакета на приложението Angular показва, че всеки Angular Component се импортира в AppModule. AppModule и AppRoutingModule зависят от BooksComponent. BooksComponent зависи от BookDetailComponentDialog и ApiService.

Изгледът на пакета на приложението Node.js показва, че всички CRUD операции (контролери), като извличане на всички книги, извличане на книга, актуализиране на книга и изтриване на книга, се импортират от приложението. Също така, цялата логика на CRUD операциите се намира в книгата с модели.

Логически изглед с помощта на диаграма на класа

Кой го използва и какво показва:

  • Краен потребител
  • Функционалност

Приложението за книжарница показа само един клас, наречен Book. Членовете на класа са: заглавие, isbn, автор, снимка и цена. Методите са: addBook, fetchBooks, fetchBook, updateBook и deleteBook.

Структурата на моделната книга във формат JSON.

Ето няколко видеоклипа за диаграмите:

Документация, достъпна на моя GitHub:

clarkngo / cityu_capstone Допринесете за развитието на clarkngo / cityu_capstone, като създадете акаунт в GitHub. clarkngo GitHub

Намери ме в LinkedIn. =)