Post on 15-Jan-2015
description
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
RIAからSPAへ、HTML５が導く技術革新
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
!
佐川 夫美雄
HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER
@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
Profile
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
表現力の高さ：動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の
再生機能を備える デスクトップアプケーションと同等なUI：画面をリフレッシュすることな
く、バックエンドでサーバーとデータの送受信が可能 ユーザーエクスペリエンス：ユーザーの操作が即座にレスポンスされ、表示される画面
の情報が操作に応じて随時変化するようなインタラクティブな操作性を実現
RIA(Rich Internet Application)に求められたもの
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
RIAは。。。
2010年にSteve JobsがFlashを激しく批判
プロプライエタリよりオープン性のあるHTML5を推進!
2011年MicrosoftはWeb開発者に対するSilverlight戦略を後退
AdobeもモバイルFlashの開発を中止
2014年HTML5正式勧告
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
HTML5を使えばRIAと同等のユーザビリティが可能
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
RIAからSPA(Single-page Application)！
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはAjaxやWebSocket等を利用
Single-page Application(SPA)とは
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
SPAに必要な技術
1. JavaScriptフレームワーク 2. altJS 3. CSS Preprocessor 4. 開発環境 5. フロントとバックを疎結合～通信技術～ 6. ハックできるメンバーをアサインする
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
1. JavaScriptフレームワークすでにJavaScriptフレームワークは数十種類ある
自分のプロジェクトにあったものを選ぶ
http://backbonejs.org/2010年
http://angularjs.org/2009年
http://www.sencha.com/2007年 Ext JS 2.1
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
2. altJS
altJSの言語の多くはクラス機構のサポート JavaScriptの抱える問題の多くを解決
http://coffeescript.org/2009年
http://www.typescriptlang.org/2012年
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
3. CSS Preprocessor
膨大なCSSをどう整理するか
http://sass-lang.com/http://compass-style.org/
http://lesscss.org/
http://learnboost.github.io/stylus/
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
4. 開発環境
多くのアーキテクチャをどうやって開発するか
http://git-scm.com/
https://github.com/
http://yeoman.io/
http://www.sencha.com/products/sencha-cmd/download
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
5. フロントとバックを疎結合～通信技術～
AjaxにおいてXMLHttpRequestで非同期にJSONでデータのやり取りをする !
フロントとバックの役割が明確し疎結合にする
WebSocketやSPDYをうまくコントロールできる Webアプリケーションサーバが必要 - どうやってスケールするか
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
6. ハックできるメンバーをアサインする
開発要素はすべてOSSでの開発
すべての局面でハック必要性がある
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
SPAのメリット
ページを遷移させてもJavaScriptのグローバル環境が変わらない
WebSocketが有効に使える
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
SPAのデメリット
フルOSSでの開発が必要になる
技術要素が多すぎる
従来のWebアプリケーションに比べフロント開発が難しい
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
最後に
WebSocket
SPDY HTTP 2.0
Java
RIASingle-page Application
JavaScriptフレームワーク altJS CSS Preprocessor Yeoman Ajax
RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th
ご清聴ありがとうございました