クライアントサイドフレームワーク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!