!
Session:【13-D-1】
JavaからJavaScriptへ！
HTML5適用から見えた次世代業務アプリケーション
#devsumiD

Name:
!
佐川 夫美雄
@albatrosary
http://albatrosary.hateblo.jp/
http://html5experts.jp/albatrosary/
HTML5Expert.jpコントリビュータ
html5jエンタープライズ部 副部長
Angularユーザ会 スタッフ
Sencha UG CO-ORGANIZER
#devsumiD

HTML5が2014年に正式勧告
#devsumiD

フロント業務アプリケーションに影響与えている
#devsumiD

HTML/CSS/JavaScript開発のウェイトが増大
#devsumiD

アプリケーション開発環境も大きく変化
#devsumiD

フロント開発の現場では、Java中心の開発から、
HTML/CSS/JavaScript中心の開発になり開発環境
も含めどのような変化が起きているのか！
http://html5experts.jp/albatrosary/3191/
#devsumiD

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

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

従来型の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

次世代型のWebアプリケーション
HTML
JavaScript
Browser
Controller
Business Logic
O/R
POJO
アプリケーションサーバ
RDBMS
1. HTMLで作成された画面を表示
2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONで
サーバへ送信
3. サーバでは受け取った情報（JSON）をPOJOへ変換し登録・更新な
どの処理を行う
4. 表示データはJSONでクライアントへ画面へ表示
#devsumiD

「業務系システムは今すぐ脱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

Single-page Application(SPA)とは
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはAjaxやWebSocket等を利用
#devsumiD

Single-page Applicationの構造
change
DOM
events
render
View
Template
get
set
Model
Ajax
Storage
#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フレームワーク
すでにJavaScriptフレームワークは数十種類ある
自分のプロジェクトにあったものを選ぶ
2010年
http://backbonejs.org/
2007年 Ext JS 2.1
http://www.sencha.com/
2009年
http://angularjs.org/
#devsumiD

altJS
altJSの言語の多くはクラス機構のサポート
JavaScriptの抱える問題の多くを解決
2009年
http://coffeescript.org/
2012年
http://www.typescriptlang.org/
http://html5experts.jp/clockmaker/2183/
#devsumiD

CSS Preprocessor
膨大なCSSをどう整理するか
http://compass-style.org/
http://sass-lang.com/
http://lesscss.org/
http://learnboost.github.io/stylus/
#devsumiD

開発環境
多くのアーキテクチャをどうやって開発するか
http://yeoman.io/
http://www.sencha.com/products/sencha-cmd/download
http://git-scm.com/
https://github.com/
#devsumiD

Yeoman とは
MODERN WORKFLOWS FOR MODERN WEBAPPS
Google社が作成した総合開発ツール群
yo(雛形作成ツール)
grunt(タスクランナー)
bower(フロントエンドパッケージマネージャ)
#devsumiD

開発の大まかな流れ
1. yo [generator] によるひな形
2. grunt server を使用しアプリケーション開発
3. grunt build によるリリースビルド
#devsumiD

yo
雛形作成ツール
generator はどのくらいある？
http://yeoman.io/community-generators.html
#devsumiD

bower
Twitter社が作ったパッケージマネージャ
bower components はどのくらいあるか？
http://sindresorhus.com/bower-components/
#devsumiD

grunt
タスクランナー
grunt で登録されているプラグインは?
http://gruntjs.com/plugins
#devsumiD

バックエンド技術 - 通信
AjaxにおいてXMLHttpRequestで非同期にJSON
#devsumiD

バックエンド技術 - Webアプリケーションサーバ
APIサーバとしての役割
#devsumiD

SPAを構築する上で考えるべきこと
パフォーマンス
メモリリーク
セキュリティ
フレームワークロックイン
設計思想の転換
フロントエンジニア不足
通信技術
バックエンド技術
#devsumiD

さらにHTML５
#devsumiD

バックエンド技術 - 通信
Ajax
WebSocket
SPDY
#devsumiD

バックエンド技術 - Webアプリケーションサーバ
Ajaxでデータのやり取りをしている分には今までと変わらない。
しかし、WebSocketを使った場合は。。
WebSocketやSPDYをうまくコントロールできる
Webアプリケーションサーバが必要
- どうやってスケールするか
http://html5experts.jp/albatrosary/4939/
#devsumiD

SPAのメリット
ページを遷移させてもJavaScriptのグローバル環境が変わらない
WebSocketが有効に使える
#devsumiD

SPAのデメリット
フルOSSでの開発が必要になる
技術要素が多すぎる
従来のWebアプリケーションに比べフロント開発が難しい
#devsumiD

最後に
Java
Single-page Application
RIA
JavaScriptフレームワーク
WebSocket
altJS
CSS Preprocessor
Yeoman
SPDY
Ajax
HTTP 2.0
#devsumiD

Special Thanks
http://www.html5biz.org/
http://www.xenophy.com/
http://html5experts.jp/
http://www.gxp.co.jp/
http://html5j.org/
#devsumiD

ご清聴ありがとうございました
#devsumiD