パッケージを使用したバックボーン アーキテクチャ

Question

私のアプリケーションに最適なバックボーン アーキテクチャを選択しようとしています。

有効または無効にできる複数のコンポーネントまたは「パッケージ」で構成される大規模なアプリケーションを構築しています。

わかりやすくするために、私の単一ページ アプリケーションが、フォト ギャラリーやビデオ ギャラリーなどのいくつかのコンポーネントを含むギャラリーであるとします。

• アプリケーションの「インストール」では、ロードするコンポーネント (「パッケージ」) (ビデオ、写真、またはその両方) を選択できます。
• ビデオとフォト ギャラリーには、いくつかの共通のコードと抽象クラスがあります。
• 各インストールでは、必要なコンポーネントのみを 1 つの (最適化された) ファイルでロードするようにしたいと考えています。つまり、インストールでフォト ギャラリーのみを使用する場合は、リソースを節約するためにビデオ ギャラリーをロードすべきではありません。

r オプティマイザーを備えた requireJs、marionette、Lumbar など、さまざまなソリューションを検討してきましたが、それぞれにいくつかの欠点があります。* OptimizerまたはMarionetteを使用してJSを必要とする - ファイルをパッケージにグループ化する方法がわかりません * Lumbar-私の問題のほとんどを解決しているようですが、ドキュメントやコミュニティのサポートはほとんど見つけることができません（StackoverFlowでここではほとんど言及されていません）だから、大規模なソフトウェアプロジェクトに頼ることができるかどうかはわかりません。

Answer 1

腰椎は行く方法であると決心しました。ここに記載されているように、ルートベースのモジュールのロードを使用して、「有効な」パッケージのみをロードするのに私のすべての私のニーズを解決するようです。 http://addyosmani.github.io/backbone-fundamentals/#route. - モジュールロード LUMBAR.JSON CONFIGファイルの各モジュールを宣言することで、定義された各モジュールに対して別々の組み合わされたJSファイルを作成し、そのルートが一致した場合にのみモジュールをロードします。 あなたはそれを胸部シードでそれをする方法を見ることができます： https://github.com/walmartlabs/thorax-seed/blob/master./readme.md

Answer 2

まあ、これは確かに主観的であり、選択肢はたくさんありますが、おそらくあなたの選択のいくつかについての背景情報が役に立つかもしれないので、私は思い切って推奨します Chaplin.

Marionette これは、Github 上のオープンソース プロジェクトとして開発されているなど、さまざまな理由で優れています。これは非常に軽量であることを目的としており、意図的に制限された機能セットに問題が発生しているようです。

Chaplin の上にあるフレームワークです Backbone.js 図書館のような Marionette その他のオプションもいくつかあります。どちらも、単一ページの JavaScript アプリケーションの開発を容易にすることを目的としています。このようなアプリケーションでは、生データを HTML にレンダリングするなど、通常サーバーで実行されるタスクをクライアントが実行します。

Backbone それ自体は、フル機能のフレームワークではなく、最小限のライブラリとして設計されています。 Backbone JavaScript アプリケーション アーキテクチャの基礎を提供することしかできません。両方 Marionette そして Chaplin のために生じた Backbone 現実世界のアプリには構造が少なすぎます。彼らは同じ問題に対応します。したがって、この 2 つの間には多くの類似点があり、おそらく相違点以上のものがあります。

マリオネットと比べると、チャップリンはフレームワークのように機能します。より独自の意見があり、いくつかの分野でより強力な規則があります。これは、構成原則よりも規則に従う Ruby on Rails のようなサーバー側 MVC フレームワークからアイデアを取り入れました。Chaplin の目標は、実証済みのガイドラインと便利な開発環境を提供することです。CoffeeScript と OOP

Chaplin は、JavaScript にコンパイルされるメタ言語である CoffeeScript で書かれています。ただし、Chaplin アプリケーションは CoffeeScript で作成する必要はありません。結局のところ、Chaplin は単なる JavaScript ライブラリです。

CoffeeScript の使用は、アプリケーション開発をより簡単かつ堅牢にするというチャップリンのアイデアの一部です。CoffeeScript は、Douglas Crockford の著書「JavaScript – The Good Parts」のガイドラインを適用します。マリオネットと同様に、チャップリンは ECMAScript 5 Strict Mode を提唱しています。

CoffeeScript を使用すると、クラス宣言とクラスベースの継承が Backbone の拡張機能に比べてコンパクトになります。Marionette がスーパーコールを回避しようとする一方で、Chaplin はメソッドのオーバーライドを採用し、クラスベースの継承がスムーズに機能するように努めています。たとえば、派生クラスとそのスーパークラスでイベント ハンドラーを宣言すると、両方が適用されます。CommonJS または AMD を使用したモジュール化

Chaplin では、JavaScript コードを CommonJS または AMD モジュールで構造化する必要があります。すべてのモジュールはその依存関係を宣言する必要があり、コンストラクター関数や単一のオブジェクトなどの値をエクスポートする場合があります。Chaplin では、通常、1 つのファイルに 1 つのクラスが含まれ、1 つのモジュールが定義されます。

コードを再利用可能なモジュールに分割し、機械が読み取り可能な方法で依存関係を宣言することで、コードを自動的にロードしてパッケージ化できます。

AMD を使用するのは簡単ではありません。Require.js などのローダーや r.js などのオプティマイザーに慣れる必要があります。代わりに、CommonJS モジュール形式と Brunch をプロセッサとして使用できます。

Chaplin は、完全に固定されたコア アプリケーション構造を提供します。アプリのメインフローを処理します。

The Application is the root class that starts the following parts
The Router replaces Backbone.Router
The Dispatcher starts and stops controllers when a route matches
The Layout is the top-level view that observes clicks on links

で Chaplin, 、すべてのルートを定義するための中心的な場所があります。ルートはコントローラーのアクションを指します。たとえば、URL パターン /cars/:id は、cars#show (CarsController の show メソッド) を指します。

コントローラーはモデルを作成する場所です。また、メイン コンテンツ領域のビューの作成も担当します。したがって、コントローラーは通常、アプリのインターフェイスの 1 つの画面を表します。

主なアイデアは、 Chaplin 使い捨てコントローラーです。基本的なルールは次のとおりです。現在のコントローラーとそのすべての子 (モデル、コレクション、ビュー) は、別のルートが一致すると破棄されます。ルートが同じコントローラーの別のアクションを指している場合でも、コントローラー インスタンスは破棄され、新しいコントローラー インスタンスが作成されます。

別のルートが一致した場合にオブジェクトを破棄することは、参照をクリーンアップするためのシンプルで効果的なルールです。もちろん、一部のオブジェクトは後で再利用するためにメモリに残しておく必要があります。の Chaplin.Composer を使用すると、制御された方法でモデルとビューを共有できます。それらを明示的に再利用可能としてマークする必要があります。保存されたオブジェクトが次のコントローラー アクションで再利用されない場合、そのオブジェクトは自動的に破棄されます。

で Chaplin アプリでは、すべてのオブジェクトは使い捨てである必要があります。全て Chaplin クラスには、オブジェクトを使用不能にしてすべての関係を切断するdisposeメソッドがあります。

JavaScript プログラミングのよく知られたルールは、グローバル変数を避けることです。チャップリンはこのベストプラクティスを実践しようとしています。クラスは、クロージャ スコープ内に隠された CommonJS/AMD モジュールです。すべてのインスタンスはプライベートである必要があります。2 つのインスタンスは、ビューとそのモデルのように密接に関連している場合を除き、相互に参照するべきではありません。

オブジェクトは、パブリッシュ/サブスクライブ パターンを使用して分離された方法で通信できます。この目的のために、Chaplin.Mediator が存在します。メディエーターは、ユーザー オブジェクトと同様に、選択したインスタンスをグローバルに共有するために使用することもできます。必要なプロパティを作成した後、メディエーター オブジェクトはアプリのキッチン シンクにならないようにシールされます。

Chaplin も強いです view management. 。アプリ全体の名前付き領域とサブビュー管理があります。Chaplin は、ビューのレンダリングと DOM へのアタッチに関して、異なるアプローチを採用しています。ビューには autoRender フラグとコンテナ オプションが含まれる場合があります。これらを有効にすると、ビューは作成時にレンダリングされ、自動的に DOM にアタッチされます。コンテナの代わりにリージョンを指定して、以前に登録したリージョンにビューをアタッチすることができます。

で Chaplin アプリ全体の領域以外には、次のような抽象化クラスはありません。 Marionette.Layout そして Marionette.Region. 。Marionette アプリでは、通常、複数のネストされたレイアウトとリージョンを作成します。Chaplin アプリでは、キー領域の数が減り、その中にビューが直接入れ子になります。もちろん、次のように動作する再利用可能なビューを作成することもできます。 Marionette.Layout, 、たとえば ThreePaneView です。