JavaScript
Rails
brunch
Chaplin.js

Chaplin.js、Brunch、Railsを使ったWebアプリ開発(1)〜フロントエンドの環境構築

More than 5 years have passed since last update.


はじめに

メンテナンス性の高い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にアクセスすると、以下の画面が表示されます。

スクリーンショット 2013-10-30 23.11.40.png

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が表示されます。

スクリーンショット 2013-10-31 17.19.09.png


まとめと次回予告

今回の構成のようにフロントエンドとバックエンドは完全に別アプリとして分離する方がそれぞれの得意なところを活かせるのかなと最近思っています。

ここまでのソースはGithubにアップしています。

https://github.com/atskimura/noteapp-chaplin-example/tree/article_1

次回はデータを保存しないノートアプリまで持って行きましょう。


参考リンク