シングルページアプリケーションとDurandal.js

先月終わったばっかりのエンタープライズ向けのプロジェクトで最近話題になっているシングルページアプリケーションを作ったので、感想をシェアしたいと思います。


シングルページアプリケーション(SPA)とは?

シングルページアプリケーション(以下:SPA)という言葉、このページを読んでる皆さんはおそらく聞いたことがあると思いますが、実際にSPAで大規模プロジェクトをこなした経験を踏まえ、いくつかの観点からSPAの特徴をまとめておきます。

SPAは、画面の挙動と画面間の遷移が完全にクライアントサイドのJavaScriptにコントロールされ、サーバーの役割は主にクライアントが求めるデータの提供/処理に限るアプリケーションのことです。


主なメリット

  • リッチなUI

    UIが豊富で複雑なアプリケーションを作るときに、画面の挙動と画面間の遷移をコントロールしやすく、ネイティブアプリケーションのような感覚をユーザにもたらすことができます。

  • 通信量の削減で、反応速度アップ

    画面を構成するほとんどのリソース初期ロードし、あとはデータ通信のみなので、3GやLTEを使うモバイル端末にとってやさしく、画面表示が速いです。例えば、サーバーからのデータを必要としない画面を即時に表示できます。

    一方、画面を表示するのに複数のAPIからのデータが必要になったときに、平行の複数のHTTPリクエストでそのデータが取得できるので、こちらも画面の表示をはやくすることができます。

SPA用のフレームワーク

SPA用のフレームワークは幾つかありますが、僕らが使ったのは、Durandal.js というものです。

Durandal.js を選んだメインの理由は以下の通りです。

  • Durandal.js 内部では、実績の多い Knockout.js を利用している
  • SPAを作るのに必要な機能を完備している
  • Durandal.js による開発は非常に容易で、学習コストが比較的に低い
  • Durandal.js 内部では、 Require.js を利用しているので、モジュラリティが高く、様々なライブラリが簡単に使える

大規模の業務系アプリケーションの作成に Durandal.js を使った経験を顧みると、フレームワークとしての簡単さとアプリケーションの実装における自由度の高さが魅力と感じました。

上記で平行の複数のHTTPリクエストのメリットの話しをしていたので、Durandal.jsでの実際の実装方法を紹介したいと思います。

ちなみに、使ったバージョンは1.2でしたが、既に2013年8月にバージョン2.0がリリース済みで、このブログを執筆時点で、2.1は開発中というステータスです。

Leave a Reply

Popular Posts