Хочете швидко зрозуміти стек MEAN? Ось документація з корисними схемами.

Ця стаття заснована на моєму основоположному знаку для Міського університету Сіетла. Назва мого дослідження - "Документація програмного забезпечення та архітектурний аналіз розробки повного стеку". Метою мого дослідження було зменшення кривої навчання у розумінні проектів з відкритим кодом та повної розробки стеків, і я вибираю стек MEAN.

Я створив наступні схеми, використовуючи Lucidchart, для легшого розуміння. Ці діаграми UML базувались на моделі архітектурного подання 4 + 1:

  • Ресторанна аналогія
  • Перегляд процесу за допомогою діаграми послідовностей
  • Сценарій за допомогою діаграми послідовностей
  • Фізичний вигляд за допомогою діаграми розгортання
  • Перегляд розробки за допомогою схеми пакета
  • Логічний вигляд за допомогою діаграми класів

Дослідження було більше зосереджене на розгортанні та запиті та потоці відповідей.

ЗНАЧИТИ стек

MEAN Stack - це повнотекстове рішення з відкритим кодом для JavaScript. Він складається з MongoDB, Express, Angular та Node.js.

Ідея цього полягає у вирішенні загальних проблем із підключенням цих фреймворків, побудові надійного фреймворку для підтримки щоденних потреб у розробці та допомозі розробникам використовувати кращі практики під час роботи з популярними компонентами JavaScript.

Бек-енд з Node.js

Node.js створений для обробки асинхронних входів / виходів, тоді як JavaScript має вбудований цикл подій для клієнта. Це робить Node.js швидким у порівнянні з іншими середовищами. Однак підхід, керований подіями / зворотним викликом, ускладнює вивчення та налагодження Node.js.

Node.js включає такі модулі, як Mongoose, що є об'єктним моделюванням MongoDB, та фреймворк веб-додатків Express. За допомогою модулів Node можна досягти абстракції, що зменшує загальну складність стеку MEAN.

Бек-енд із 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файлі (розташований на фабриці послуг).

Додаток Angular може взаємодіяти зі сторонніми API, щоб отримувати дані та відображати їх користувачеві.

У нашому сервісному прикладі приклад програми Node.js починається з жорстко закодованого JSON, який можна обробити та використовувати як відповідь.

Цей внутрішній сервер можна підключити до сторонніх API або сервера баз даних, щоб отримати JSON, обробити його та відправити назад запитувачу.

Пояснюючи процеси інтерфейсного сервера, серверного сервера та сервера баз даних, я показую комбінацію цих трьох серверів нижче:

Коли зроблено HTTP-запит, інтерфейсний інтерфейс буде спрацьовано, і Angular прийме запит. Запит буде переданий внутрішньо в Angular з Route, що надсилає запит на подання до View / Template.

Перегляд / шаблон вимагатиме від контролера. Потім контролер створить HTTP-запит до кінцевої точки RESTful (передача стану представницького стану) на сторону сервера, тобто Express / Node.js. Потім запит буде передано внутрішньо разом із Express / Node.js зі свого маршруту до контролера / моделі.

Контролер / модель зробить запит через ODM Mongoose на взаємодію з сервером бази даних, який має 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 імпортується в 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. =)