はじめに
メンテナンス性の高いJavaScriptアプリケーションを作りたくて、Chaplin.jsに行き着きました。
あまり説明を書くと挫折しそうなので、あまり説明を書かずにこの通りやったらChaplinでWebアプリを作れるよという手順書形式で書いていこうと思います。
この記事は連載の予定で、最終的には簡単なノートアプリを完成させようと思います。イメージはSimplenoteです。
Chaplin.js？
Chaplin.jsはBackbone.jsをラップして作られたJavaScript MVCフレームワークです。
なんでChaplin.jsかというと、Backbone.jsはミニマム過ぎて、意外と問題に直面します。
- 意外と普通に必要そうなことができないので、自作ライブラリをけっこう書く羽目に。
- 構成などベストプラクティスが決まっておらず人によってバラバラになりそう。
特に後者はChaplin.jsだとベストプラクティスを定めてくれているので、それに則って作れば誰が作ってもいい感じになります。
システム構成
フロントエンドをChaplin、バックエンドをRailsで完全に別アプリとします。
RailsはAPIを提供し、それをフロントエンドアプリから利用するという構成にします。
分離する理由はクライアントライブラリの管理とビルドです。
Railsのasset pipelineとbower-railsを使うとか考えたのですが、そこはRailsの得意なところではなくどうも無理がある。
そこでBrunchを使用します。Brunchはフロントエンドアプリの雛形自動生成、ライブラリ管理、ビルド、テストを全て行ってくれるフロントエンドアプリのビルドツールです。
これがあるからアプリの分離に踏み切ったとも言えます。これでさらにフロントエンドアプリ開発のレールが定まり、生産性・メンテナンス性が上がります。
フロントエンドの環境構築手順
第一回の今回はフロントエンドの環境構築です。
Brunchを使って、Chaplinアプリの雛形を作って、Twitter Bootstrapのexampleを表示するところまでやります。
事前にnode.jsとnpmをインストールしておいてください。
brunchインストール
$ npm install -g brunch
generatorのためにscaffoltをインストール
（これを使ってrails generateみたいのができます）
$ npm install -g scaffolt
gitリポジトリを作ります。
$ mkdir noteapp-chaplin-example
$ cd noteapp-chaplin-example
$ git init
以下のようなディレクトリ構成にする予定です。
noteapp-chaplin-example
├── frontend
└── backend
chaplingのアプリの雛形作成
$ brunch new gh:paulmillr/brunch-with-chaplin frontend
$ cd frontend
以下のようなディレクトリができあがります。
appがアプリ本体ですが、見ての通り、ぱっと見でも初期化処理はここでコントローラはここでとわかりやすくなってます。
.
├── README.md
├── app
│ ├── application.coffee
│ ├── assets
│ │ ├── images
│ │ └── index.html
│ ├── controllers
│ │ ├── base
│ │ └── home-controller.coffee
│ ├── initialize.coffee
│ ├── lib
│ │ ├── utils.coffee
│ │ └── view-helper.coffee
│ ├── mediator.coffee
│ ├── models
│ │ └── base
│ ├── routes.coffee
│ └── views
│ ├── base
│ ├── home
│ ├── site-view.coffee
│ ├── styles
│ └── templates
├── bower.json
├── bower_components
├── config.coffee
├── generators
├── node_modules
└── package.json
試しに動かしてみる。
$ brunch w -s
localhost:3333にアクセスすると、以下の画面が表示されます。
gitにコミットしておきます。
$ git add .
$ git commit -m "フロントアプリの雛形作成"
Twitter Bootstrapをインストール
ライブラリの管理にはbowerを使うようになっています。
$ bower install bootstrap --save
Twitter BootstrapのStarter templateサンプルを移植します。
bower_components/bootstrap/examples/starter-templateの下の以下のファイルの内容を
index.html
starter-template.css
以下のファイルに移植します。
Brunchで構成を作ったChaplin.jsではテンプレートエンジンにHandlebars.js、CSS PreprocessorにStylusを使います。
あと、Sassで言うCompassに当たるnibのドキュメントも見ながら開発することになります。
app/views/home/styles/header.styl
app/views/home/styles/home-page.styl
app/views/home/templates/header.hbs
app/views/home/templates/home.hbs
app/views/styles/application.styl
app/views/templates/site.hbs
再度localhost:3333にアクセスすると、Twitter BootstrapのStarter templateが表示されます。
まとめと次回予告
今回の構成のようにフロントエンドとバックエンドは完全に別アプリとして分離する方がそれぞれの得意なところを活かせるのかなと最近思っています。
ここまでのソースはGithubにアップしています。
https://github.com/atskimura/noteapp-chaplin-example/tree/article_1
次回はデータを保存しないノートアプリまで持って行きましょう。