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