平均スタックアプリケーションを計画するための実用的なガイド

この記事は、マニングプレスの「マスタリング平均：マンゴ、エクスプレス、アングラー、ノード、第2版の使用」から抜粋しています。第2版​​は、Angular 2、Node 6、および最新の主流JavaScriptバージョンES2015（ES6）をカバーするために完全に改訂および更新されました。このエディションでは、更新された平均スタックを使用してWebアプリケーションを開発する方法を学習します。

キーポイント

• 平均スタックアプリケーションを計画する場合、最初に各ページにあるものを深く掘り下げることなく、必要な画面を想像する必要があります。この段階でのスケッチは、アプリケーション全体を視覚化し、画面をコレクションとプロセスに整理するのに役立ちます。
• 画面を論理セットに分割します。たとえば、すべての処理場所の画面を組み合わせることができますが、「About Us」のような独立したページは、その他のコレクションで組み合わせることができます。
• アプリケーションのアーキテクチャを検討し、APIから始めます。データと相互作用するAPIの構築は、アーキテクチャの基礎です。サーバーから直接HTMLを提供するか、アプリケーションの特定の要件に基づいて単一ページアプリケーション（SPA）を選択するかどうかを判断します。
• アーキテクチャは、Expressプロジェクトにカプセル化され、管理と展開が容易になります。ただし、アプリケーションのさまざまな部分を互いに分離するためにコードを適切に整理して、将来必要に応じて別々のプロジェクトに分割するのが簡単になることが重要です。

実用アプリケーション計画：Loc8r

イラストを容易にするために、平均スタックでloc8rと呼ばれる作業アプリケーションを構築していると仮定しましょう。 LOC8Rは、人々が働くことができるWiFiで近くの場所をリストします。また、各会場の施設、営業時間、評価、場所の地図も表示されます。

高度な平均スタックアプリケーション計画最初のステップは、アプリケーションで必要な画面を検討することです。個別のページビューとユーザーの旅に焦点を当てます。各ページの詳細に注意を払うことなく、これをハイレベルで行うことができます。アプリケーション全体を視覚化するのに役立つため、この段階で紙またはホワイトボードでスケッチするのが最善です。また、構築時の参照ポイントとして、スクリーンをコレクションやプロセスに整理するのにも役立ちます。ページまたはアプリケーションロジックの後ろに添付されているデータはないため、パーツを追加および削除したり、表示されているコンテンツと場所を変更したり、必要なページ数を変更したりできます。私たちは初めてそれを正しく行わない可能性が非常に高いです。

スクリーン計画

現代のjavascriptを読むことは、進化し続けるJavaScriptの世界に従ってください！この本を読むこの本を読んでください

loc8rを考えてみましょう。私たちの目標は次のとおりです

loc8rは、人々が働くことができるWiFiの近くの場所をリストします。各会場の施設、営業時間、評価、ロケーションマップを示しています。訪問者は評価やコメントを提出できます。

これから、必要な画面のいくつかを学ぶことができます：

近くの場所の画面リスト

1. 単一の場所の詳細を示す画面
場所に関するコメントを追加するための画面
3. また、訪問者にloc8rが何のためのものか、そしてなぜ別の画面をリストに追加する必要があるのか​​を伝えたいかもしれません。
「私たちについて」情報の画面

画面をコレクションに分割します

次に、画面リストを取得し、それらが論理的に一緒に属する場所にそれらを整理したいと考えています。たとえば、リストの最初の3つはすべてポジションに関連しています。 aboutページはどこにも属しません。その他の「他の」コレクションに配置できます。スケッチを描くと、図1と同様の結果が得られます。

図1：アプリケーションの個別の画面を論理コレクションに整理します。

このような簡単なスケッチは計画の最初の段階であり、アーキテクチャについて考え始める前にこのフェーズを完了する必要があります。この段階では、基本ページを表示してプロセスを検討する機会が与えられます。たとえば、図1は、リストページから詳細ページまで、コメントを追加するフォームまで、ロケーションコレクションの基本的なユーザーの旅を示しています。

アーキテクチャデザイン

loc8rはシンプルに見え、画面はわずかです。ただし、データベースからデータベースからブラウザにデータを転送し、ユーザーがデータと対話し、データをデータベースに返信できるようにするため、アーキテクチャの構築方法について検討する必要があります。

APIで開始します

アプリケーションはデータベースを使用してデータを渡すため、必要な部品からアーキテクチャの構築を開始します。図2は、Expressおよびnode.jsを使用して構築されたREST APIである出発点を示しており、MongoDBデータベースとの対話を可能にします。

図2標準の平均レストAPIから始まる、mongodb、express、node.jsを使用してください。

データと相互作用するAPIの構築は、アーキテクチャの基礎です。より興味深く難しい質問は、アプリケーションのアーキテクチャをどのように構築するのですか？

アプリケーションアーキテクチャオプション この時点で、アプリケーションの特定の要件と、平均スタックの部分を一緒に組み合わせて最適なソリューションを構築する方法を調べる必要があります。決定を変更するには、Mongodb、Express、Angular、またはnode.jsの特別な機能が必要ですか？サーバーから直接HTMLを提供したいですか、それともスパがより良いオプションですか？

loc8rの場合、特別な要件や特定の要件はありません。検索エンジンで簡単にrawってcrawってビジネスの成長計画に依存するかどうかです。目標が検索エンジンからオーガニックトラフィックをもたらすことである場合、はい、クロール可能である必要があります。目標がアプリケーションとしてアプリケーションを宣伝し、この方法で使用を促進することである場合、検索エンジンの可視性はそれほど重要ではないようです。

図3に示すように、3つの可能なアプリケーションアーキテクチャをすぐに想像できます。

node.jsおよびexpressアプリケーション
node.jsおよび角度相互作用を備えたエクスプレスアプリケーション
Angular Spa
これら3つのオプションを念頭に置いて

loc8rに最適なオプションはどれですか？

図3サーバーサイドエクスプレスおよびnode.jsアプリケーションからフルクライアントの角度スパまで、Loc8rアプリケーションを構築するための3つのオプション。

アプリケーションアーキテクチャを選択

を選択します

あるアーキテクチャを別のアーキテクチャよりも好むように促す特定のビジネス要件はありません。 3つのアーキテクチャすべてを構築することで、各アプローチがどのように機能するかを調査し、各テクノロジーを順番に調べ、アプリケーションレイヤーをレイヤーごとに構築できます。

node.jsとExpressアプリケーションから始めて、図3に示す順序でスキーマを構築し、Angularの追加を続けて、Angular SPAにリファクタリングします。これは通常Webサイトを構築する方法ではありませんが、平均スタックのあらゆる側面を学ぶ絶好の機会を提供します。

1つのエクスプレスプロジェクトのすべてをカプセル化します私たちが検討してきたアーキテクチャ図は、APIとアプリケーションロジックの個別のエクスプレスアプリケーションがあることを示唆しています。これは完全に可能であり、大規模なプロジェクトにも適しています。多くのトラフィックが期待される場合は、メインアプリケーションとAPIが異なるサーバーにあることを望むかもしれません。これの追加の利点は、それぞれのニーズに最適な各サーバーとアプリケーションに対してより特定の設定を設定できることです。

もう1つの方法は、シンプルで簡潔に保ち、すべてを単一のExpressプロジェクトに入れることです。このアプローチを使用すると、アプリケーションのホスティングと展開、およびソースコードのセットの管理について心配する必要があります。これは、loc8Rで行うことです。これにより、いくつかのサブアプリを備えたエクスプレスプロジェクトが提供されます。図4は、このアプローチを示しています。

図4同じExpressプロジェクトでAPIとアプリケーションロジックをカプセル化するアプリケーションアーキテクチャ。

この方法でアプリケーションを組み合わせるときは、アプリケーションのさまざまな部分を分離できるように、コードを適切に整理してください。コードを維持しやすくすることに加えて、適切なルートを取ることを決定したときに、コードを別々のプロジェクトに分割しやすくなります。これは、この本で議論し続ける重要なトピックです。

最終製品

ご覧のとおり、平均スタックのすべてのレイヤーを使用してloc8rを作成します。また、Twitter Bootstrapを含めて、レスポンシブレイアウトを作成するのに役立ちます。図5は、構築できるコンテンツのスクリーンショットを示しています。

図5 loc8rはサンプルアプリケーションです。さまざまなデバイスに異なるものを表示し、各場所の場所と詳細のリストを表示し、訪問者がログインしてコメントを残すことができます。

結論

これはこの記事に関するものです。これらの手順を実践し始めたい場合は、ManningのWebサイトにアクセスしてください。Mongo、Express、Angular、Node、第2版、または本の購入を使用して、Mastering Meanの無料章をダウンロードできます。それ以外の場合は、この記事で説明したことについて質問がある場合は、以下のコメントに投稿してください。

平均スタックアプリケーション（FAQ）

の計画に関するFAQ 平均スタックとは何ですか？また、アプリケーション開発において重要なのはなぜですか？

平均スタックは、Webアプリケーションの開発に使用されるJavaScriptベースのテクノロジーのコレクションです。平均は、MongoDB、ExpressJS、AngularJS、Node.JSの頭字語です。 MongoDBはNOSQLデータベース、ExpressJSはWebアプリケーションフレームワーク、AngularJSはJavaScriptフレームワーク、node.jsはサーバープラットフォームです。アプリケーション開発における平均スタックの重要性は、その効率と柔軟性にあります。これにより、開発者はJavaScriptを使用してサーバーとクライアントの両方のコードを作成し、シームレスな統合と効率的なデータ処理を可能にします。

平均スタックアプリケーションのアーキテクチャはどのように機能しますか？

平均スタックアプリケーションのアーキテクチャは柔軟で効率的です。 MongoDB（NOSQLデータベース）はアプリケーションデータを保存します。 node.jsサーバーで実行されているExpressjsは、サーバー側の機能を処理します。 AngularJSは、クライアント（ユーザー指向）機能を管理します。アプリケーション全体がJavaScriptに記述されており、データがユーザーインタラクションからサーバーおよびデータベースにシームレスに流れるようにします。

アプリケーション開発に平均スタックを使用することの利点は何ですか？

平均スタックは、アプリケーション開発に多くの利点を提供します。 node.jsのおかげで、コードの再利用と高速が可能になります。 MongoDBは複雑なデータを保存する柔軟性を提供しますが、AngularJSはインタラクティブな機能を追加するためのクリーンな方法を提供します。 ExpressJSは、サーバールーティングの作成と管理のプロセスを簡素化します。さらに、すべてがJavaScriptに記載されているため、開発プロセスを簡素化および高速化します。

MongoDBは、平均スタックアプリケーションの効率をどのように改善しますか？

MongoDBは、高性能、高可用性、スケーラビリティの容易さを提供するNOSQLデータベースです。これは、テーブルと行を使用した従来のリレーショナルデータベースではなく、コレクションとドキュメントの概念に基づいています。これにより、MongoDBは大量のデータと複雑な階層データ構造の取り扱いに特に優れており、平均スタックアプリケーションの効率を改善するのに役立ちます。

AngularJSは平均スタックアプリケーションでどのような役割を果たしますか？

AngularJSは、平均スタックにアプリケーションを構築するための強力なJavaScriptフレームワークです。これにより、開発者はHTML語彙を拡張して、より表現力豊かで読みやすく、より高速な開発環境を作成することができます。 AngularJSは、HTMLのデータ結合機能も提供し、モデルコンポーネントとビューコンポーネント間のデータの自動同期を可能にします。

ExpressJS平均スタックアプリケーションでサーバー側の操作を簡素化する方法は？

ExpressJSは、Webアプリケーションとモバイルアプリケーションの両方に強力な機能を提供する最小限で柔軟なnode.js Webアプリケーションフレームワークです。シングルページ、マルチページ、およびハイブリッドWebアプリケーションを構築するためのシンプルなインターフェイスを提供することにより、サーバー側の操作を簡素化します。また、ルーティング、リクエスト、ビューを管理し、ミドルウェア操作を実行するのに役立ちます。

node.jsは、平均スタックアプリケーションのパフォーマンスをどのように強化しますか？

node.jsは、速くてスケーラブルなWebアプリケーションを簡単に構築するために、ChromeベースのJavaScriptランタイム上に構築されたプラットフォームです。イベント駆動型の非ブロッキングI/Oモデルを使用して、軽量で効率的にしているため、分散デバイス全体で実行されるデータ集約型のリアルタイムアプリケーションに最適です。これにより、ラグなしで複数のクライアントリクエストを同時に処理できるようにすることにより、平均スタックアプリケーションのパフォーマンスが向上します。

平均スタックアプリケーションを開発するための前提条件は何ですか？

平均スタックアプリケーションを開発するには、JavaScriptとHTMLの基本的な理解が必要です。また、NOSQLデータベース（特にMongoDB）について知る必要があり、クライアントとサーバー側のスクリプトを理解する必要があります。 AngularJS、ExpressJS、Node.JSに精通することが重要です。さらに、JSONとAjax Technologiesを理解することは大きな利益をもたらすでしょう。

他のフルスタックオプションとStackの意味はどうですか？

平均スタックは完全にJavaScriptに基づいており、クライアントとサーバー側で同じ言語を使用できるため、シームレスな開発プロセスを提供します。これは、複数の言語で習熟する必要がある他のフルスタックオプションの主な利点です。さらに、node.jsの非ブロッキングアーキテクチャにより、平均的なスタックアプリケーションが高速かつスケーラブルになり、リアルタイムアプリケーションに最初の選択肢になります。

平均スタックで別のデータベースを使用できますか？

MongoDBはJavaScriptと互換性があるため、平均スタックのデフォルトデータベースですが、他のデータベースが利用可能です。ただし、これには追加の構成とコードの調整が必要になる場合があり、平均スタックに知られているシームレスなデータフローが影響を受ける可能性があります。したがって、異なるデータベースを使用する必要がない場合を除き、MongoDBを使用することをお勧めします。

以上が平均スタックアプリケーションを計画するための実用的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。