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