クライアントサイドフレームワークbrunchでアプリを作ってみた


http://ninoseki.github.com/local-scrum/
こんな感じのスクラムボード風HTML5アプリをクライアントサイドフレームワークbrunchを使って作ってみたのでメモ。
以下はbrunchの紹介。

brunchって?


brunchは軽量なクライアントサイドフレームワーク
Backbone.js(+Underscore.js),Stich,Eco,Stylus,jQueryといった各種フレームワーク&ライブラリの組合せから成るフレームワークで、CoffeeScriptを使用することが前提。
基本はBackbone.js。

普通にBackbone.jsを使うのと何が違うの?

brunchを使うとView周りがきれいに書けるところが良いと思う。
この例のようにHTMLの中にテンプレートを記述して使用するやり方だとごちゃごちゃしてしまいがち。
brunchはecoを使うことで、ここら辺がきれいに分離できる。

あと、ディレクトリ構成がかっちり決まるところもナイス。

インストール

npm install -g brunch

プロジェクト作成

brunch new []

brunchプロジェクトが作成される。
プロジェクトのディレクトリ構成は以下のようになる。

build/
  web/
config.yaml
src/
  app/
    collections/ (Backbone.jsのCollection)
    models/ (Backbone.jsのModel)
    routers/ (Backbone.jsのRouter)
    styles/ (Stylus)
    templates/(Eco)
    views/ (Backbone.jsのView)
  vendor/ (サードパーティのライブラリ)

src/app以下にBackbone.jsを基本にしてコードを書いていくことになる。

brunch watch []

でコードの変更を監視して自動的にコンパイルが行われる。
Stylusはbuild/web/main.cssに、Backbone.jsとEcoはbuild/web/js/main.jsにまとめてコンパイルされる。

まとめ

Backbone.js + CoffeeScriptをベースに効率的かつ一貫性のある開発ができるフレームワーク、それがbrunch。
これは中々いけてるんじゃないでしょうか。
公式で公開されているサンプルコード(Backbone.jsのTODOアプリのbrunch版)を見てもらえば、brunchの良さがわかってもらえるはず。
check it out!