SPAに必要なJavaScriptFrameWork

S P A（Single-Page-Application）

　　　　　　　　　　における

JavaScriptFrameWork　　　　　　　　　　のお話

自己紹介

酒巻瑞穂

■業務系のSE屋さん

■活動とか　　◆ HTML5j エンタープライズ部（スタッフ）

　　◆ HTML5j Webプラットフォーム部（スタッフ）

　　◆ FireFoxOS コードリーティング（わるだくらみ補佐）

Twitter：https://twitter.com/SakamakiM

Facebook：https://twitter.com/SakamakiM

Single Page Application

単一のHTMLファイル？

一度の描画で全部取る？

「Page」とは何なのか？

SPA描画の流れ

画面

SPA描画の流れ

画面

コンテンツ

SPA描画の流れ

画面

コンテンツ

断片化したHTMLファイル

SPA描画の流れ

SPA描画の流れ

画面

コンテンツ

断片化したHTMLファイル

Pageほぼ決まっている基礎フレーム部分

（プレースホルダー）

View使用するユーザーや状況により変わる！

PageとViewを分ける意味

Page

View

再利用性とパフォーマンス

Page

ナビゲーション

常に表示メニュー

RSS ページ

設定ページ

あまり使わない

状況/目的による切り分け

Page

ナビゲーション

Offlineでも使う

メニュー

RSS ページ

設定ページ

Network必須

SPAにおけるServerの役割


UIの処理を持たない



状態を持たない




リソースの提供

SPAにおけるClientの役割




ルーティング処理クライアント側でページ遷移を求められる。（ページの切り替えはクライアントで！）





ビジネスロジックと状態クライアント側でビジネスロジックとデータ、状態の管理を行う。






ビジネスロジックと状態クライアント側でビジネスロジックとデータ、状態の管理を行う。

データの取得Ajax、またはWebSocket等のリソース取得手段が必要


コンテンツ

描画（UI）

BLS

リソースアクセスルーティング

状態管理

UIとBLSの同期

コンテンツを組み合わせると同じような処理が多数発生！！

状態管理

BLS 通信

BLS

Route

BLS

状態管理

処理状態管理

通信

Route

通信

ExtExtJSJS

ExtExtJSJS

軽い説明

ダウンロード：http://angularjs.org/APIドキュメント：http://docs.angularjs.org/api/ライブラリ：http://ngmodules.org ライセンス：MIT

ダウンロード、APIドキュメント、ライブラリ：http://backbonejs.org/ライセンス：MIT

ダウンロード：https://www.sencha.com/products/extjs/downloadAPIドキュメント：http://docs.sencha.com/extjsライブラリ：https://market.sencha.com/ライセンス：GPLv3

今回のお題！（MVP or MVC） DOM

(UI)

View

PresenterOr

Controller

Model

ServerAccessAjax

WebSocket

Template

router

Data-binding

今回のお題！（MVP or MVC）

Domへのアプローチ

DOM(UI)

View

PresenterOr

Controller

Model

ServerAccessAjax

WebSocket

Template

router

Data-binding



ルーティング状態管理

DOM(UI)

View

PresenterOr

Controller

Model

ServerAccessAjax

WebSocket

Template

router

Data-binding




ビジネスロジック

DOM(UI)

View

PresenterOr

Controller

Model

ServerAccessAjax

WebSocket

Template

router

Data-binding





モデルとビューの同期

DOM(UI)

View

PresenterOr

Controller

Model

ServerAccessAjax

WebSocket

Template

router

Data-binding






外部リソースへのアクセス

DOM(UI)

View

PresenterOr

Controller

Model

ServerAccessAjax

WebSocket

Template

router

Data-binding

DOM(UI)

View(compileDOM)

Model(POJO)

Template（カスタムHTML）

Controller(directive)


★カスタムHTMLテンプレートAngularでは一度テンプレートと呼ばれるベースHTMLを読み込み、コンパイルすることで、JavaScriptに密接に紐付くDOMツリーし、画面描画します。

★独自タグでイベントを定義するメリット

controllerで定義されたビューイベントは命令的です。viewと完全に切り離されているため、再利用性とテストコードからのアプローチが容易です

対して directiveで定義されたイベントは宣言的でありHTML自体が宣言的な言語であるため、自然な流れでHTMLへの独自拡張、欠点を補うことができます。

Presenter(Controller)DataBinding

ngRouter

ServerAccess(Angular.$http)

(Factory)

ルーティング

AngularJSチームが作成しているngRouteを使うことでルーティング処理が可能になります。

より高機能なAngularUI Routerと言うサードパーティ製ライブラリもあります。

状態管理

cookieについては、AngularJSチームが作成した、cookie制御用のライブラリAngular-cookieがあります。

localstrageの制御については、AngularLocalstrageというサードパーティ製ライブラリがあります。

DOM(UI)

View(compileDOM)

Model(POJO)




ngRouter


(Factory)


AngularのビジネスロジックはServiceを用いてビジネスロジックを実装します。Serviceには色々ありますが、それぞれ用途に応じて使い分けます。格納されるのはJavaScriptObjectです。

factoryシンプルなBusinessLogicの実装、Service登録するまでもない軽量なBLSの定義ができる。

serviceサービスの登録ができる、モジュールを横断した使用が可能

provider初期化時の振る舞いなど、細やかな制御ができるサービスを登録することができます。

vlaueModuleを横断してつかえるJavaScriptObjectを定義できます

constantModuleを横断してつかえる値の定義ですが、valueと違い、上書きできません。

DOM(UI)

View(compileDOM)

Model(POJO)




ngRouter


(Factory)


Angularには双方向バインディング機能があります。そのため、開発者は、ほぼ自然にViewとロジックの同期を取ることができます。

しかしながら、この双方向バインディングはパフォーマンスなどの問題が発生する可能性があります。

DOM(UI)

View(compileDOM)

Model(POJO)




ngRouter


(Factory)


Ajaxでの遣り取りは、単純なものであれば、$Httpを使います。

Ajax通信部分を、モジュール内で再利用可能なコンポーネントとして定義したい場合、ngResourceを使いプロバイダとして定義できます。

WebSocketを使用する場合は、Factory等で再利用可能な形で定義して使用する事が一般的です。

DOM(UI)

View(compileDOM)

Model(POJO)




ngRouter


(Factory)


DOMの構築はBackbone.VIewを用いて定義します。Bacbone.View内のrenderでDOM要素の構築を行うことができます。

しかしながら、より簡単にするために、追加のライブラリを用いてテンプレートエンジンを使うことが一般的です。

テンプレートエンジンは様々なものが用意されており、目的に応じてある程度選択できます。

DOM(UI)

View(Backbone.View)

Presenter(JS Object)

Model(Backbone.Model)

ServerAccess(Backbone.sync)

Template(html、ejs)

Backbone.StickIt

Backbone.Router

ルーティング

Backbone.Routerを使うことで基本的なルーティング処理は実現できます。

しかし、Backbone.Routerには状態管理やネストしたルーティング管理を持たないため、状態管理を行いたい場合はサードパーティ製ライブラリを用いる必要があります。

状態管理

状態の制御、cookieとLocalstrageの管理です。制御には、サードパーティ製ライブラリを用います。Jqueryライブラリのjquery.cookieとBackboneLocalstrageが有名です。

DOM(UI)

View(Backbone.View)





Backbone.StickIt

Backbone.Router


BackboneはビジネスロジックはModelとCollectionを用いて定義します。

・Backbone.ModeデータのCRUDと保持を担当

・Backbone.CollectionModelの集合体

簡単なアプリケーションであればプレーンなBackboneでも問題ないですが、規模のおおきな開発では定形コードの削減やコード全般の汚染を防ぐためBackbone.Marionetteを使うのをお勧めします。

DOM(UI)

View(Backbone.View)





Backbone.StickIt

Backbone.Router


Backboneは単体ではデータバインディング機能を持っていません。

もし、データバインディングが必要となる場合は、サードパーティ製ライブラリ（Backbone.StickIt等）を使うことで実現できるようになります。

しかし、明示的に定義していかなければならないため、AngularJSよりはコードが煩雑になります。

DOM(UI)

View(Backbone.View)





Backbone.StickIt

Backbone.Router


Ajax通信を行う場合は、Backbone.syncにAjax通信の機能があるのでそれを使用します。

WebSocket通信を行う場合はBackbone.syncをオーバーライドして使います。

syncの仕様http://backbonejs.org/#Sync

DOM(UI)

View(Backbone.View)





Backbone.StickIt


DOMの構築はExt.Componentを継承した様々なレイアウト用クラスが使用できます。

一部例）Ext.button.Button(ボタン)Ext.grid.Panel(Grid)Ext.form.Label(ラベル)

Ext.TemplateDOMを容易に生成する為のクラスです。文字列、またはJSON形式で定義します。

Ext.XTemplateはExt.Templateを継承したクラスとなっており、比較演算子や条件分岐、Ext.view.Viewを中継してExxt.XTemplateとExt.data.Storeとの紐付けも可能です。

DOM(UI)

View(Ext.Component)

Controller(Ext.app.Controller)

Model(Ext.data.Model)

ServerAccess(Ext.data.Ajax)

(Ext.ux.WebSocket)

Template(Ext.Template)

ExtExtJSJS

ルーティング

ExtJSはMVCフレームワークのため、MVP特有のルーティング機能は提供されていません。

Routerを使用したい場合、ユーザーエクステンションのExt.ux.Routerと言う軽量ライブラリが存在します。

状態管理

Cookies、Localstorageを用いて状態管理を行う場合、ExtJSではExt.state.Providerクラスを継承した以下の機能を使います。

Ext.state.CookieProviderクッキー用の状態保持クラス

Ext.state.LocalStorageProviderLocalstrage用の状態保持クラス

ExtExtJSJSDOM(UI)

View(Ext.Component)




(Ext.ux.WebSocket)


DOM(UI)

View(Ext.Component)




(Ext.ux.WebSocket)


ビジネスロジック（モデルとビューの同期）

ExtJSのビジネスロジックはExt.data.Modelと、Ext.data.Storeで成り立ちます。

Ext.data.Modelデータの保持とCRUDを担当する。

Ext.data.StoreModelの集合体

Ext.Componentを継承したViewに当たる機能は、内部にStoreManagerを所持しており、StoreオプションにModel（Store）を設定するとこでViewとModelの紐付きを行えます。

ExtExtJSJSDOM(UI)

View(Ext.Component)




(Ext.ux.WebSocket)



ExtJSにはAjax通信用のクラスが用意されています。

Ext.Ajaxを用いた柔軟な通信の他に、Ext.data.Readerを用いてModelを生成するExt.data.AjaxProxyや、Rest通信用のExt.data.RestProxyなど、目的に応じた様々なクラスが用意されています。

WebSocket通信に関しては、ユーザーエクステンションでExt.ux.WebSocketがあります。

ExtExtJSJSDOM(UI)

View(Ext.Component)




(Ext.ux.WebSocket)


日本語書籍

➔ AngularJS✔ はじめてのAngularJS

➔ Backbone✔ Backbone.jsガイドブック✔ Backbone.jsアプリケーション開発ガイド＠ 2/7

➔ Sencha ExtJS ✔ ExtJS ４実践開発ガイド✔ ExtJS ４実践開発ガイド２

日本語のAPI（Web）

➔ AngularJS✔ 日本語のAPI✔ http://js.studio-kingdom.com/angularjs

➔ Bakcbone✔ 日本語のAPI✔ http://backbonejs.apidocs.jp/

➔ ExtJS✔ xenophyで翻訳されたものがあり✔ http://docs.xenophy.com/ext-js/4-0/

AngularJSルール：フレームワーク寄り　　学習コスト：高い　　MV～：MVP

破壊的なUI/Viewの変更にも対応しやすい。

デザイン等が決まってなく、素早くプロトタイプしながら形を作り出していく場合に有用全体的に依存性注入などにより、ロジック全体がフレームワークのルールに依存する形になるので、わりと統制が取れた仕組みになりやすい。

Backbone ルール：プロジェクト内で作る　　学習コスト：低い　　MV～：MVP & MVC

MVP、MVC両方の手段が取れる

JSフレームワークなども選択肢が多いため案件に合わせた最適なカスタマイズができるのが良い既にフロント開発に携わっている場合、そのノウハウを引き継げる為、導入の敷居はさらに低くできる。

ExtJSルール：フレームワーク重視　学習コスト：高い（xenophyによるトレーニングあり）　MV～：MVC

MVCパターン重視の為、破壊的なUI/VIew変更がある場合は向かないが、ビジネスロジックが重要になる場合は堅牢なものが作れるため、とても相性が良い。

学習コストは高め、導入の敷居は高いが、xenophyによるコンサルティングからトレーニングまで有償でうけられる為、要員が確保できない場合は良い。サポート付き、かつフレームワークのルールが強いので長期の保守、運用を考えると向いている。

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

SPAに必要なJavaScriptFrameWork

Technology

Transcript of SPAに必要なJavaScriptFrameWork