0からはじめるBackbone.js Part.1
ソーシャルゲーム含め、スマートフォンサイトの急速なWebアプリ化に伴って、ちょっとね。
確かに細かい機能追加がどんどん重なってくると、いくらjQueryが凄かろうと1ページ1コードのその場しのぎの積み重ねじゃ、にっちもさっちもいかないラインがあるということ最近知り・・。
そういう意味でも、こういうフレームワークをクライアントサイドで操れるってのは、この先なにかと便利なのではないかと思って。
あと概念的な意味で、保守しやすいコード体系の思想とかも知っておきたいし。
お高い壁なのは100も承知ですが、やらなきゃなにもはじまらない！ということで。
MVCだのMVPだのそういう概念ちっくなものはまだまだ疎いですが、まずはコレから見ていきます。
はじめに
自分なりにまとめた考え方的なもの。
データそのものをModelやCollectionという概念で分けたり、画面の部品はView、画面遷移系はRouterなどなど、それぞれきっちり役目を分けることによって複雑に絡み合うコードではなく、疎結合なコードで幸せになりましょうというのが発端。
そのせいで多少コード量は多くなるので、作りたいものの規模やその先の機能追加の可能性など踏まえて採用するかどうかは決めるべし、と。
With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the Views that display the model's state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves.
以下、意訳。
Backboneでは、扱うデータをModelと称し、生成したりバリデーションをかけたり削除したり、サーバーサイドに保存したりします。
ユーザーの操作によってModelに変更があった場合、Modelはchangeイベントを発火します。Modelを表示するViewはそれらを即座に検知することができ、新しいデータによって自身を最新化することができます。
Backboneを使えば、IDでもってDOMを走査して値を当て込む・・といった面倒なことをする必要はなく、「Modelが変わればViewが書き換わる」という流れでシンプルにアプリケーションを作成できます。
なるほどー。
Backbone.js
参考：Backbone.js
困ったときの本家さま。
コンポーネント的には、
- Events
- Model
- Collection
- Router
- History
- Sync
- View
- Utility
と結構な種類があるようで。
いかに効率よくViewに対してModelを紐付けて、Eventsをバインド→キャッチしていくかっていうところに実装スキルが試される感じ。
「だいたいこういう感じ」ってのを掴むのがまずは最初の一歩っぽいなぁ。
以上、いろんなコンポーネントはあるようですが、まずは上記チュートリアルにあるように、
- Model/Collection
- View
- Router
というわけかたで見ていこうかと。
