GAEpでiPhone向けWebアプリを作る (3)アーキテクチャについて

時間があきましたが、前回の続きです。

アーキテクチャについて

アーキテクチャと呼ぶほどたいしたものではないですが、概要を説明しておきます。

構成の概要とシーケンス

下図のようにしています。

1. まずユーザが、URLからビューとなるHTMLファイルをリクエスト。
2. HTMLファイルがブラウザにロードされる。
   • 同時にHTMLファイル内に指定されているcssファイルとjavascriptファイルもブラウザにロードされる。
   • この時点で、ビューとコントローラはすべてブラウザにロードされます
3. javascript からサーバにデータをリクエスト
4. ToDo のデータがJSON形式でサーバからブラウザにロードされる
5. javascript で、ロードされたJSONデータをHTMLにバインドする

構成の特徴

以下のような特徴でコーディングするよう自分に制限を課しました。

• ビューは html/css のみ
  • html/css には純粋にビューのレイアウト情報だけ定義します
• モデルとして、サーバサイドに WebAPI を定義
  • GAEp の RequestHandler として簡単な WebAPI を定義します
  • モデルは JSON 形式でサーバからブラウザに送信します
• コントローラは javascript のみ
  • ビューのコントロールはすべて javascript で実現します
  • サーバサイドでビューとモデルを結合することをしません
  • つまり、テンプレートエンジンでのビューとモデルの結合をやめます
  • ビューとモデルの結合は jquery で実現します

これにより以下のような効果を期待をします。

• ブラウザ上にロードされた html/css/javascript の塊は、ブラウザ上で動作するクライアントアプリとしての役割を果たす。
• クライアントコンポーネントの html/css/javascript は、最初にすべてブラウザにロードしておく。これによりビューの操作感が向上する
• つまり、クリックするたびの html/css 読み込みによる遅延を抑制する(JSON データのロード遅延のみ)
• これにより、ビューの柔軟性を高める。

今回は以上です。

備忘：次回は GAEp プロジェクトとそのファイル構成についての予定。