デブサミ２０１４に行ってきた！
そのうちの２月１３日のD1セッション
をメモメモ
■朝はあいさつ
■自己紹介
佐川さん
@albatrosary
http://albatrosary.hateblo.jp
http://html5experts.jp/albatrosary
■HTML5が３０１４年に正式勧告
・エンタープライズ的には、今年盛り上がる？
・フロント業務アプリケーションに影響
■HTML/CSS/Javgascript
アプリケーション開発環境も大きく変化
まだ、eclipseやSVN
フロント開発の現場では、Java中心から
HTML/CSS/Javgascript中心へ
※http://html5experts.jp/albatrosary/3191
に今回話す内容あり
■Webの歴史
２０００年前後に動き
→HTML4.0の規格
CSSも形ができてきたのが・・・
ここ数年大きく変わった
２０１１ CSS3
XHTMLがなくなっている
SPDY HTTP2
→通信の技術的進歩
→かなり大きな影響（今後の話だが）
■Story
２０１２秋にHTML５業務アプリケーションを開発
２０１３年２月９日 HTML5CARNIVAL Fukuoka
Mozila Japanの浅井さんのFirefox OS
html5j白石さんのapplication cache
NTT Communivations 小松さんのSPDY WebSocket
２０１３年２月１８日 HTML5とか勉強会
白石さんにapplication cacheについて直接話を聞きに
２０１３年２月２３日 京都アジャイル勉強会
２０１３年４月２４日 Chrome＋HTML5 Developers Live Japan＃４
村岡さん、GoogleによるYeomanハンズオン
■従来型のWebアプリケーション
１．リクエストをサーバーへ送りControllerへ
２．Controllerは必要な情報を
POJO→Business Logic→O/Rマッパー→Database
３．ページをJSPで生成し、こんとろーらー経由で
■次世代型のWebアプリ
１．HTMLで生成された画面を表示
２．必要な情報をAJAXで非同期にサーバー送信
３．サーバーで受け取った情報をPOJOで
４．クライアントで受け取り
■業務系システムは、今すぐ脱Strutsを
次世代型のWebアプリケーションは次のような通信技術を使う
JSON
JAX-RS
WebSocket
http://gihyo.jp/news/report/2013/09/1901?page=2
■Single-page Application(SPA)とは
単一ページによるWebアプリケーション
ページはDOM操作により切り替える
サーバーは
■RIAに求められているもの
表現力の高さ
デスクトップアプリケーションと同等なUI
ユーザーエクスペリエンス
■RIAが・・・
２０１０年にJobsがFlashを激しく批判
プロプライエタリよりオープン性のあるHTML5
２０１１年SilverLight戦略を・・
■SPAに必要な技術
Javascriptフレームワーク
altJS
CSS Preprocesser
開発環境
バックエンド技術−通信
バックエンド技術ーWebアプリケーションサーバー
■Javascriptフレームワーク
Backbone.js
Sencha
AngularJS：最近聞く
（Kockout.jsも聞く）
JQuery：今まではよかった
→すべてがJavascriptでかけますか？
■altJS
・altJSの言語の０多くはクラス機構のサポート
→Javascriptお抱える問題の多くを解決
coffeeScript 2009 http://coffeescript.org
TypeScript 2012 http://typescriptlang.org/
納品したものが安全に
■CSS プリプロセッサ
膨大なCSSをどう整理するか
compass
less
■開発環境
yeoman（よーまん）
sencha cmd
git github
■Yeomanとは
・Googleが開発した総合解開発ツール
１．yoによる雛形作成
２．grunt serverを使用し、アプリケーション開発
３．grunt buildによるビルド
※あとbowerがある
■バックエンド技術−通信
Ajaxにおいて、XMLHttpRequestで非同期にJSON
Webアプリケーションサーバー
APIサーバーとしての役割
■SPAを構築する上で考えるべきこと
パフォーマンス
メモリーリーク
セキュリティ
フレームワークロックイン
設計思想の転換
フロントエンジニア不足
通信技術
バックエンド技術
■さらにHTML5
・通信
AJAX
WebSocket
SPDY
・バックエンド技術
WebSocketやSPDYをうまくコントロールする
Webアプリケーションサーバーが必要
どうやってスケールするか
http;//html5experts.jp/albatrosary/4939
■SPAのメリット
・ページ遷移させてもJavascriptのグローバル環境が変わらない
・WebSocketが有効に使える
■SPAのデメリット
・フルOSSでの開発が必要
→自信なければSencha
・技術要素が多すぎる
・従来のWebアプリケーションに比べ、フロント開発が難しい
■最後に
Java/RIA→Single Page Application
JSPはやめていい！！
■すぺしゃるさんくす
ぜのふぃー
そのうちの２月１３日のD1セッション
をメモメモ
■朝はあいさつ
■自己紹介
佐川さん
@albatrosary
http://albatrosary.hateblo.jp
http://html5experts.jp/albatrosary
■HTML5が３０１４年に正式勧告
・エンタープライズ的には、今年盛り上がる？
・フロント業務アプリケーションに影響
■HTML/CSS/Javgascript
アプリケーション開発環境も大きく変化
まだ、eclipseやSVN
フロント開発の現場では、Java中心から
HTML/CSS/Javgascript中心へ
※http://html5experts.jp/albatrosary/3191
に今回話す内容あり
■Webの歴史
２０００年前後に動き
→HTML4.0の規格
CSSも形ができてきたのが・・・
ここ数年大きく変わった
２０１１ CSS3
XHTMLがなくなっている
SPDY HTTP2
→通信の技術的進歩
→かなり大きな影響（今後の話だが）
■Story
２０１２秋にHTML５業務アプリケーションを開発
２０１３年２月９日 HTML5CARNIVAL Fukuoka
Mozila Japanの浅井さんのFirefox OS
html5j白石さんのapplication cache
NTT Communivations 小松さんのSPDY WebSocket
２０１３年２月１８日 HTML5とか勉強会
白石さんにapplication cacheについて直接話を聞きに
２０１３年２月２３日 京都アジャイル勉強会
２０１３年４月２４日 Chrome＋HTML5 Developers Live Japan＃４
村岡さん、GoogleによるYeomanハンズオン
■従来型のWebアプリケーション
１．リクエストをサーバーへ送りControllerへ
２．Controllerは必要な情報を
POJO→Business Logic→O/Rマッパー→Database
３．ページをJSPで生成し、こんとろーらー経由で
■次世代型のWebアプリ
１．HTMLで生成された画面を表示
２．必要な情報をAJAXで非同期にサーバー送信
３．サーバーで受け取った情報をPOJOで
４．クライアントで受け取り
■業務系システムは、今すぐ脱Strutsを
次世代型のWebアプリケーションは次のような通信技術を使う
JSON
JAX-RS
WebSocket
http://gihyo.jp/news/report/2013/09/1901?page=2
■Single-page Application(SPA)とは
単一ページによるWebアプリケーション
ページはDOM操作により切り替える
サーバーは
■RIAに求められているもの
表現力の高さ
デスクトップアプリケーションと同等なUI
ユーザーエクスペリエンス
■RIAが・・・
２０１０年にJobsがFlashを激しく批判
プロプライエタリよりオープン性のあるHTML5
２０１１年SilverLight戦略を・・
■SPAに必要な技術
Javascriptフレームワーク
altJS
CSS Preprocesser
開発環境
バックエンド技術−通信
バックエンド技術ーWebアプリケーションサーバー
■Javascriptフレームワーク
Backbone.js
Sencha
AngularJS：最近聞く
（Kockout.jsも聞く）
JQuery：今まではよかった
→すべてがJavascriptでかけますか？
■altJS
・altJSの言語の０多くはクラス機構のサポート
→Javascriptお抱える問題の多くを解決
coffeeScript 2009 http://coffeescript.org
TypeScript 2012 http://typescriptlang.org/
納品したものが安全に
■CSS プリプロセッサ
膨大なCSSをどう整理するか
compass
less
■開発環境
yeoman（よーまん）
sencha cmd
git github
■Yeomanとは
・Googleが開発した総合解開発ツール
１．yoによる雛形作成
２．grunt serverを使用し、アプリケーション開発
３．grunt buildによるビルド
※あとbowerがある
■バックエンド技術−通信
Ajaxにおいて、XMLHttpRequestで非同期にJSON
Webアプリケーションサーバー
APIサーバーとしての役割
■SPAを構築する上で考えるべきこと
パフォーマンス
メモリーリーク
セキュリティ
フレームワークロックイン
設計思想の転換
フロントエンジニア不足
通信技術
バックエンド技術
■さらにHTML5
・通信
AJAX
WebSocket
SPDY
・バックエンド技術
WebSocketやSPDYをうまくコントロールする
Webアプリケーションサーバーが必要
どうやってスケールするか
http;//html5experts.jp/albatrosary/4939
■SPAのメリット
・ページ遷移させてもJavascriptのグローバル環境が変わらない
・WebSocketが有効に使える
■SPAのデメリット
・フルOSSでの開発が必要
→自信なければSencha
・技術要素が多すぎる
・従来のWebアプリケーションに比べ、フロント開発が難しい
■最後に
Java/RIA→Single Page Application
JSPはやめていい！！
■すぺしゃるさんくす
ぜのふぃー