Single-page application

12,169 views

Published on

Published in: Technology
0 Comments
64 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,169
On SlideShare
0
From Embeds
0
Number of Embeds
169
Actions
Shares
0
Downloads
105
Comments
0
Likes
64
Embeds 0
No embeds

No notes for slide

Single-page application

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

×