Your SlideShare is downloading. ×
Single-page application
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Single-page application

5,276

Published on

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

No Downloads
Views
Total Views
5,276
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
68
Comments
0
Likes
42
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×