Ember.js と Rails

この記事は Ember.js Advent Calendar の3日目です。

クライアントサイド MVC フレームワークの時代が到来しつつある今、サーバアプリケーションの役割は JSON API だけになって Rails なんていう重量級のフレームワークは淘汰される……と思いきや、Rails と Ember.js を一緒に使うための便利な gem がいくつかあるので案外悪くないですよ、というお話です。

公式ガイドの Getting Started を Rails + Ember.js に移植したリポジトリを用意しました。Getting Started の章ごとにコミットしているので、比較しながら見ていただけるとわかりやすいかと思います。ボーナストラックとして Rails で作った JSON API と連携するコードも入れておきました。

このサンプルで使っている gem を簡単にご紹介します。

ember-rails

Ember.js を asset pipeline に乗せるための設定一式と generator を提供する gem です。特に Handlebars を扱えるのが肝で、テンプレートをファイル分割できて嬉しいのはもちろん JavaScript に precompile することでアプリケーションのパフォーマンスも向上します。

Rails.env が production のときはプロダクションビルドの ember.js (assertion が削ってある) を require するという小技も効かせてくれます。これ手動でやると結構面倒くさいんですよね。

ember-source, ember-data-source

その名の通り Ember.js と Ember Data のソースをパッケージしただけの gem です。ember-rails の依存パッケージになっているので Gemfile に追加する必要はないんですが、beta を使いたいときは自分でバージョンを指定してやります。

Hamlbars

みんな大好き Haml を Handlebars に変換してくれる gem です。else の記法がかなり苦しい感じになっていますが、Haml で書けるというメリットの前には些細なことなのです。ember-rails と組み合わせて Haml -> Handlebars -> JavaScript と多段 precompile をキメることができます。

なお、Slim っぽいのがお好みの場合は Emblem.js という選択肢もあるようです。

ActiveModel::Serializers

モデルを JSON に変換する、よくある類の gem です。使い勝手は正直あんまりよくないと思うんですが、デフォルトの設定で Ember Data とうまく連携できるようになっているところが強みです。ほら、簡単でしょう?


JavaScript メインのアプリケーションってビルド環境を作るのとライブラリの管理がとてもめんどくさいです。Grunt とか Bower とか色々試したんですが、私はやっぱり asset pipeline が一番楽でした。CoffeeScript が使えて Sprockets の directive が使えて、開発中はリロードするだけで反映されるし本番用に最適化もできる、しかも全部デフォルトでというのは圧倒的に楽です。

「Ember.js 興味あるけど色々準備するの面倒だな」とお思いのアナタ、Rails + Ember.js で始めてみてはいかがでしょうか!