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