Manning の “SPA Design and Architecture”、第1章のまとめです。

  • Manning[http://www.manning.com/scott2/]

1. シングルページアプリケーションとは何か

  • ウェブアプリ開発者の長年の夢は、デスクトップネイティブアプリに迫ること。
  • SPAも同じ。JS、HTML、CSSだけでネイティブのようなアプリを作りたい。
  • 2000年代初頭のAJAXから始まった。もともとはデータを非同期に送受信するためのIEのActiveXコントロールだった。それがXMLHttpRequestとして、メジャーなブラウザで採用された。
  • ユーザ操作を止めることなくリクエストを出せるAJAXと、動的にDOMを変更できるJS、そして動的にページのスタイルを変えられるCSSによって、AJAXはウェブ開発の最前線となった。
  • ページ内の操作だったAJAXをアプリ全体に適用したのがSPA。
  • 発展途上の技術のため、様々なやり方があり、様々なライブラリがある。自分のSPAプロジェクトにとって何が最適なのかを見極めるのは難しい。
  • SPAについて広い知識を持てば、正しい実装にたどり着きやすい。
  • 本書では MV* フレームワークに限定して解説しているが、React や Web Components のような別のアプローチもある。

1.1 SPA の概要

  • SPA ではアプリ全体をシングルウェブページとして作る。プレゼンテーションレイヤがサーバから切り離され、ブラウザによって管理される。
  • ビューの生成と管理がUIで行われ、サーバから独立する。サーバで部分的なレンダリングを行わないのであれば、サーバはもはやデータの表示には関わらない。
  • 全体としては、SPA も従来のウェブアプリも変わらない。主な違いは、ブラウザで画面全体をリフレッシュしないこと、プレゼンテーションロジックがクライアントにあること、サーバをデータの処理のみに利用することもできること、である。

1.1.1 ブラウザのリフレッシュをしない

  • SPA では、ビューは完全なHTMLではない。DOMの一部だ。
  • 最初のページロードの後、ビューの生成と表示をする処理は全てダウンロードされている。
  • 新しいビューが必要になると、ブラウザの名かでローカルに生成され、JS で動的に DOM にアタッチされる。
  • ブラウザのリフレッシュは不要。

1.1.2 プレゼンテーションロジックはクライアントに

  • プレゼンテーションロジックは、ほとんどクライアントサイドにあるので、HTMLとデータを組み合わせる処理はサーバからブラウザに移る。
  • サーバサイドと同様、元となるHTMLには、データと置き換えられるプレースホルダが埋め込まれている。
  • このクライアントサイドテンプレートを複製して新規のビューを作る。このテンプレートはページ全体のHTMLではない。ページの一部。
  • 正しいビューへのルーティング、データとHTMLとの合成、ビューのライフサイクル管理は、MV* フレームワークと呼ばれるサードパーティの JS に任される。

1.1.3 サーバのトランザクション

  • サーバからのデータをレンダリングする方法はいくつかある。サーバ側で部分レンダリングすることもできる。
  • 本書では、サーバからデータのみを受け取り、クライアントでレンダリングする手法について解説する。
  • 常に XHR API で非同期に通信される。データフォーマットはJSONであることが多いが、それ以外でも構わない。
  • 既にサーバサイドのMVCフレームワークを使っているのであれば、SPA と組み合わせるのは比較的簡単。

1.5.9 リリース前のチェック

  • SPA を作って、テストしたあとリリースしたいところだが、SPA が最適化されているか確認したくなるだろう。第9章で基本的なJSのプロファイリングについて述べる。