yaakaito.org

Chaplin Overview オレオレ意訳

BackboneJS, Chaplin, CoffeeScript, EnJa, JavaScript

こんにちは!うきょーです。 このエントリはChaplinOverviewのオレオレ意訳です。あんまり信用はしないでください。 おかしいだろそれ、というのあれば教えてください。

italicはこうでは、と思ったのを勝手に足してるところです。

アーキテクチャ

ChaplinはJavaScriptでWebアプリケーションを作るためのアーキテクチャで、backboneをベースにしてるよ。 moviepilot.comみたいな単一ページの大規模プロジェクトに使われてるよ。

フレームワーク

Application

ブートストラップ。Chaplinを利用する上で重要なとこだよ。

Router

定義されたURLマッピングにしたがって、Controllerの各アクションを呼び出すことを助ける部分だよ。 URLの変更などを監視して、責任を持つよ。 でも、Routerが直接Controllerをキックするんじゃなくて、それはDispatcherの仕事だよ。

Route

Railsに似たURLマッピングを提供するよ。route.coffeeみたいなファイル作るといいよ。 こんな感じで定義するよ。

1
match 'likes/:id', 'likes#show'

ルートにマッチしたら、GETパラメータと、パターン一致部分(例で言えばid) と、オプションの引数 を持って、matchRouteイベントを発行するよ。 これはDispactherに引き継がれるよ。

Dispachter

ルーティングに関するイベントをListenしてるよ。 対象のイベントが発生したら、それに対応するControllerのインスタンスを生成して、対象のアクション(Controllerのメソッド)を呼び出すよ。

Layout

Layoutはアプリケーションの中で一番外側にあるビューだよ。新しいControllerが起動されると、Layoutは新しいControllerをメインビューにするよ。

Layoutはアプリケーション内でのリンクをうまく処理する役割ももつよ。たとえば<a href="/foo">というリンクなんかも、正しく機能するようにしてくれるよ。

そして、windowdocumentなどのトップレイヤーに対するイベントハンドリングなどはLayoutで行うよ。

Mediator

Mediatorはpub/subを実装するためのブローカーだよ。 Chaplinアプリケーションでは、ほとんどのモジュール間通信で利用されるべきだよ。 モジュールはthis.publishEventでイベントを発行できるし、this.subscribeEventでイベントをリッスンできるよ。 例えばユーザーモデルのような永続的でグローバルにアクセス可能なものを共有するために使ったりもできるよ。

Controller

BackboneのControllerを継承してるよ。だからBackboneの方もちゃんと見た方がいいよ。

ControllerModelとそれに結びつけられるViewをインスタンス化して、管理するよ。 1つのControllerはアプリケーションの1画面を構成するようにするのが普通だよ。 けど、メインビュー的なものを提供して、他に現在のURLを表すためのコントローラーが存在することもあるよ。 (多分HeaderとかFooterなんかの共通パーツのこと?)

コントローラーはアプリケーションの機能を定義することが多いよ。 Controllerindexshoweditのようなアクションメソッドを提供することができるよ。 そしてこれらのアクションはURLが一致したときにDispactherから呼び出されるよ。

Model

BackboneのModelを継承してるよ。だからBackboneの方もちゃんと見た方がいいよ。

データと、それに操作を行うためのロジックをもってるよ。

Collection

BackboneのCollectionを継承してるよ。だからBackboneの方もちゃんと見た方がいいよ。

Modelのリストを持つためのものだよ。クライアントサイドでフィルタリングをしたり、ソートしたりするためのロジックをもってるよ。

View

BackboneのViewを継承してるよ。だからBackboneの方もちゃんと見た方がいいよ。

Modelをテンプレートを使って描画したり、その中に含まれるユーザーイベントなどを管理するよ。

Collection View

Collectionのためのビューだよ。それぞれのModelに対するViewを作って、それを管理するよ。

アプリケーションの起動フロー

アプリケーションは、Chaplin.Applicationを継承したところから始まるよ。 ApplicationではDispacther Layout Mediator Router の順で、これらをインスタンス化してセットアップしてね。

RouterRouteを登録するよ。普通は設定ファイルとしてroute.coffeeroute.js使うよ。 RouteControllerのアクションにURLパターンをマッピングするよ、たとえば/ならHomeControllerindex、という感じだよ。

ここまで終わったら、initRouterを呼び出して、URLの監視を始めよう。URLにマッチするパターンであれば、Dispactherや他のモジュールへ通知するよ。

Dispactherまで来たら、対象のControllerをインスタンス化して、対応するアクションを呼び出すよ。 DispachterはアクティブなControllerを管理していて、必要ないものを破棄するよ。

対応するアクションが呼び出されたら、ModelCollectionCtonrollerで生成して、それに対応するViewをレンダリングしていくのがよくある流れだよ。 ModelCollectionは必要に応じてサーバーからデータを取得したりするよ。 ModelCollectionと、それに対応するViewは、Controllerによって管理されるのが通例だよ。

メモリ管理について

Chaplinでは、適切なメモリ管理を行う、というのがコアにあるよ。

みんな、あまりJavaScriptでGCやメモリ管理に関する議論をしないけど、それは重要なトピックだよ。 イベントドリブンで動くシステムは、イベントを登録するときにオブジェクト間の参照が発生するし、それが削除されないと、メモリ解放されないよ。

だから、ChaplinではBackboneのModel、Collection、View、Controllerを拡張して、それらのクリーンアップを保証して、パワフルな処理プロセスを実装できるようにしているよ。

終わり

起動フローとかはコードと付き合わせないと分かりにくいところが多いと思うので、ost.ioのブートとか合わせて読むといいと思います。