Transcript
Single-page Application
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
Single-page Application(SPA)とは
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはRESTやWebSocket等を利用
Single-page Application
RIA(Rich Internet Application)に求められたもの
表現力の高さ：動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の再生機能
を備える デスクトップアプケーションと同等なUI：画面をリフレッシュすることなく、バック
エンドでサーバーとデータの送受信が可能 ユーザーエクスペリエンス：ユーザーの操作が即座にレスポンスされ、表示される画面の情報が
操作に応じて随時変化するようなインタラクティブな操作性を実現
Single-page Application
RIAの衰退
2010年にSteve JobsがFlashを激しく批判
プロプライエタリよりオープン性のあるHTML5を推進!
2011年MicrosoftはWeb開発者に対するSilverlight戦略を後退
AdobeもモバイルFlashの開発を中止
2014年HTML5正式勧告
Single-page Application
HTML5を使えばRIAと同等のユーザビリティが可能
Single-page Application
RIAからSPAへ
Single-page Application
待った無しです
Single-page Application
何をすれば良いのか？
JavaScriptフレームワークの導入？
開発環境は？
通信は？
バックエンドは？
HTML5と関係する？
etc
Single-page Application
その答えを今日は出します
Single-page Application
SPAに必要な技術
JavaScriptフレームワーク altJS CSS Preprocessor 開発環境 通信技術 Webアプリケーションなどのバックエンド技術 そしてHTML5
Single-page Application
SPAに必要な技術
JavaScriptフレームワーク altJS CSS Preprocessor 開発環境 通信技術 Webアプリケーションなどのバックエンド技術 そしてHTML5
Single-page Application
SPAに必要なフロントエンド技術
Single-page Application
SPAに必要なフロントエンド技術
Single-page Application
Single-page Application(SPA)の基本的な構造
events
renderchange
REST
Storage
get
set Model Collection
TemplateViewDOM
Single-page Application
jQueryだけの開発はカオス
Single-page Application
JavaScriptフレームワーク
backbone.JS(http://backbonejs.org/)
Angular(http://angularjs.org/)
Sencha(http://www.sencha.com/)
すでにJavaScriptフレームワークは数十種類ある 自分のプロジェクトにあったものを選ぶ
Single-page Application
JavaScriptは危ない言語
Single-page Application
altJS
CoffeeScript
TypeScript
altJSの言語の多くはクラス機構のサポート JavaScriptの抱える問題の多くを解決
Single-page Application
膨大なCSSをどう整理するか
Single-page Application
CSS Preproccessor
Sass + Compass
Less
Stylus
膨大なCSSをどう整理するか
Single-page Application
どうやって開発するの？
Single-page Application
開発環境
Yeoman
Sencha cmd
Single-page Application
SPAに必要なフロントエンド技術(まとめ)
Single-page Application
SPAを開発するには強固なバックエンド技術が必要
Single-page Application
SPAに必要なバックエンド技術
通信
Webアプリケーションサーバ
Single-page Application
通信技術
REST
WebSocket
SPDY
Single-page Application
Javaで対応
次世代型：クライアントとサーバ間をデータのみで通信し，画面の生
成から表示までをクライアントで行う方式
従来型：サーバ側でデータを埋め込んだ画面を生成し，クライアント
では表示のみを行う方式
基本的にはJavaScriptで多くの処理を行い，以下のような通信技術を利用して，データのみをサーバとやり取りします !JSON 1.0 JAX-RS 2.0 WebSocket 1.0
Single-page Application
SPAのメリット
ページを遷移させてもJavaScriptのグローバル環境が変わらない
WebSocketが有効に使える
Single-page Application
これで安心？
Single-page Application
SPAの懸念
パフォーマンス メモリリーク セキュリティ フレームワークロックイン 設計思想の転換 フロントエンジニア不足
Single-page Application
パフォーマンス
Sencha Touchの開発チームがHTML5で高速に動作するfacebookを開発したことは有名な話
DOMツリーを分離して小さく
TaskQueueで不必要なレイアウト処理を停止
入出力処理はWebWorkersで止めない
Single-page Application
メモリリーク
アプリケーションを使い続けた結果メモリーリークが原因で画面がフリーズするという問題は発生 !
地道に残っている参照にnullを入れがベージコレクションの対象にします
Single-page Application
セキュリティ
業務Webアプリケーションの場合のすべてをhttpsで動かす。
セキュアな環境はSSL-VPNなどを使用し比較的簡単に手に入
れることができる。
Single-page Application
フレームワークロックイン
使わざる終えない
オレオレフレームワークは使わない
そのとき選んだフレームワークが最適だとしても未来永
劫最適ではない
Single-page Application
設計思想の転換
アーキテクチャを理解し重順に対応
Single-page Application
フロントエンジニア不足
JavaScriptエンジニアというよりjQueryエンジニアがほとんど
altJSを使って知識不足を補う
Single-page Application
冷静に対応すれば道は開ける
Single-page Application
ご清聴ありがとうございました
Single-page Application
参考文献
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
top related