単一ページのJavaScript Webアプリケーションのアーキテクチャ？

https://stackoverflow.com/questions/3050869

27-09-2019
|

質問

複雑なシングルページJS Webアプリケーションをクライアント側でどのように構成すべきですか？具体的には、モデルオブジェクト、UIコンポーネント、コントローラー、およびサーバーの永続性を処理するオブジェクトの観点からアプリケーションをきれいに構築する方法に興味があります。

MVCは最初はフィットのように見えました。しかし、さまざまな深さでネストされているUIコンポーネント（それぞれがモデルデータに作用/反応する独自の方法があり、それぞれが直接処理できない場合もある場合もあります）を使用すると、MVCをきれいに適用できるようには見えません。（しかし、そうでない場合は修正してください。）

(この質問 Ajaxを使用するという2つの提案が得られました。これは、最も些細な1ページのアプリ以外に明らかに必要です。）

解決

のMVCアーキテクチャ puremvc/js 最もエレガントなIMOです。私はそれから多くを学びました。私も見つけましたスケーラブルなJavaScriptアプリケーションアーキテクチャニコラス・ザカス著クライアントサイドアーキテクチャオプションの調査に役立ちます。

他の2つのヒント

ビュー、フォーカス、および入力管理は、シングルページのWebアプリで特別な注意が必要な領域であることがわかりました。
また、JSライブラリを抽象化し、ドアを開いたまま、使用しているものについて心を変えるか、必要に応じてミックスしてマッチすることが役立つとわかりました。

他のヒント

ディーンが共有するニコラス・ザカスのプレゼンテーションは、最初から非常に良い場所です。私はしばらく同じ質問に答えるのに苦労していました。いくつかの大規模なJavaScript製品を行った後、誰かがそれを必要とする場合に備えて、学習を参照アーキテクチャとして共有することを考えました。見て：

http://boilerplatejs.org/

次のような一般的なJavaScript開発の懸念に対処します。

ソリューション構造
複雑なモジュール階層の作成
セルフコンポーネントUIコンポーネント
イベントベースのモジュール間通信
ルーティング、履歴、ブックマーク
単体テスト
ローカリゼーション
ドキュメント生成

等

アプリの作成方法：

extjsフレームワーク、シングルページアプリ、別のJSファイルで定義されたすべてのコンポーネント、オンデマンドを読み込んだ
すべてのコンポーネントは、独自の専用のWebサービス（場合によっては複数）に連絡し、extjsストアまたは特別な目的のデータ構造にデータを取得します
レンダリングでは標準のextJSコンポーネントを使用するため、ストアをグリッドにバインドしたり、レコードからフォームをロードしたりできます。

JavaScriptフレームワークを選択して、そのベストプラクティスに従ってください。私のお気に入りはextjsとgwtですが、ymmvです。

これのために独自のソリューションを転がさないでください。最新のJavaScriptフレームワークが行うことを複製するために必要な努力は大きすぎます。すべてをゼロから構築するよりも、存在するものを適応させる方が常に速いです。

Question - What makes an application complex ?

回答 - 質問自体に「複雑」という単語の使用。したがって、一般的な傾向は、最初から複雑な解決策を探していることです。

Question - What does the word complex means ?

回答 - 不明または部分的に理解されているもの。例：今日でも重力の理論は私にとっては複雑ですが、1655年にそれを発見したアイザック・ニュートンirにとっては複雑ではありません。

Question - What tools can I use to deal with complexity ?

回答 - 理解とシンプルさ。

Question - But I understand my application . Its still complex ?

回答 - 理解と複雑さが共存しないため、よく考えてください。あなたが巨大な巨大なアプリケーションを理解しているなら、それは小規模でシンプルなユニットの統合に過ぎないことに同意すると確信しています。

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

答え - なぜなら、

- > SPAは、アプリケーション開発で行っている多くのことのためにホイールを再発明する必要がある新たに発明されたある種のコアテクノロジーではありません。

- > Webアプリケーションのパフォーマンス、可用性、スケーラビリティ、保守性の向上の必要性によって駆動される概念。

- >それはかなり新しく識別されたデザインパターンであるため、スパとしてのスパを理解することは、スパのアーキテクチャについて情報に基づいた決定を下すのに大いに役立ちます。

- >ルートレベルでは、アプリケーションのニーズとSPAパターンのニーズを理解した後、いくつかの変更と再配置で以前に行ったこととほぼ同じアプリケーションを作成していることに気付くので、スパは複雑です。開発アプローチで。

Question - What about the use of Frameworks ?

回答 - フレームワークは、一般的に識別されたいくつかの一般的なパターンのボイラープレートコード /ソリューションです。したがって、アプリケーション開発からx％（アプリケーションに基づいて変数）を取り除くことができますが、重いためにそれらから特別に期待する必要はありませんおよび成長するアプリケーション。アプリケーション構造とフローを完全に制御することは常に良いケースですが、最も重要なのはコードです。アプリケーションコードには灰色または黒い領域がないはずです。

Question - Can you suggest one of the many approaches to SPA architecture ?

回答 - アプリケーションの性質に基づいた独自のフレームワークを考えてください。アプリケーションコンポーネントを分類します。派生したフレームワークに近い既存のフレームワークを探してください。それを見つけた場合は、それを使用してください。見つけられない場合は、自分で先に進むことをお勧めします。フレームワークを作成することは、前もって非常に努力していますが、長期的にはより良い結果をもたらします。私のSPAフレームワークのいくつかの基本的なコンポーネントは次のとおりです。

データソース：モデルのモデル /コレクション
データの表示にマークアップ：テンプレート
アプリケーションとの相互作用：イベント
州のキャプチャとナビゲーション：ルーティング
ユーティリティ、ウィジェット、プラグイン：ライブラリ

これが何らかの形で役立ったかどうかを教えてください。

最善のことは、他のフレームワークの使用例を見ることです。

todomvc 多くの多くのスパフレームワークを紹介します。

JavaScript MVCフレームワークを使用できます http://javascriptmvc.com/

私が現在取り組んでいるWebアプリケーションはJQueryを使用しており、大規模なシングルページWebアプリケーションにはお勧めしません。ほとんどのフレームワークは、Dojo、Yahoo、GoogleなどのFrameworksをライブラリに使用していますが、jQueryはそうではありません。これは重要な欠点です。

あなたのウェブサイトが小さいことを意図している場合、jQueryは大丈夫ですが、大きなサイトを構築するつもりなら、利用可能なすべてのJavaScriptフレームワークを見て、どれがあなたのニーズを満たすかを決定することをお勧めします。

また、MVCパターンをJavaScript/HTMLに適用することをお勧めします。おそらくJavaScriptのオブジェクトモデルのほとんどは、Ajaxを介して実際にサーバーから戻るJSONとして実行でき、JavaScirptはJSONを使用してHTMLをレンダリングします。

あなたが知っておくべきもののほとんどをカバーするので、私は本のAjaxの本を読むことをお勧めします。

私は使用しています samm.js いくつかの1ページで、大成功を収めています

一緒に行きます jquery mvc

チェックアウト http://bennadel.com/projects/cormvc-jquery-framework.htm ベンはかなりシャープで、彼のブログを掘り下げていれば、CORMVCがどのように組み立てられているのか、そしてその理由についていくつかの素晴らしい投稿があります。

代替：見てくださいそのナット

JavaScriptで考えますが、同じDOM APIを持つサーバーのJavaで同じコードをコーディングします。Serverは、UIとデータが一緒になっているため、カスタムクライアント/ブリッジなしでアプリケーションを管理しやすくなります。

または、見てください https://github.com/flosse/scaleapp

nikaframework シングルページアプリケーションを作成できます。また、書くこともできます HTML, CSS (サス), JavaScript 個別のファイルに、最後に1つの出力ファイルのみにバンドルします。

探索することをお勧めしますヨーマン. 。これにより、新しいプロジェクトに既存の「ベストプラクティス」を使用できます。

例えば：

angular.jsを使用することにした場合、ヨーマンジェネレーター, 、ルーティング、ビュー、サービスなどの構造を提供します。また、テスト、コードの削除などを可能にします。

Backboneを使用することにした場合は、チェックアウトしてくださいこのジェネレーター

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow