Ext.DirectことはじめJapan Sencha UG 勉強会 第4回@東京
自己紹介セックという会社で働いています。ロボットとかやってる部署にいるのに関わったことがありません(T_T)http://www.sec.co.jp/robotperl, Ext JS とか
アジェンダ1.   Ext.Directの紹介2.   しくみについて3.   実装について4.   デモ
1.Ext.Directの紹介
Sencha Touch / Ext JS(Client Side) JavaScriptフレームワーク● UIコンポーネント  きれいなUIを実現 (tree,grid,form...)● MVC  疎結合な構成● ユーティリティ  dom,...
Sencha Touch / Ext JSExampleshttp://www.sencha.com/products/extjs/examples/ Directわかりにくい・・・そもそも動かないし(´・ω・`)
Ext.Direct● サーバとのAjax通信を隠蔽してくれる →JavaScriptからサーバ側のメソッドを呼び出す感じ  (Remote Procedure Call)● Senchaのデータモデルと組み合わせると便利
Ext.Direct● サーバとのAjax通信を隠蔽してくれる →JavaScriptからサーバ側のメソッドを呼び出す感じ  (Remote Procedure Call)● Senchaのデータモデルと組み合わせると便利  デモではこちらをメ...
2.しくみについて
Ext.Direct通常のAjaxクライアントJavaScript                       サーバアプリ                   ① Ajaxリクエスト&レスポンス      ②レンダリング      (Ext ...
Ext.DirectDirect(下ごしらえ)クライアントJavaScript                         サーバアプリ               ① 呼び出せるAPIを問い合わせ② API一覧を登録           ...
Ext.DirectDirect(下ごしらえ)クライアントJavaScript                                                              サーバアプリ               ...
Ext.DirectDirect(実行) クライアントJavaScript                                    サーバアプリ             ① 登録したAPIをメソッド呼び出し            ...
Ext.DirectDirect(DirectStore) クライアントJavaScript                                  サーバアプリ             ① 登録したAPIをメソッド呼び出し     ...
3.実装について
ルータールーターの実装について● ExampleのDirect (php)● Ext.Direct Pack (php,ruby,.Net,CF)  http://dev.sencha.com/deploy/ext-direct-pack.  ...
Ext.Servernode.jsのライブラリ。npm対応。https://github.com/xenophy/ext-serverサーバでもExt JSライクにものづくり。Ext.Directではデータ構造がわかりやすくなるメリットも。 J...
4.デモ
準備node.js,npmをインストール例) % brew install nodeExt.Serverをインストール% npm install ext-serverサンプルhttps://github.com/MtBlue81/DirectS...
実行サーバ起動% node server.jsブラウザでアクセスhttp://localhost:8888
ご静聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Ext.directことはじめ

1,575 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,575
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ext.directことはじめ

  1. 1. Ext.DirectことはじめJapan Sencha UG 勉強会 第4回@東京
  2. 2. 自己紹介セックという会社で働いています。ロボットとかやってる部署にいるのに関わったことがありません(T_T)http://www.sec.co.jp/robotperl, Ext JS とか
  3. 3. アジェンダ1. Ext.Directの紹介2. しくみについて3. 実装について4. デモ
  4. 4. 1.Ext.Directの紹介
  5. 5. Sencha Touch / Ext JS(Client Side) JavaScriptフレームワーク● UIコンポーネント きれいなUIを実現 (tree,grid,form...)● MVC 疎結合な構成● ユーティリティ dom, drag&drop, history, state, keymap, format ...
  6. 6. Sencha Touch / Ext JSExampleshttp://www.sencha.com/products/extjs/examples/ Directわかりにくい・・・そもそも動かないし(´・ω・`)
  7. 7. Ext.Direct● サーバとのAjax通信を隠蔽してくれる →JavaScriptからサーバ側のメソッドを呼び出す感じ  (Remote Procedure Call)● Senchaのデータモデルと組み合わせると便利
  8. 8. Ext.Direct● サーバとのAjax通信を隠蔽してくれる →JavaScriptからサーバ側のメソッドを呼び出す感じ  (Remote Procedure Call)● Senchaのデータモデルと組み合わせると便利 デモではこちらをメインに紹介
  9. 9. 2.しくみについて
  10. 10. Ext.Direct通常のAjaxクライアントJavaScript サーバアプリ ① Ajaxリクエスト&レスポンス ②レンダリング (Ext JSコンポーネント)
  11. 11. Ext.DirectDirect(下ごしらえ)クライアントJavaScript サーバアプリ ① 呼び出せるAPIを問い合わせ② API一覧を登録 Ext.direct ルーター サンプル、Directパックなどに含まれる ● APIの一覧を準備する ● 約束ごとにしたがってAPIを呼び出す
  12. 12. Ext.DirectDirect(下ごしらえ)クライアントJavaScript サーバアプリ ① 呼び出せるAPIを問い合わせ Ext.ns(Ext.app); Ext.app.REMOTING_API = {"url":"router.php","type":" remoting","actions":{"EchoClass":[{"name":"echo"," len":1}}};② API一覧を登録 Ext.direct ルーターExt.direct.Manager.addProvider(Ext.app.REMOTING_API); サンプル、Directパックなどに含まれる ● APIの一覧を準備する ● 約束ごとにしたがってAPIを呼び出す
  13. 13. Ext.DirectDirect(実行) クライアントJavaScript サーバアプリ ① 登録したAPIをメソッド呼び出し  例)EchoClass.echo("hoge",fn); ② Ajaxリクエスト ③ リクエストパース メソッド呼び出し レスポンス作成 Ext.direct ルーター④ レスポンスパース コールバック呼び出し サンプル、Directパックなどに含まれる⑤ コールバックで結果を処理 ● APIの一覧を準備する 例)fn = function(res) { ● 約束ごとにしたがってAPIを呼び出す alert(res); };
  14. 14. Ext.DirectDirect(DirectStore) クライアントJavaScript サーバアプリ ① 登録したAPIをメソッド呼び出し  例)EchoClass.echo("hoge",fn); ② Ajaxリクエスト Ext.data.DirectStoreを利用すると データ更新(CRUD)操作に対して①⑤を自動で実行。 ③ リクエストパース   ↓ メソッド呼び出し Grid,Treeなどのデータが自動同期される。 レスポンス作成 Ext.direct ルーター④ レスポンスパース コールバック呼び出し サンプル、Directパックなどに含まれる⑤ コールバックで結果を処理 ● APIの一覧を準備する 例)fn = function(res) { ● 約束ごとにしたがってAPIを呼び出す alert(res); };
  15. 15. 3.実装について
  16. 16. ルータールーターの実装について● ExampleのDirect (php)● Ext.Direct Pack (php,ruby,.Net,CF) http://dev.sencha.com/deploy/ext-direct-pack. zip● Sencha Marketのconnectors https://market.sencha.com● Ext.Server (node)
  17. 17. Ext.Servernode.jsのライブラリ。npm対応。https://github.com/xenophy/ext-serverサーバでもExt JSライクにものづくり。Ext.Directではデータ構造がわかりやすくなるメリットも。 JavaScript <-> JSON <-> JavaScript
  18. 18. 4.デモ
  19. 19. 準備node.js,npmをインストール例) % brew install nodeExt.Serverをインストール% npm install ext-serverサンプルhttps://github.com/MtBlue81/DirectSample-ExtServer
  20. 20. 実行サーバ起動% node server.jsブラウザでアクセスhttp://localhost:8888
  21. 21. ご静聴ありがとうございました。

×