SPA Single Page Applicationを作る際のエトセトラ(入門的な取っ掛かり情報)

SPA(Single Page Application)を実現する技術は、昔だとFlash, さらに昔であればJavaアプレットやActiveX?とかもありそうだけど、まぁー、今ならJavaScriptでゴリゴリという感じなのかな... HTML5とか、CSS3なんかもわかっていないといけなさそうな...

ということで、このエントリーでは、最近のトレンドを追いつつ、技術要素の下調べをして、採用する技術の目星をつけたいと考えています。

関連する書籍も、最近の技術を踏まえたものが幾つか出版されている模様

* [シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA](http://www.amazon.co.jp/gp/product/4873116732/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4873116732&linkCode=as2&tag=08181-22)
* [AngularJSリファレンス](http://www.amazon.co.jp/gp/product/4844336681/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4844336681&linkCode=as2&tag=08181-22)

直接は関係ないけれど、CSS周りの最近の考え方は押さえておきたい...
7,8年前のウェブ標準が流行っていた時に、かなり深堀して理解に努めたけど、HTML5+CSS3は追いきれていないので...

* [Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法](http://www.amazon.co.jp/gp/product/4844336355/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4844336355&linkCode=as2&tag=08181-22)

SinglePageApplicationで書籍を調べるとサーバ側は[Node.js](http://nodejs.org/)+[Socket.IO](http://socket.io/), フロントは[AngularJS](https://angularjs.org/)あたりが採用されるケースが多い？

Qiitaのタグで「[SinglePageApplication](http://qiita.com/tags/singlepageapplication)」を見てみると、フロントに[Backbone.js](http://backbonejs.org/)を使うケースもチラホラ

[Knockout](http://knockoutjs.com/)という選択も...

* [knockoutjs - KO + TypeScript で大規模 SPA 開発](http://qiita.com/sukobuto/items/392d35c1a7170c143278)

Qiitaから拾った以下のあたり、事前に把握しておくとよさげ

* [SinglePageApplicationにおける問題点と対応](http://qiita.com/takeshy/items/b7e1b6bd30d12ecb02c6)
* [Railsを使ってSingle Page Applicationを作るときの問題と対応](http://qiita.com/takeshy/items/cb1baa1fac98bb183864)
* [Railsを使ってSingle Page Applicationを作るときの問題と対応](http://qiita.com/takeshy/items/cb1baa1fac98bb183864)

先日のrebuild.fmで、Node.jsはフォークされた[io.js](http://iojs.org/)なる派生／亜流が出ているとか...

* [io.jsについて知っていること - from scratch](http://yosuke-furukawa.hatenablog.com/entry/2014/12/25/104300)

そのほか、ウェブで検索して見つけた色々

* [最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門 - SSSSLIDE](http://sssslide.com/speakerdeck.com/anatoo/zui-xin-spakai-fa-woxue-bou-uebuenziniafalsetamefalse-angularjsru-men)
* [FlexやSilverlightに頼らずリッチなWebアプリケーションを作る Single-page application](http://www.slideshare.net/sagawafumio/single-page-application-30482357)
* [SPAを構築するときに知っておいた方がいい7つの課題 - I am mitsuruog](http://blog.mitsuruog.info/2014/01/spa7.html)
* [「SPAを構築するときに知っておいた方がいい7つの課題」は課題ではない - albatrosary's blog](http://albatrosary.hateblo.jp/entry/2014/01/15/121608)

まとめ的なことは、上記の各エントリーを見れば良さそう...
SPAの採用や、採用する技術を検討する際の考慮点は、以下のあたりでしょうか？

1. フロント技術 e.g. AngularJS, Knockout, Ember.js, Backbone.js, etc
 * CSS周りの検討も必要？ e.g. Sassあたり？
2. サーバサイド e.g. Node.js, Socket.IO, Rails, etc
3. SPA周りの実践的ノウハウ
 * パフォーマンス
 * セキュリティ
 * ほか

ということで、AngularJS, Sass, Node.jsあたりを少し触って、もう少し具体的なイメージを膨らまそうかと... ということで、時折、お世話になっているドットインストールの以下のあたりをチョロチョロ試していこうかと

* [AngularJS入門 (全12回) - プログラミングならドットインストール](http://dotinstall.com/lessons/basic_angularjs)
 * [AngularJSで作るToDoアプリ (全4回) - プログラミングならドットインストール](http://dotinstall.com/lessons/todo_angularjs)
 * [AngularJSで作るYouTube検索 (全6回) - プログラミングならドットインストール](http://dotinstall.com/lessons/youtube_search_angularjs)
* [Sass/SCSS入門 (全15回) - プログラミングならドットインストール](http://dotinstall.com/lessons/basic_sass)
* [Compass入門 (全7回) - プログラミングならドットインストール](http://dotinstall.com/lessons/basic_compass)
* [Node.js入門 (全16回) - プログラミングならドットインストール](http://dotinstall.com/lessons/basic_nodejs)