Life is beautiful

東京Node学園祭2012 アドベントカレンダー １４日目の記事です。イベントの告知の意味も含めて、毎日だれかが１つづつ node.js についてブログで書く、という企画だそうです。

そこで本題ですが、github に ajmax という node.js モジュールを公開しました。npm にも登録してあるので、"npm install ajmax" でインストールが可能です。

詳しくは readme ファイルに書いてありますが、英語なので簡単に解説すると、AJAX（eye candy 的な AJAX ではなくて、実際に非同期にデータをサーバーから取得してページの一部をアップデートするタイプの AJAX） を活用した one-page web application を作るための micro MVC framework です。 

これまでいくつか AJAX を駆使したアプリを作って来ましたが、

1. ユーザーイベント（主にクリック）にキャッチし
2. サーバーと非同期通信をし
3. 取得した JSON データと HTML テンプレートを結合し
4. JQuery selector で指定した場所にその HTML を置き
5. さらにそこで生成されたエレメントのいくつかにユーザーイベントを紐付ける

という似たようなパターンのコードを何度もぐだぐだと書かなければいけないのがどうにも気に入りませんでした。そこで、必要なパラーメータだけ JSON で記述してしまえば、メンテナンスもしやすいだろうと、作ったのが、ajmax でも使われている DBI (Data-Binding Instructions) です。

例えば、Facebook の Graph API から取得した友達リストをテンプレートで表示した上で、友達がクリックされたときに、'friend_selected' というイベントを発行するには、以下のように書きます。

FB.api('/me/friends', function(result) {
  ctx.exec([
    { cmd:'html', params:{ template:'friends', selector:'#contents' }}, 
    { cmd:'html', params:{ data:result.data, template:'friend', selector:'#friends', 
      bindings:[
        { selector:'.friend', on:'click', actions:[ 
          { cmd:'emit', params: { event:'friend_selected', target:'client' } } 
        ]}
      ]}
    }
  ]);
});

ちなみに、DBI は JSON なので、サーバー側で記述してクライアントに送ることも出来るし（code-on-demand です）、イベントをクライアントからサーバーへ、もしくは、逆にサーバーからクライアントに送ることも（ただし HTTP を使っている限りは、HTTP のレスポンス時にイベントを発行します）可能です。

サンプルとして、全く同じ動作をするアプリを、片方は DBI をクライアント側で記述し（example_c）、もう片方は DBI をサーバー側で記述する（example_s）、という二通りの方法で書いてみました。

ちなみに、ajmax モジュールそのものは、他のモジュールに依存していませんが、サンプルアプリは node-satatic に依存しています。

モジュールは、サーバー側で使う ajmax.js と クライアント側で使う ajmaxc.js の二つで構成されていますが、DBI をすべてクライアント側で書く場合にはサーバー側のモジュールは必要ありません（つまり、ajmaxc.js は、node.js 以外のサーバーで作るアプリにも応用できます）。