Help us understand the problem. What is going on with this article?

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

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

参考リンク

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away