Single-page application

本日のテーマ

なぜSingle-page Application(SPA)なのか
SPAの通信技術は？
バックエンドは？
JavaScriptフレームワークは？

Single-page Application

Name:
!

佐川夫美雄
@albatrosary
http://albatrosary.hateblo.jp/
html5jエンタープライズ部副部長
HTML5Expert.jpコントリビュータ
Sencha UG


Single-page Application(SPA)とは

単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはRESTやWebSocket等を利用


RIA(Rich Internet Application)に求められたもの

表現力の高さ：動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の再生機能
を備える

デスクトップアプケーションと同等なUI：画面をリフレッシュすることなく、バック
エンドでサーバーとデータの送受信が可能

ユーザーエクスペリエンス：ユーザーの操作が即座にレスポンスされ、表示される画面の情報が
操作に応じて随時変化するようなインタラクティブな操作性を実現


RIAの衰退

2010年にSteve JobsがFlashを激しく批判
プロプライエタリよりオープン性のあるHTML5を推進

!

2011年MicrosoftはWeb開発者に対するSilverlight戦略を後退
AdobeもモバイルFlashの開発を中止
2014年HTML5正式勧告


HTML5を使えばRIAと同等のユーザビリティが可能


RIAからSPAへ


待った無しです


何をすれば良いのか？

JavaScriptフレームワークの導入？
開発環境は？
通信は？
バックエンドは？
HTML5と関係する？
etc


その答えを今日は出します


SPAに必要な技術

JavaScriptフレームワーク
altJS
CSS Preprocessor
開発環境
通信技術
Webアプリケーションなどのバックエンド技術
そしてHTML5


SPAに必要なフロントエンド技術


Single-page Application(SPA)の基本的な構造

change
render

DOM
events

View

Template

get
set

Model
Collection

REST
Storage


jQueryだけの開発はカオス


JavaScriptフレームワーク
すでにJavaScriptフレームワークは数十種類ある
自分のプロジェクトにあったものを選ぶ

backbone.JS(http://backbonejs.org/)
Angular(http://angularjs.org/)
Sencha(http://www.sencha.com/)


JavaScriptは危ない言語


altJS
altJSの言語の多くはクラス機構のサポート
JavaScriptの抱える問題の多くを解決

CoﬀeeScript
TypeScript


膨大なCSSをどう整理するか


CSS Preproccessor
膨大なCSSをどう整理するか

Sass + Compass
Less
Stylus


どうやって開発するの？


開発環境

Yeoman
Sencha cmd


SPAに必要なフロントエンド技術(まとめ)


SPAを開発するには強固なバックエンド技術が必要


SPAに必要なバックエンド技術

通信
Webアプリケーションサーバ


通信技術

REST
WebSocket
SPDY


Javaで対応
次世代型：クライアントとサーバ間をデータのみで通信し，画面の生
成から表示までをクライアントで行う方式

従来型：サーバ側でデータを埋め込んだ画面を生成し，クライアント
では表示のみを行う方式

基本的にはJavaScriptで多くの処理を行い，以下
のような通信技術を利用して，データのみをサー
バとやり取りします
!
JSON 1.0
JAX-RS 2.0
WebSocket 1.0

SPAのメリット

ページを遷移させてもJavaScriptのグローバル環境が変わらない
WebSocketが有効に使える


これで安心？


SPAの懸念

パフォーマンス
メモリリーク
セキュリティ
フレームワークロックイン
設計思想の転換
フロントエンジニア不足


パフォーマンス
Sencha Touchの開発チームがHTML5で高速に動作す
るfacebookを開発したことは有名な話

DOMツリーを分離して小さく
TaskQueueで不必要なレイアウト処理を停止
入出力処理はWebWorkersで止めない


メモリリーク

アプリケーションを使い続けた結果メモリーリークが原
因で画面がフリーズするという問題は発生
!

地道に残っている参照にnullを入れがベージコレクショ
ンの対象にします


セキュリティ

業務Webアプリケーションの場合のすべてをhttpsで動かす。
セキュアな環境はSSL-VPNなどを使用し比較的簡単に手に入
れることができる。


フレームワークロックイン

使わざる終えない
オレオレフレームワークは使わない
そのとき選んだフレームワークが最適だとしても未来永
劫最適ではない


設計思想の転換

アーキテクチャを理解し重順に対応


フロントエンジニア不足

JavaScriptエンジニアというよりjQueryエンジニアがほとんど
altJSを使って知識不足を補う


冷静に対応すれば道は開ける


ご清聴ありがとうございました


参考文献

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
http://gihyo.jp/news/report/2013/09/1901?page=2
http://new.takyam.com/entry/2012/12/30/2013%E5%B9%B4%E3%81%AFSPA
%E3%81%AE%E5%B9%B4%E3%83%BB%E3%83%BB%E3%83%BB%E3%81%AB
%E3%81%AA%E3%82%8B%E3%81%A8%E3%81%84%E3%81%84%E3%81%AA
%E3%81%81
http://www.johnpapa.net/spa/
http://singlepageappbook.com/index.html


Single-page application

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (8)

Similar a Single-page application

Similar a Single-page application (20)

Más de Fumio SAGAWA

Más de Fumio SAGAWA (10)

Último

Último (7)

Single-page application