はじめに

ITエンジニア勉強会~ Engineer’s Learning Vesper という勉強会で 『AngularJSでのモバイルフロントエンド開発』 というタイトルの発表をしてきました。

要約をこちらにも投稿します。スマホ用のWEBサイトに AngularJS の導入を検討されている方の参考になれば。

AngularJSとは

モバイル環境で AngularJS を利用する際は（AngularJS に限らずフロントエンドは） 通信頻度/量の削減 が不可欠です。

ファイルの数と容量を減らす
- JavaScript/CSSファイル群の ファイル圧縮(minify) , ファイル結合(concat)
- 画像ファイルの最適化(縦横サイズ、容量)
  - もしくは CSSスプライト を利用
- ファイル郡の gzip 圧縮
ブラウザに読み込んだものは使い回す
- JavaScript/CSS/HTML/画像/連携APIの ブラウザキャッシュ
  - HTTPレスポンスヘッダの最適化(サーバ側)
  - ブラウザからの条件つきリクエストへの対応(サーバ側)
- メモリ(JavaScriptオブジェクト)
  - モデル をきちんと設計
  - AngularJSに限った話であれば、
    - HTMLは angular-ui-router の テンプレート機構 でメモリへキャッシュ
    - 外部APIは $httpサービス でメモリへキャッシュ
- ..HTML5の Application Cache は使い勝手が悪い
遅延ロード(必要になったらロード)
体感
- レスポンスを待ってる感が無い UIを考える
- ユーザが気づかないうちにAPIを叩く
  - 先読み、非同期
ネットワーク
- 静的リソース群なので CDN (Contents Delivery Network) を利用するのがお手軽。
  - AWS でいえば CroudFront
- 接続コネクションの keepalive

通信まわり以外でも、下記を気にする必要がある。

ソースはブラウザ側なので 全て解読される 前提で
- 中間者による改竄を防ぐなら全てSSLページで
- 重要な処理は、やはりサーバ側にAPIを用意する必要ある
フロントエンドで考えるべきは大きく３つ
1. DOM Based XSS (Cross Site Scripting)
2. CSRF (Cross Site Request Forgeries)
3. CSP (Content Security Policy)

クローラが JavaScriptを解釈しない？ かもなので注意
- つまり、JavaScriptで動的に描写したHTMLコンテンツを読ませることが出来ない
- 必要あらば PhantomJS 等のサーバ側JavaScriptでコンテンツ書き出し

ちゃんとやるなら、例えばネィティアプリのように バージョンアップ通知 を表示する
- 運営側で新しいソースコードをブラウザ側へ反映したい場合
- メモリ系はブラウザをリロードさせればOKだが、ブラウザのファイルキャッシュやストレージも対象となるので、ちゃんとやるなら作り込みが必要かも

導入の際にどのような点に注意するべきかが伝われば幸いです。

また、以前に『HTML5 Japan Cup 2014』というイベント向けに、個人で AngularJS と Onsen UI で作成したものが下記にあります。ライトなものですが、宜しければ参考にしてください。

今のところ、こういうライトなものだったら十分に使えるんじゃないかな、と思います。
（もちろんヘビーなものも、ちゃんと作ればいけるとは思います。）