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