はじめに
スマートフォン向けFX情報サイトsmartfx.minkabu.jpをSocket.ioとBackbone.jsを使って今話題のSinglePageApplication(SPA)で構築しました。
想像していたよりも簡単にできたので、共有してみます。
Socket.ioを使う理由
マーケット情報は共通の情報のため、Socket.ioのBroadcastができ、かつ更新時のみ送信できるという性質がサーバにもクライアントにもやさしいです。
Backbone.jsを使う理由
SPAというと最近ではAngular.jsばかりが目立ちますが、Backbone.jsを選んだのは下記理由です。
1.AngularJSの場合は圧縮され最小化された状態で約36K、Backboneは6.4Kなのでスマホの回線を考えると、Backbone.jsのほうが優位です。
2. 拡張性もBackbone.jsはコメント行合わせて1600行ぐらいのため、読めるということだけでなく、自分でリソースを管理する(しないといけないということでもありますが。。)という点が複雑なリソースに対しても対応しやすいという意味で大きいです。
デモ
Socket.ioとBackbone.jsを組み合わせたデモ
デモの内容
単純に現在と5秒、10秒、30秒のリンクがあります。現在のリンクをクリックすると現在秒が表示されます。
n秒のリンクは、時刻がその秒数で割り切れた場合はサーバからその時刻情報がPushされ、その情報を画面下部に追記していきます。
リンクをクリックすると、URLが変わるためWebサーバにアクセスしているように見えますが、実際はJavaScriptのpushStateを使ってURLを切り替えているだけで、Webサーバにアクセスしていません。(pushstate非対応のブラウザは除く)
JavaScriptでURLを切り替えた後、バックグラウンドで新しい画面用のデータがもらえるように、Socket.ioを使ってSocket.ioサーバにデータを要求しています。
pushStateを使ってURLを変える理由は、SPAだとすべての画面が同じURLになってしまうため、特定の画面を直接開きたいといったことがそのままではできないためです。
URLを変えることにより、特定の画面に対してお気に入りに登録してもらったり、人にシェアしてもらったりすることができます。
ただ、検索エンジンに対しては、サーバ側でPhantom.js等を使って強制的に静的ページに変換するなどの対応が必要になります。
SPA構築のポイント
ズバリ、リソースの管理です。
サーバからなんでもかんでもデータをpushで受けてしまうと、膨大な通信量になり、処理負荷も高くなり、バッテリもすぐになくなってしまいます。
また、Timerやイベントハンドリングも必要がないまま残ってしまうと、メモリが逼迫したり、予期せぬ動作を招いてしまいます。
オブジェクトも適切に開放しないと、メモリが逼迫して、ブラウザが落ちる原因となります。
このあたりをふまえて、Socket.ioとBackbone.jsによるSingle Page Application実装編を記述しました。