@rhong_この広告は、90日以上更新していないブログに表示しています。2013-07-17中規模開発のためのBackbone.jsはじめにBackbone.jsを使って、管理画面を作ったときのことを備忘録も兼ねてまとめて記事にします。Backboneは入門やHelloWorldはたくさん情報があるんですが、実際使うとなると色々と考えることが多くて大変です。役に立てればと思います。JavaScript経験者2人。Backbone経験者0人。(・ω・`;)..全員JavaやScalaの経験がそれなりにある。はじめに今回は、全員3日程度ですがBackbone.jsを勉強する時間がありました。その間に自分がBackboneで一部分実装し、ベースを作成することに。Backbone.jsガイドブック。学習のとっかかりとしては、ドットインストールがいいんじゃないかと思います。ベースの作成コーディング規約まずはJavaScriptのコーディング規約を決めるところから始めました。ベースとした規約は、GoogleのJavaScriptStyleGuideです。このドキュメントは、とても長いのでポイントだけをまとめてコーディング規約としました。自分が規約を保守できる形で、かつメンバーが読みやすくしないと浸透しないと思います。jQueryやBackbone用の規約を色々追加してもいます。・jQueryオブジェクトをいれる変数には$をつける。$('#hoge');・View内でDOM探索する場合は、this.$を使う。(viewが扱うDOMの範囲が不明瞭になるため)$('.hoge');などなど決めました。随時追加していくのがいいと思います。次にディレクトリ構成を決めました。大体以下のような感じです。切って、どこに何があるか一発でわかるようにしました。app/collections/Hoges.jsというような感じです。app/views/hoge/HogeFoo.jsというようにしました。javaとかと同じです。(・ω・`)全体のView設計まず、画面のどこを何のViewにするか決めました。ヘッダーは、app.views.Header。サイドメニューは、app.views.Sidemenu。ページ切り替え時に再描画するエリアを、app.views.Content。いう感じで大枠だけいろいろ決めました。テンプレートJavaScriptのテンプレートエンジンは多々ありますが、今回はUnderscore.jsのtemplateを使っています。最初はHogan.jsを使ってたんですが、ロジックレス過ぎて辛かったのでやめときました。Underscoreのtemplateは、ロジックが書け過ぎて辛い..。1}});のようにして使いました。grunt-contrib-jstです。実践的なBackboneの使い方viewviewは何らかのDOMを管理していているが、viewを初期化時に、DOMを生成する方法と、探索する方法の2つがあります。DOMを生成する方法。何も指定しなければ空divが作られます。<div>クラスや属性を指定することもできます。data-hoge="1">DOMを探索する方法elにセレクタを指定すると、初期化時に探して保持してくれます。id="hoge">大体はDOMを生成する方を使いますが、HeaderやFooterなどはページ読み込み時に出てると思うので、DOMを探索するほうを使います。ロジックは極力viewに書かないviewはコントローラーでもあるので、ロジックを書くとテスト書けないし共通化もできなくなってしまいます。今回はhelperを作りロジックを切り出しました。helperは、ロジックやテンプレに渡す前処理を行ったりしたので、view-modelの役割もしていたようです。細かなTipsonではなくlistenToを使う。$('#hoge')とすると後者はview初期化時でなく、ページ読み込み時に探索されることに注意。(思い出したら追加してく...)modelmodelは以下のように基本的な使い方しかしてません。model).fetch();モデルは、viewでfetch()したりsave()したりしますが、fetch()した後の処理は、fetch成功時に発火されるsyncイベントを使います。this.hoge);collectioncollectionもmodelとほぼ同じ使い方でした。Pagerを使うときは、Pager用のcollectionを継承させて使ってました。Backbone用のPaginateはいくつかありますが、APIの結果の都合上今回は自前で作りました。https://github.com/backbone-paginator/backbone.paginatorhttps://github.com/ptnplanet/backbone-paginationhttps://github.com/wyuenho/backbone-pageablehttp://kataok.hatenablog.com/entry/2013/04/21/011300Underscore.jsについてBackboneはUnderscore.jsを使ってます。便利なので極力Underscoreのメソッドを使うようにしてます。View間をまたいだやり取り例えば、何かを登録したときに、サイドメニューを再描画させたいとか。ユーザー名を編集したときに、グローバルメニューに出てるユーザー名を変えたいとか。view間をまたいだやり取りにはイベントを使います。ようなHoge用のイベントを管理するクラスを作ります。このクラスはBackbone.Eventsを継承しています。グローバルメニューのviewで、app.events.HogeをlistenToしておきます。ユーザー編集のviewで、保存が完了したらtriggerしてあげます。するとlistenToしてるところでrenderを呼ぶようにしておけば、再描画できます。単体テスト今回は、jasmineを使いました。テストを書くところは、ロジックのみです。DOMがどうなったとかのテストが書いてません。保守が大変だし、書く手間もだいぶかかるからです。デザイン変えただけでテストがこけるとかやばいれす。いうものの、実際テストを書いてたわけじゃないので、実はそうでもないのかもしれません...ね。(・ω・...)テストの実行はgruntを使い、jenkinsでも動かしてciしてました。デバッグconsole.logしてもいいですが、debuggerを使うととても開発が捗ります。1;debugger;alert(hoge);こうすると、debuggerのところがブレイクポイントのような感じで、処理がストップしローカル変数をthisの中身をみれたり、ストップした状態で処理をconsoleで実行できます。console.logでデバックする時代は終わりました。(・ω・!コードレビューBackboneと関係ないですが、うちの会社ではプルリクエストを送らないと開発の本流ブランチにマージできないので、ほぼ全コードをレビューしています。最初のほうは色々レビュー指摘があったんですが、徐々に指摘する箇所が減っていってコードの質も上がっていきました。Backboneのような新しい取り組みでこそ、コードレビューが大切だし効果を発揮するなぁと思いました。さいごにBackboneは自由度が高く、色々と決めごとが多いため、最初のとっかかりは大変でしたが、軌道に乗るとみんなスムーズに開発進んでました。JavaScriptMVCは、(・ω・)イイ!のでぜひぜ挑戦してみてください。+クロスブラウザであるサイトから別ドメインのクッキーを書き込む。いうクッ...2011-09-29iPhoneアプリでNode.jsiphoneアプリでnode.jsと通信する。»プロフィールid:R-H技術系ブログ。