Single page applicationとは

Single-page Applicationとは

佐川　夫美雄 @albatrosary 株式会社ゼノフィ

佐川　夫美雄

HTML5Expert.jpコントリビュータ HTML5 fun !html5jエンタープライズ部 副部長 html5j Web Platform部 knockoutjs Japan UG（仮） Sencha UG CO-ORGANIZER AngularJS Japan User Group

http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/

(Fumio SAGAWA)

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に必要なフロントエンド技術

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

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

events

renderchange

REST

Storage

get

set Model Collection

TemplateViewDOM

jQueryだけの開発はカオス

JavaScriptフレームワーク

backbone.JS(http://backbonejs.org/)

Angular(http://angularjs.org/)

Sencha(http://www.sencha.com/)

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

JavaScriptは危ない言語

altJS

CoffeeScript

TypeScript

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

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

CSS Preprocessor

Sass + Compass

Less

Stylus

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

どうやって開発するの？

開発環境

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を使って知識不足を補う

Thanks.