Creators meet up 13

RIAからSPAへ、HTML５が導く技術革新Creators MeetUp 13th

RIAからSPAへ、HTML５が導く技術革新


!

佐川　夫美雄

HTML5Expert.jpコントリビュータ html5jエンタープライズ部副部長 Angularユーザ会スタッフ Sencha UG CO-ORGANIZER

@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/

Profile


表現力の高さ：動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の

再生機能を備えるデスクトップアプケーションと同等なUI：画面をリフレッシュすることな

く、バックエンドでサーバーとデータの送受信が可能ユーザーエクスペリエンス：ユーザーの操作が即座にレスポンスされ、表示される画面

の情報が操作に応じて随時変化するようなインタラクティブな操作性を実現

RIA(Rich Internet Application)に求められたもの


RIAは。。。

2010年にSteve JobsがFlashを激しく批判

プロプライエタリよりオープン性のあるHTML5を推進!

2011年MicrosoftはWeb開発者に対するSilverlight戦略を後退

AdobeもモバイルFlashの開発を中止

2014年HTML5正式勧告


HTML5を使えばRIAと同等のユーザビリティが可能


RIAからSPA(Single-page Application)！


単一ページによるWebアプリケーション

ページはDOMの操作により切り替える

サーバとのやりとりはAjaxやWebSocket等を利用

Single-page Application(SPA)とは


SPAに必要な技術

1. JavaScriptフレームワーク 2. altJS 3. CSS Preprocessor 4. 開発環境 5. フロントとバックを疎結合～通信技術～ 6. ハックできるメンバーをアサインする


1. JavaScriptフレームワークすでにJavaScriptフレームワークは数十種類ある

自分のプロジェクトにあったものを選ぶ

http://backbonejs.org/2010年

http://angularjs.org/2009年

http://www.sencha.com/2007年 Ext JS 2.1


2. altJS

altJSの言語の多くはクラス機構のサポート JavaScriptの抱える問題の多くを解決

http://coffeescript.org/2009年

http://www.typescriptlang.org/2012年


3. CSS Preprocessor

膨大なCSSをどう整理するか

http://sass-lang.com/http://compass-style.org/

http://lesscss.org/

http://learnboost.github.io/stylus/


4. 開発環境

多くのアーキテクチャをどうやって開発するか

http://git-scm.com/

https://github.com/

http://yeoman.io/

http://www.sencha.com/products/sencha-cmd/download


5. フロントとバックを疎結合～通信技術～

AjaxにおいてXMLHttpRequestで非同期にJSONでデータのやり取りをする !

フロントとバックの役割が明確し疎結合にする

WebSocketやSPDYをうまくコントロールできる Webアプリケーションサーバが必要 - どうやってスケールするか


6. ハックできるメンバーをアサインする

開発要素はすべてOSSでの開発

すべての局面でハック必要性がある


SPAのメリット

ページを遷移させてもJavaScriptのグローバル環境が変わらない

WebSocketが有効に使える


SPAのデメリット

フルOSSでの開発が必要になる

技術要素が多すぎる

従来のWebアプリケーションに比べフロント開発が難しい


最後に

WebSocket

SPDY HTTP 2.0

Java

RIASingle-page Application

JavaScriptフレームワーク altJS CSS Preprocessor Yeoman Ajax


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

Creators meet up 13

Technology