MEANスタックをすばやく理解したいですか?便利な図を含むドキュメントがあります。

この記事は、シアトル市立大学の私の頂点に基づいています。私の研究のタイトルは「フルスタック開発のソフトウェアドキュメンテーションとアーキテクチャ分析」です。私の研究の目標は、オープンソースプロジェクトとフルスタック開発を理解する上での学習曲線を減らすことでした。私はMEANスタックを選択しました。

理解しやすいように、Lucidchartを使用して次の図を作成しました。これらのUMLダイアグラムは、4 +1アーキテクチャビューモデルに基づいています。

  • レストランの例え
  • シーケンス図を使用したプロセスビュー
  • シーケンス図を使用したシナリオ
  • 配置図を使用した物理ビュー
  • パッケージ図を使用した開発ビュー
  • クラス図を使用した論理ビュー

調査は、展開と要求および応答フローに重点を置いていました。

MEANスタック

MEAN Stackは、フルスタックのJavaScriptオープンソースソリューションです。これは、MongoDB、Express、Angular、およびNode.jsで構成されています。

その背後にある考え方は、これらのフレームワークの接続に関する一般的な問題を解決し、日々の開発ニーズをサポートする堅牢なフレームワークを構築し、開発者が人気のあるJavaScriptコンポーネントを操作しながらより良いプラクティスを使用できるようにすることです。

Node.jsを使用したバックエンド

Node.jsは非同期I / Oを処理するために構築されていますが、JavaScriptにはクライアント側のイベントループが組み込まれています。これにより、Node.jsは他の環境と比較して高速になります。ただし、イベント駆動型/コールバックアプローチでは、Node.jsの学習とデバッグが困難になります。

Node.jsには、MongoDBオブジェクトモデリングであるMongooseやExpressWebアプリケーションフレームワークなどのモジュールが含まれています。ノードモジュールを介して抽象化を実現できるため、MEANスタックの全体的な複雑さが軽減されます。

ExpressFrameworkを使用したバックエンド

Expressは、Node.js用のミニマリストで非ピニオンのアプリケーションフレームワークです。これはNode.jsの上にあるレイヤーであり、Node.jsの機能を隠すことなく、Webおよびモバイル開発向けの機能が豊富です。

Angularのフロントエンド

Angularは、TypeScriptに組み込まれたWeb開発プラットフォームであり、Webアプリケーションのクライアント側を作成するための堅牢なツールを開発者に提供します。

これにより、ユーザーの行動や好みに基づいてコンテンツが動的に変化する単一ページのWebアプリケーションの開発が可能になります。コンポーネントが変更されるたびに、それに関連する他のコンポーネントが自動的に変更されることを保証する依存性注入を備えています。

MongoDBを使用したデータベース

MongoDBは、BJSON(Binary JavaScript Object Notation)にデータを格納するNoSQLデータベースです。

MongoDBは、Node.jsアプリケーションの事実上の標準データベースとなり、JSON(JavaScript Object Notation)を使用して「JavaScripteverywhere」パラダイムを実現し、さまざまな層(フロントエンド、バックエンド、データベース)間でデータを送信します。

これらの基本がわからなくなったので、これらの図を見てみましょう。

レストランの例え

急な学習曲線に取り組みたかったので、フルスタックアプリケーションでの要求と応答のプロセスをユーザーが理解して保持できるように、レストランの例えを選択しました。

顧客(エンドユーザー)はウェイター(コントローラー)を介して注文を要求し、ウェイターは注文ウィンドウ(サービスファクトリー)でその要求を担当者に渡します。

これらの3つのコンポーネントは、フロントエンドサーバーを構成します。サービスファクトリーは、バックエンドのクック(コントローラー)と通信するファクトリーになります。次に、料理人は冷蔵庫(データベースサーバー)で必要な材料(データ)を取得します。

冷蔵庫は、バックエンドの料理人に必要な材料(データ)を提供できるようになります。これで、料理人はそのデータを処理して、フロントエンドのサービスファクトリに送り返すことができます。

コントローラー(ウェイター)が調理済みの食事をお客様(ユーザー)に引き渡します。これで、顧客は食事(データ)を消費できるようになります。

シーケンス図を使用したプロセスビュー

誰がそれを使用するか、またはそれが何を示すか:

  • インテグレーター
  • パフォーマンス
  • スケーラビリティ

プロセスビューでは、最初にフロントエンドサーバーとバックエンドサーバーを別々に表示してから、データベースサーバーに接続します。

最初の例では、AngularアプリケーションがハードコードされたJSONを使用してservice.tsファイル(Service Factoryにあります)にデプロイされました。

AngularアプリケーションはサードパーティのAPIと通信してデータを取得し、ユーザーに表示できます。

バックエンドでは、Node.jsアプリケーションの例は、処理して応答として使用できるハードコードされたJSONから始まります。

このバックエンドは、サードパーティのAPIまたはデータベースサーバーに接続して、JSONを取得して処理し、リクエスターに送り返すことができます。

フロントエンドサーバー、バックエンドサーバー、およびデータベースサーバーのプロセスについて説明したので、これら3つのサーバーの組み合わせを以下に示します。

HTTPリクエストが行われると、フロントエンドがトリガーされ、Angularがリクエストを取得します。リクエストはAngularで内部的に渡され、ルートはビューのリクエストをビュー/テンプレートに送信します。

ビュー/テンプレートはコントローラーを要求します。次に、コントローラーは、サーバー側のRESTful(Representational State Transfer)エンドポイント(Express / Node.js)へのHTTPリクエストを作成します。リクエストは、Express /Node.jsを使用してルートからコントローラー/モデルに内部的に渡されます。

コントローラー/モデルは、Mongoose ODMを介して、MongoDBを備えたデータベースサーバーと対話するように要求します。MongoDBはリクエストを処理し、Express /Node.jsへのコールバックに応答します。

Express / Node.jsは、JSON応答をAngularControllerに送信します。その後、AngularControllerはビューで応答します。

シーケンス図を使用したシナリオビュー

誰がそれを使用するか、またはそれが何を示すか:

  • オブジェクト間およびプロセス間の相互作用を説明する

上記のシナリオには、ユーザーが書店アプリケーションにアクセスすることが含まれます。ユーザーがURLを入力すると、JavaScriptが実行され、フロントエンドサーバーのルーターであるAppRoutingModuleにアクセスします。AppRoutingModuleはBooksComponentを呼び出し、依存性注入としてfetchBooksをロードします。

次に、fetchBooksは、ルーター、コントローラー、モデルを備えたバックエンドサーバーへのHTTPリクエストを作成して、リクエストを処理し、データベースサーバーにクエリを実行します。

データベースサーバーはクエリを処理し、バックエンドサーバーが待機している状態で、データを取得してJSON応答としてフロントエンドサーバーに送り返します。

これで、フロントエンドにデータとテンプレートビューが表示され、ユーザーに表示されます。

配置図を使用した物理ビュー

誰がそれを使用し、それが何を示しているか:

  • システムエンジニア
  • トポロジー
  • コミュニケーション

配置図は、フロントエンド、バックエンド、データベースの3つのサーバーを示しています。フロントエンドでは、AngularアプリケーションはブラウザーベースのWebアプリケーションであるため、ブラウザーが必要です。

バックエンドサーバーは、Node.jsの上にExpressを使用してNode.jsをホストします。Expressでは、アプリケーションとその上にMongooseがあります。Expressは、フロントエンドとデータベースの両方で通信​​を処理します。データベースサーバーにはMongoDBのみが含まれています。JSONを使用してサーバー間で通信します。

MEANスタックの最初のビルドでは、ローカルマシン(localhost)を使用してローカルにデプロイし、フロントエンドサーバー、バックエンドサーバー、およびデータベースサーバーをデプロイします。

次のデフォルトポートを使用します:Angular-ポート4200、Node.js / Express-ポート3000、およびMongoDB-ポート27017。

次の図は、UML表記のフルスタックWebアプリケーションを示しています。

さらに実際の本番環境に移行すると、クラウドに移行するのはデータベースです。MongoDBの場合、クラウドソリューションとしてMongoDBAtlasを選択しました。

本番環境へのデプロイの最後のステップは、フロントエンドコードをAmazon S3にアップロードし、AWSを使用してEC2インスタンスにバックエンドをアップロードすることです。それらはすべて、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 GitHubでアカウントを作成して、clarkngo / cityu_capstoneの開発に貢献します。clarkngo GitHub

LinkedInで私を見つけてください。=)