Backbone + Marionetteオボエガキ

version	date	memo
0.1	2014/05/01	first

環境

Luxubuntu 12.04
Yeoman, nodejs 等

Node.js

Node.js

サーバサイドのJavascriptインタプリタ(いろいろできる)

npm

パッケージ管理ツール

インストール方法は、次ページ(visible true: Ubuntu 12.04.1 LTSにNode.js環境を作る)を参照の事。

Yeomanによる開発環境

スライド(まだ間に合うHTML5 - Yeomanで追いつけ！高速webアプリ開発)を参考にYeomanをインストール。

# -g はグローバルオプション
npm install -g yo grunt-cli bower generater-marionette

(* Marionetteを使うので、generater-webappの代わりに、generater-webappをインストール)

インストールされるコマンド

yo

プロジェクト作成

bower

パッケージ(ライブラリ)、及び依存関係の管理

grunt

サーバ

Backbone, Marionette

Backbone

JavascriptのMVCフレームワーク

Backbone.Marionette

Backboneのラッパー、Backboneの自由度を狭め、開発速度を向上させる。

Backbone.Marionetteについては、introduction to Marionette.js (jscafe14)を読むと良い。

Yeoman + Backbone.Marionette

参考ページ通りにすると、開発環境が整う(How to scaffold JavaScript Web Application in seconds using YEOMAN ? (example with Backbone Marionette) - My Programming Blog)

# テストパッケージ
npm install -g generator-mocha-amd
# アプリケーション開発用フォルダ作成＆移動
mkdir Sample
cd Sample
# Marionetteプロジェクト作成
# 取り敢えず、いろいろ聞かれるので、MongoDB以外はYes
# bowerのインストールフォルダはカレント(Enterを押すだけ)にする
yo marionette
# サーバ起動
grunt

サーバを起動すると、デフォルトのメインページが開かれる。
今後は、プロジェクトのファイルに何かしらの更新があると、ページも勝手に更新される。

ディレクトリの構造とかは、公式を参照にすると良い。(GitHub - mrichard/generator-marionette: Yeoman marionette generator a la AMD)

MVCクラス作成

MVCの各クラスを作成する際に、yoコマンドを用いて作成すると、クラスの配置、テスト(phantom jsを利用)ファイルの作成を自動でやってくれる。
phantom.jsの使い方はよくわからないが、取り敢えず、各クラスの作成方法を以下に記述しておく。
詳細は、公式を参照の事。(GitHub - mrichard/generator-marionette: Yeoman marionette generator a la AMD)

ルータ

app/scripts/routersに作成される

# ルータ作成
yo marionette:router [ルータクラスの名前]

モデル

app/scripts/modelsに作成される

# モデルの作成 (継承は省略可能)
yo marionette:model [モデル名] --inherit [継承元クラス名]

コレクション

app/scripts/collectionsに作成される

# コレクションの作成
yo marionette:collection [コレクション名]
# コレクションの作成（既存のモデルを指定）
yo marionette:collection [コレクション名] [モデル名]
# モデルとコレクションを一気に作成する
yo marionette:collection [コレクション名] --model [モデル名]  --create-all

ビュー

app/scripts/viewsに作成される

# ビューの作成
yo marionette:view [ビュー名]

アイテムビュー

app/scripts/views/itemに作成される

# アイテムビューの作成（継承は省略可能）
yo marionette:itemview [アイテムビュー名] --inherit [継承元ビュー名]
# アイテムビューとテンプレートを一気に作成
yo marionette:itemview [ビュー名] --create-all

コレクションビュー

app/scripts/views/collectionに作成される

# コレクションビューの作成（継承は省略可能）
yo marionette:collectionview [コレクションビュー名] --itemview [既存のアイテムビュー名] --inherit [継承元コレクションビュー]
# コレクションビューとアイテムビューを一気に作成
yo marionette:collectionview [コレクションビュー名] --itemview [アイテムビュー名] --create-all

コンポジットビュー

app/scripts/views/compositeに作成される

# コンポジットビューの作成（継承は省略可能）
yo marionette:compositeview [コンポジットビュー名] --itemview [既存アイテムビュー名] --inherit [継承元コンポジットビュー]
# コンポジットビューとアイテムビューを一気に作成
yo marionette:compositeview [コンポジットビュー名] --itemview [アイテムビュー名] --create-all

レイアウト

app/scripts/views/layoutに作成される
# レイアウト作成（継承は省略可能）
yo marionette:layout [レイアウト名] --inherit [継承元レイアウト名]
# レイアウトとテンプレートを一気に作成
yo marionette:layout [レイアウト名] --create-all

コントローラー

app/scripts/controllersに作成される

# コントローラー作成（継承は省略可能）
yo marionette:controller [コントローラー名] --inherit [継承元コントローラー名]

テンプレート

app/templatesに作成される

# テンプレート作成（テンプレート設置ディレクトリは、templates以下のディレクトリ）
yo marionette:tmpl [テンプレート名] --tmplLocation [テンプレート設置ディレクトリ]