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

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

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

-

（この質問の結果、ajaxの使用に関する 2つの提案が出されました。これは、最も簡単な1ページアプリ以外には明らかに必要です。）

PureMVC / JSの MVCアーキテクチャは、最もエレガントなIMOです。私はそれから多くを学びました。私も見スケーラブルJavaScriptのアプリケーションアーキテクチャをクライアント側のアーキテクチャオプションを研究するのに役立つニコラスZakasで。

他の2つのヒント

1. ビュー、フォーカス、入力管理は、単一ページのWebアプリで特に注意が必要な領域であることがわかりました
2. また、JSライブラリを抽象化して、使用するものを変更したり、必要に応じて組み合わせたりするためにドアを開いたままにしておくことも役に立ちました。

Deanが共有するNicholas Zakasのプレゼンテーションは、開始するには非常に良い場所です。私もしばらくの間、同じ質問に答えるのに苦労していました。大規模な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年にそれを発見したアイザックニュートン卿には複雑ではありません。

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の理解は、SPAのアーキテクチャに関する十分な情報に基づいた決定を行うのに役立ちます。

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

Question - What about the use of Frameworks ?

回答-フレームワークは、一般的に特定された一般的なパターンの定型コード/ソリューションであるため、アプリケーション開発からx％（アプリケーションに応じて可変）の負荷を取り除くことができますが、特に重い場合は、それほど多くは期待できません。成長するアプリケーション。アプリケーションの構造とフローを完全に制御できるのは常に良いケースですが、最も重要なのはそのためのコードです。アプリケーションコードに灰色または黒色の領域があってはなりません。

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

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

• データソース：モデル/モデルのコレクション

• データを表示するためのマークアップ：テンプレート

• アプリケーションとの相互作用：イベント

• 状態のキャプチャとナビゲーション：ルーティング

• ユーティリティ、ウィジェット、プラグイン：ライブラリ

これがあなたのSPAアーキテクチャに何らかの形で幸運をもたらすかどうか教えてください!!

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

TodoMVCは多くのSPAフレームワークを紹介しています。

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

私が現在取り組んでいるWebアプリケーションはJQueryを使用しており、大きな単一ページのWebアプリケーションには推奨しません。Dojo、yahoo、googleなどのほとんどのフレームワークは、ライブラリで名前空間を使用しますが、JQueryは使用せず、これは大きな欠点です。

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

そして、私はあなたのjavascript / htmlにMVCパターンを適用することをお勧めします、そしておそらくJavaScriptのほとんどのオブジェクトモデルは、あなたがajaxを通してサーバーから実際に返すjsonとして実行でき、javascirptはjsonを使用してhtmlをレンダリングします。

知っておく必要のあるもののほとんどがカバーされているため、Ajaxの動作を読むことをお勧めします。

私はいくつかの1ページアプリケーションでSamm.jsを使用して大成功しています

私はjQuery MVCを使います

http://bennadel.com/projects/cormvc-jquery-framework.htmをチェックしてください。Benはかなり鋭敏で、彼のブログを掘り下げると、CorMVCがどのようにまとめられているのか、そしてその理由についていくつかの素晴らしい投稿があります。

代替案：ItsNatを見てください

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

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

NikaFrameworkを使用すると、単一ページのアプリケーションを作成できます。また、 HTML、 CSS（ SASS）、 JavaScriptを別々のファイルに記述し、最終的にそれらを1つの出力ファイルのみにバンドルすることもできます。

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

例えば：

Angular.jsを使用する場合は、Yeomanジェネレーターがあり、ルーティング、ビュー、サービスなどの構造を提供します。また、コードのテスト、縮小なども可能です。

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