BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Ampersand.js - Backbone.jsに対抗する"フレームワークらしくない"フレームワーク

Ampersand.js - Backbone.jsに対抗する"フレームワークらしくない"フレームワーク

原文(投稿日:2014/06/27)へのリンク

&yetがリリースしたAmpersand.jsは,Backbone.jsに強くインスパイアされた,JavaScriptアプリケーション開発のための"フレームワークらしくない”フレームワークである。Backbone.jsとの大きな違いは,モジュール性の高さと,いくつかの新しい(自由に選択可能な)機能が加えられていることだ。

ブログでの発表記事には,同社がBackbone.jsに多大な投資をした後に,そこから離れて独自のフレームワークを開発するに至った経緯が説明されている。

&yetでBackbone.jsを使っていて,特に大規模なアプリケーション開発で問題になっていたことのひとつが,モデルが保持しているはずのプロパティをドキュメント化するためのまともな手段です。

Backboneモデルはもともと,特定の構造というものを持っていません。どのようなプロパティをストアするのか,どこかに宣言する必要がないのです。その結果として,あちらこちらのビューにある雑多なプロパティが,モデルにストアされ始める事態は避けられません。新しい開発者からすれば,プロジェクトのモデルを見て,どの状態がトラックされているかを正確に把握するための,適当な手がかりが存在しないことになります。

この問題を解決して,モデル構造を一定の枠にはめるために,"Human JavaScript"という本に取り上げられている思想に沿って,"HumanModel"という名の代替モデルを開発しました。今は"ampersand-model"に姿を変えたこのモデルには,ストアするプロパティの宣言が必須である,プロパティを継承宣言することができる,などの違いがあります。

最初はBackbone Collections内でこの代替モデルを使用していたのですが,そこでまた問題に突き当たりました。Backboneでは一般的に,Backboneにストアすることが前提です。一方,モデルはコレクションで構成されています。そのため,インスタンス化したモデルをコレクションに追加すると,それがすでにモデルであるため,実体化に失敗します。これを修正するためにパッチを書いたのですが,こ例外にも,もっとフレキシビリティの欲しい部分があったのです。

&yetがBackboneで発見した重要な問題は,機能のバンドリングである。同社のアプリケーションでは,機能のスワップインやスワップアウトが可能なフレキシビリティが必要だったのだ。そのためAmpersand.jsでは,すべての機能部分を,独自のCommonJSモジュールとして体系化している。モジュールの配布と管理には,node.jsのパッケージマネージャであるnpmを使用する。モジュールはBrowserifyを使用して,ブラウザ上で動作する単一の(可能な限り縮小化した)JavaScriptファイルに"コンパイル"される。これらによって,必要なモジュールのみを選択的に使用することが可能になると同時に,NPMから任意のモジュールを容易に組み合わせることができる。

現在のAmpersand.jsはGitHubで個別のリポジトリにホストされた,およそ2ダースのモジュールで構成されている。その中のひとつであるコマンドラインツールは,&yetが推奨する構造を持ったAmpersand.jsプロジェクトをセットアップして,フォームやビュー,コレクション,モデルの枠組みを生成する作業を簡単に行うツールである。

その他の重要な(そして最もよくドキュメント化されている)モジュールには次のものがある。

  • ampersand-state: Backbone.jsのモデルと似ているが,RESTfulサービスとはまったく結び付いていない点が異なる。この機能はampersandモデルに追加されたもので,状態クラスのプロパティへの型付けと,設定時の型検査を行うことができる。
  • ampersand-model: ampersand-stateを拡張して,サーバからのオブジェクトの読み込みと保存,同期を行うメソッドを追加したもの。
  • ampersand-collection: Backbone.jsのコレクションに相当するが,読み込みと保存の機能が省略されている。
  • ampersand-rest-collection: ampersand-collectionを拡張して,RESTfulサービスとの読み込みと保存を行うメソッドを追加したもの。
  • ampersand-view: Backbone.jsのビューと同じく,モデルをDOMにバインドするための機構。
  • ampersand-form-view: データバインディングを備えた固定フォームを簡単に開発可能なモジュール。
  • ampersand-router: ページを再ロードせずにブラウザのURLを更新するルータ。このモジュールのコードは大部分がBackbone.jsのコピーで,いくつか拡張されている。

Backbone.jsに慣れていれば,Ampersand.jsを使い始めるのは簡単なはずだ。Ampersand.jsはMITライセンスで,GithubあるいはNPMから入手することができる。

この記事に星をつける

おすすめ度
スタイル

BT