The Document of Aska

1-1. One Page Application

概要

One Page Applicationとは...

  • 1枚の静的なHTMLとJs/WebAPI等で構成されたWebアプリケーション
  • Webアプリケーションを強化し続けた結果生まれた一つの形態

Webアプリケーション

本ドキュメントではGmailやTweetDechやCacooや7kai Tasks等、ネイティブアプリケーションの様なUI設計をされたWebシステムをWebアプリケーションと呼んでいます。

一般的なWebサービスをなんでもアプリケーション化した方が良いという趣旨のドキュメントではありません。

One Page

遷移は即ちアプリケーションの再起動です、多くの場合初期化は最も重い処理なので操作の途中で遷移を介すと大きなオーバーヘッドとなります。

Google AppsではMail/Calendar/Spreadsheets等を別アプリに分けており、開く際も別タブ・ウィンドウで開くように工夫されています。

Static HTML

  • オフライン対応が可能
  • Cacheが可能

現状HTML5のapplicationCacheが安定して使用できるのは一部のブラウザとスマートフォンのみですが、必ずしもオンラインではないスマートフォンでオフライン対応があることは大変有意義です、またオンライン時もリソースに変更がない場合キャッシュが利用される点でも有用です。検証した時点ではChromeでの動作に不具合がありました、PC版での利用が出来るようになるのは少し先になりそうです。

vs Native App

Web標準技術を利用する為、リリースサイクル・コスト面で有利です。逆に性能・機能では突き詰めるとネイティブアプリに軍配が上がります、これまで通り用途に応じた選択が必要ですが、Webで賄える領域は日増しに広がっています。

比較

- Web OPA Native
開発コスト ◎ ◯ △
リリースサイクル ◎ ◎ △
パフォーマンス △ ◯ ◎
マルチプラットフォーム ◎ ◎ ◯

アーキテクチャ

  1. HTML/CSS/Jsがロードされる
  2. 読み完了後js実行
  3. localStorageやAjaxでセッション復元、画面構築
  4. セッションが無い場合サインイン用のパーツ表示