Railsで開発しているなら使用するべきSPAに特化したライブラリ(Cape js)

・インタラクティブなサイトを作りたい！
・シングルページなアプリケーションに特化したサイトを作りたい！
等の要望が昨今高まっていますがRailsで開発していてJQeuryを使用して開発するとコード量が長くなってハードなコードディングになってしまったり、テストがめんどくさかったりします。かといってAngularやBackboneを使用するのは敷居が高そうな気がしたり、学習のコストがかかりそうな気がする。

学習のコストが低く、仮想DOMに特化したライブラリでRailsで開発しやすいものはないだろうか？
そんな疑問に答えてくれそうな？？？ライブラリを紹介します。

Capejsは今はやりのシングルページアプリケーションに特化したライブラリです、Virtual Domを使って実装されているためとても軽量にサクサク動きます。

RailsやReactやRiotに影響を受けていてRailsでおなじみのRESTfulなURLやform_for, fields_forなどが使えます。

##特徴的な点

・Virtual Dom
・Markup builder
・Form manipulation
・Data stores
・Router

Virtual DomはDomの差分を読み込んでページ読み込みを早くしてくれます。
Matt-EschのVirtual Domを使用しているみたいです

Markup builderを使用すればHTMLタグを簡潔に生成できる

//es6で書いてます
//capejsを使用すればネストした形で分かりやすい形でHTMLコードがかける
b.table(b => {
 b.tr(b => {
   b.th('')
     b.th('名前')
   })
   b.tr(b => {
     b.td('')
     b.td('hoge')
   })
 })

//下記のHTMLコードが生成されます

//<table>
//  <tr>
//    <th>名前</th>
//  </tr>
//　<tr>
//    <td>hoge</td>
//  </tr>
//</table>

Form manipulationはRailsライクなformが生成できます。

本ドキュメントからの抜粋ですが

render: function(m) {
  m.formFor('user', function(m) {
    m.textField('name');
    m.checkBox('privileged');
  })
  // The above code generates the following HTML tags
  //   <form name="user">
  //     <input type="text" name="user.name"
  //       id="user-field-name">
  //     <input type="hidden" name="user.privileged"
  //       value="0">
  //     <input type="checkbox" name="user.privileged"
  //       id="user-field-privileged" value="1">
  //   </form>
}

Data storesはデータの流れを管理する。

本ドキュメントから抜粋

var CounterStore = Cape.createDataStoreClass({
  init: function() {
    this.counter = 0;
  },
  increment: function() {
    this.counter++;
    this.propagate();
  }
});

var cs = new CounterStore();
// cs.counter === 0

Routeは

var router = new Cape.Router();
router.draw(function(m) {
  m.namespace('admin', function(m) {
    m.many('articles');
  })
})

のように書くと

Hash pattern	Container	Component	Namespace	Resource	Action
admin/articles	Admin.Articles	List	admin	articles	index
admin/articles/:id	Admin.Articles	Item	admin	articles	show
admin/articles/new	Admin.Articles	Form	admin	articles	new
admin/articles/:id/edit	Admin.Articles	Form	admin	articles	edit

ルートが生成されます。

ビルドを動かす手間やHTMLタブを直接埋め込んで書く必要は無い
Rails側は簡単なAPIにとどめておき、Capejs側でガシガシ開発するスタイル

詳しいところは下記のサイトのご参照下さい。
・Capejs
・Document
・Cape.JS 入門