Single-page application

Single-page Application


本日のテーマ

なぜSingle-page Application(SPA)なのか

SPAの通信技術は？

バックエンドは？

JavaScriptフレームワークは？


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に必要な技術

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 Preproccessor

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


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


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


参考文献

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

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

Technology

stylussinglepage application

htmlsinglepage application

riaspasinglepage application

jquerysinglepage application

csssinglepage application

spa singlepage application

null singlepage application

spa websinglepage application