次世代Web業務アプリケーション

9,729 views
9,404 views

Published on

Published in: Technology

次世代Web業務アプリケーション

  1. 1. ! Session:【13-D-1】 JavaからJavaScriptへ! HTML5適用から見えた次世代業務アプリケーション #devsumiD
  2. 2. Name: ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER #devsumiD
  3. 3. HTML5が2014年に正式勧告 #devsumiD
  4. 4. フロント業務アプリケーションに影響与えている #devsumiD
  5. 5. HTML/CSS/JavaScript開発のウェイトが増大 #devsumiD
  6. 6. アプリケーション開発環境も大きく変化 #devsumiD
  7. 7. フロント開発の現場では、Java中心の開発から、 HTML/CSS/JavaScript中心の開発になり開発環境 も含めどのような変化が起きているのか! http://html5experts.jp/albatrosary/3191/ #devsumiD
  8. 8. Webの歴史 SGML(standard Generalized Markup Language) 1986年 HTML(HyperText Markup Language) 1989年 HTTP 0.9 1993年 HTTP 1.0 1996年 HTTP 1.1 1999年 CSS 1 1996年 CSS 2 1998年 HTML 4.0(HyperText Markup Language) 1997年 XML(eXtensible Markup Language) 1998年 XHTML(eXtensible HyperText Markup Language) 2000年 CSS 2.1 2004年 SPDY 2011年 CSS 3 2011年 HTTP 2(draft) 2012年 XHTML 2.0(eXtensible HyperText Markup Language) 2010年 HTML 5.0(HyperText Markup Language) 2012年 #devsumiD
  9. 9. Story 2012/秋にHTML5で業務アプリケーションを開発? - 個人的な判断ではまだ無理だろうという認識 ! 2013/2/9 HTML5CARNIVAL FUKUOKA ! - Mozilla Japanの浅井さんのFirefox OS、html5j 白石さんのApplication Cache NTT Communications 小松さんのSPDYやWebSocket 2013/2/18 HTML5とか勉強会 ! - 白石さんにApplication Cacheについて直接話しを聞きに懇親会参加 2013/2/23 [京都]京都アジャイル勉強会 #京アジャ 春の特別編 ! 2013/4/24 Chrome+HTML5 Developers Live Japan #4 - 村岡さん、GoogleによるYeomanハンズオン #devsumiD
  10. 10. 従来型のWebアプリケーション Controller POJO HTML JavaScript Business Logic O/R JSP アプリケーションサーバ Browser RDBMS 1. リクエストをサーバへ送りControllerへ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得(登録・更新) 3. ページをjspで生成しController経由でクライアントへ返却 4. 各ページではAjaxにより部分的な情報の取得 #devsumiD
  11. 11. 次世代型のWebアプリケーション HTML JavaScript Browser Controller Business Logic O/R POJO アプリケーションサーバ RDBMS 1. HTMLで作成された画面を表示 2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONで サーバへ送信 3. サーバでは受け取った情報(JSON)をPOJOへ変換し登録・更新な どの処理を行う 4. 表示データはJSONでクライアントへ画面へ表示 #devsumiD
  12. 12. 「業務系システムは今すぐ脱Strutsを!」 業務システムエンジニアのためのHTML5勉強会#04 活動報告 次世代型のWebアプリケーションでは、基本的にはJavaScriptで多く の処理を行い、次のような通信技術を利用して、データのみをサーバ とやり取りします。 ! JSON 1.0 JAX-RS 2.0 WebSocket 1.0 http://gihyo.jp/news/report/2013/09/1901?page=2 #devsumiD
  13. 13. Single-page Application(SPA)とは 単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用 #devsumiD
  14. 14. Single-page Applicationの構造 change DOM events render View Template get set Model Ajax Storage #devsumiD
  15. 15. RIAに求められたもの Rich Internet Application 表現力の高さ:動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の 再生機能を備える デスクトップアプケーションと同等なUI:画面をリフレッシュすることな く、バックエンドでサーバーとデータの送受信が可能 ユーザーエクスペリエンス:ユーザーの操作が即座にレスポンスされ、表示される画面 の情報が操作に応じて随時変化するようなインタラクティブな操作性を実現 #devsumiD
  16. 16. RIAが。。 2010年にSteve JobsがFlashを激しく批判 プロプライエタリよりオープン性のあるHTML5を推進! 2011年MicrosoftはWeb開発者に対するSilverlight戦略を後退 AdobeもモバイルFlashの開発を中止 2014年HTML5正式勧告 #devsumiD
  17. 17. SPAに必要な技術 JavaScriptフレームワーク altJS CSS Preprocessor 開発環境 バックエンド技術 - 通信 バックエンド技術 - Webアプリケーションサーバ #devsumiD
  18. 18. JavaScriptフレームワーク すでにJavaScriptフレームワークは数十種類ある 自分のプロジェクトにあったものを選ぶ 2010年 http://backbonejs.org/ 2007年 Ext JS 2.1 http://www.sencha.com/ 2009年 http://angularjs.org/ #devsumiD
  19. 19. altJS altJSの言語の多くはクラス機構のサポート JavaScriptの抱える問題の多くを解決 2009年 http://coffeescript.org/ 2012年 http://www.typescriptlang.org/ http://html5experts.jp/clockmaker/2183/ #devsumiD
  20. 20. CSS Preprocessor 膨大なCSSをどう整理するか http://compass-style.org/ http://sass-lang.com/ http://lesscss.org/ http://learnboost.github.io/stylus/ #devsumiD
  21. 21. 開発環境 多くのアーキテクチャをどうやって開発するか http://yeoman.io/ http://www.sencha.com/products/sencha-cmd/download http://git-scm.com/ https://github.com/ #devsumiD
  22. 22. Yeoman とは MODERN WORKFLOWS FOR MODERN WEBAPPS Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ) #devsumiD
  23. 23. 開発の大まかな流れ 1. yo [generator] によるひな形 2. grunt server を使用しアプリケーション開発 3. grunt build によるリリースビルド #devsumiD
  24. 24. yo 雛形作成ツール generator はどのくらいある? http://yeoman.io/community-generators.html #devsumiD
  25. 25. bower Twitter社が作ったパッケージマネージャ bower components はどのくらいあるか? http://sindresorhus.com/bower-components/ #devsumiD
  26. 26. grunt タスクランナー grunt で登録されているプラグインは? http://gruntjs.com/plugins #devsumiD
  27. 27. バックエンド技術 - 通信 AjaxにおいてXMLHttpRequestで非同期にJSON #devsumiD
  28. 28. バックエンド技術 - Webアプリケーションサーバ APIサーバとしての役割 #devsumiD
  29. 29. SPAを構築する上で考えるべきこと パフォーマンス メモリリーク セキュリティ フレームワークロックイン 設計思想の転換 フロントエンジニア不足 通信技術 バックエンド技術 #devsumiD
  30. 30. さらにHTML5 #devsumiD
  31. 31. バックエンド技術 - 通信 Ajax WebSocket SPDY #devsumiD
  32. 32. バックエンド技術 - Webアプリケーションサーバ Ajaxでデータのやり取りをしている分には今までと変わらない。 しかし、WebSocketを使った場合は。。 WebSocketやSPDYをうまくコントロールできる Webアプリケーションサーバが必要 - どうやってスケールするか http://html5experts.jp/albatrosary/4939/ #devsumiD
  33. 33. SPAのメリット ページを遷移させてもJavaScriptのグローバル環境が変わらない WebSocketが有効に使える #devsumiD
  34. 34. SPAのデメリット フルOSSでの開発が必要になる 技術要素が多すぎる 従来のWebアプリケーションに比べフロント開発が難しい #devsumiD
  35. 35. 最後に Java Single-page Application RIA JavaScriptフレームワーク WebSocket altJS CSS Preprocessor Yeoman SPDY Ajax HTTP 2.0 #devsumiD
  36. 36. Special Thanks http://www.html5biz.org/ http://www.xenophy.com/ http://html5experts.jp/ http://www.gxp.co.jp/ http://html5j.org/ #devsumiD
  37. 37. ご清聴ありがとうございました #devsumiD

×