Talk	
  Directly	
  with	
  Ac#veRecord	
  	
  
using	
  Ext.Direct	
  and	
  Rack	
  Middleware	
  




           Stone	...
Outline	
  
•  Intro	
  to	
  Ext	
  Js	
  
•  The	
  Problem	
  
•  The	
  SoluDon	
  :	
  Ext.Direct	
  	
  
•  Intro	
 ...
Intro	
  to	
  Ext	
  Js	
  
Ext	
  JS	
  is	
  a	
  cross-­‐browser	
  JavaScript	
  library	
  for	
  building	
  rich	
...
The	
  Problem	
  




     Stone	
  Gao,	
  KungfuRails	
  
    (stones.gao@gmail.com)	
  
Ajax	
  Calls	
  
Foo.js	
  
…….	
  

Ext.Ajax.request({	
                                                                ...
Ajax	
  Calls	
  
Foo.js	
  
…….	
  

Ext.Ajax.request({	
                                                                ...
The	
  SoluDon	
  




    Stone	
  Gao,	
  KungfuRails	
  
   (stones.gao@gmail.com)	
  
The	
  SoluDon	
  

Ext.Direct	
  
 Ext.Direct	
  is	
  a	
  pladorm	
  and	
  language	
  agnosDc	
  technology	
  to	
  ...
Intro	
  to	
  Rack	
  Middleware	
  	
  
                                                       Middleware	
             ...
Intro	
  to	
  Rack	
  Middleware	
  	
  

>>	
  	
  ps	
  aux	
  |	
  grep	
  ruby	
  |	
  wc	
  –l	
  
3	
  

Rack	
  Mi...
Intro	
  to	
  Rack	
  Middleware	
  	
  

Conven#on	
  :	
  app.call(env)	
  


lambda	
  {	
  |env|	
  	
  	
  	
  	
  	...
Ac#veDirect	
  (an	
  Experimental	
  ImplementaDon	
  of	
  Ext.Direct,	
  yet	
  )	
  
Talk	
  Directly	
  with	
  Ac#ve...
Ac#veDirect	
  (an	
  Experimental	
  ImplementaDon	
  of	
  Ext.Direct,	
  yet	
  )	
  
 Talk	
  Directly	
  with	
  Ac#v...
Ac#veDirect	
  (an	
  Experimental	
  ImplementaDon	
  of	
  Ext.Direct,	
  yet	
  )	
  
   How	
  Ac#veDirect::Api	
  wor...
Ac#veDirect	
  (an	
  Experimental	
  ImplementaDon	
  of	
  Ext.Direct,	
  yet	
  )	
  
How	
  Ac#veDirect::Router	
  wor...
Ac#veDirect	
  -­‐	
  ConfiguraDon	
  
•  Middleware	
  configuraDons	
  (environment.rb)	
  
	
  	
  	
  	
  	
  config.midd...
Ac#veDirect	
  -­‐	
  ConfiguraDon	
  
•  Model	
  configuraDons	
  	
  
class	
  Category	
  <	
  AcDveRecord::Base	
  
	
 ...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  	
  	
  

             CRUD	
  Default	
  Remotable	
  Methods	
  




...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  	
  


App.models.Category.create(	
  {	
  name	
  :	...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  	
  


App.models.Category.update(2,	
  	
  {	
  name...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  


App.models.Category.update_all({	
  name	
  :	
  ‘...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  

App.models.Category.all()	
  




                 ...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  


App.models.Category.find(	
  2	
  )	
  




       ...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  


App.models.Category.find_every(	
  {	
  condi#ons	
...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  


App.models.Category.exists(	
  [“	
  name	
  LIKE	...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  




                           Stone	
  Gao,	
  Kung...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  


App.models.Category.count()	
  




              ...
What	
  can	
  you	
  do	
  with	
  Ac#veDirect	
  (examples)	
  	
  


App.models.Category.delete(	
  2	
  )	
  
App.mode...
Wait,	
  Where	
  is	
  My	
  Controllers	
  ?!!	
  

     For	
  Ext	
  Js	
  Applica#ons,	
  you	
  don’t	
  necessarily...
Let’s	
  Collaborate	
  to	
  Improve	
  it	
  	
  	
  




                 hTp://github.com/stonegao/acDve-­‐direct	
  
...
Stone	
  Gao,	
  KungfuRails	
  
(stones.gao@gmail.com)	
  
Upcoming SlideShare
Loading in...5
×

ActiveDirect - Talk Directly with ActiveRecord using Ext.Direct and Rack Middleware

3,024

Published on

ActiveDirect - Talk Directly with ActiveRecord using Ext.Direct and Rack Middleware

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
3,024
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

ActiveDirect - Talk Directly with ActiveRecord using Ext.Direct and Rack Middleware

  1. 1. Talk  Directly  with  Ac#veRecord     using  Ext.Direct  and  Rack  Middleware   Stone  Gao,  Ekohe   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  2. 2. Outline   •  Intro  to  Ext  Js   •  The  Problem   •  The  SoluDon  :  Ext.Direct     •  Intro  to  Rack  Middleware   •  Ac#veDirect  (an  Experimental  ImplementaDon   of  Ext.Direct,  yet  )   •  What  can  you  do  with  Ac#veDirect  (Examples)   •  Q  &  A   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  3. 3. Intro  to  Ext  Js   Ext  JS  is  a  cross-­‐browser  JavaScript  library  for  building  rich   internet  applicaDons.   •  igh  performance,  customizable  UI  widgets,  Ajax   H • ntuiDve,  easy  to  use  API   I                                                                                                                                                (hTp://www.extjs.com)     Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  4. 4. The  Problem   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  5. 5. Ajax  Calls   Foo.js   …….   Ext.Ajax.request({   Bar.js                      url:  ("/foo?format=json"),   ……   Baz.js                      method:  "POST",                      jsonData:    payLoad,   ……   Ext.Ajax.request({                      success:  this..success,                      url:  (”/bar?format=json"),                      failure:  this.failure,   Ext.Ajax.request({                      method:  ”GET",                      headers:  {                      jsonData:    payLoad,                      url:  (”/baz?format=json"),                          'accepts':  'applicaDon/json'                      success:  this..success,                      method:  "POST",                      },                      failure:  this.failure,                      jsonData:    payLoad,                      scope  :  this                      headers:  {                      success:  this..success,                  });                      failure:  this.failure,                          'accepts':  'applicaDon/json'                      },                      headers:  {   ……                      scope  :  this                          'accepts':  'applicaDon/json'                  });                      },                      scope  :  this   ……                  });   ……   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  6. 6. Ajax  Calls   Foo.js   …….   Ext.Ajax.request({   Bar.js                      url:  ("/foo?format=json"),   ……   Baz.js                      method:  "POST",                      jsonData:    payLoad,   ……   Ext.Ajax.request({                      success:  this..success,                      url:  (”/bar?format=json"),                      failure:  this.failure,   Ext.Ajax.request({                      method:  ”GET",                      headers:  {                      jsonData:    payLoad,                      url:  (”/baz?format=json"),                          'accepts':  'applicaDon/json'                      success:  this..success,                      method:  "POST",                      },                      failure:  this.failure,                      jsonData:    payLoad,                      scope  :  this                      headers:  {                      success:  this..success,                  });                      failure:  this.failure,                          'accepts':  'applicaDon/json'                      },                      headers:  {   ……                      scope  :  this                          'accepts':  'applicaDon/json'                  });                      },                      scope  :  this   ……                  });   ……   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  7. 7. The  SoluDon   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  8. 8. The  SoluDon   Ext.Direct   Ext.Direct  is  a  pladorm  and  language  agnosDc  technology  to   remote  server-­‐side  methods  to  the  client-­‐side.  Furthermore,   Ext.Direct  allows  for  seamless  communicaDon  between  the   client-­‐side  of  an  Ext  applicaDon  and  any  server-­‐side  pladorm.   (hTp://www.extjs.com/products/extjs/direct.php)     You  can  write  the  following  code  in  javascript  :     App.models.Category.foo()   App.models.Category.bar()   App.models.Category.create(  {  name  :  ‘ruby’  }    )   App.models.Category.update(  1,  {  name  :  ‘ruby’  }    )   App.models.Category.delete(1)   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  9. 9. Intro  to  Rack  Middleware     Middleware   App   HTTP  Request   HTTP   Client   log   auth   cache   (browser)   HTTP  Response   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  10. 10. Intro  to  Rack  Middleware     >>    ps  aux  |  grep  ruby  |  wc  –l   3   Rack  Middleware  is  Pipeline  for  HTTP  Req  Processing!     Middleware   App   The  Unix  Philosophy  :     HTTP  Request   Rack  Middleware  is     Chainable   HTTP   and   Client   (browser)   HTTP  Response   log   auth   cache   Composable  like  Unix  Pipelines                     Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  11. 11. Intro  to  Rack  Middleware     Conven#on  :  app.call(env)   lambda  {  |env|                                                                                #Rack  Environment  variables        [    200,                                                                                                            #Status  Code              {‘Content-­‐Type’  =>  ‘text/plain’},            #Headers                [‘Hello  World!’]                                                                    #Reponse  Body                                                        ]   }     Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  12. 12. Ac#veDirect  (an  Experimental  ImplementaDon  of  Ext.Direct,  yet  )   Talk  Directly  with  Ac#veRecord  using  Ext.Direct  and  Rack  Middleware   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  13. 13. Ac#veDirect  (an  Experimental  ImplementaDon  of  Ext.Direct,  yet  )   Talk  Directly  with  Ac#veRecord  using  Ext.Direct  and  Rack  Middleware   Method   Dispatching   AcDveDirect::Router   Ext.Direct     AcDveDirect::Api   Server-­‐side   App   methods  configs   Rack  Middleware   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  14. 14. Ac#veDirect  (an  Experimental  ImplementaDon  of  Ext.Direct,  yet  )   How  Ac#veDirect::Api  works     App.REMOTING_API  =  {          "ac#ons":  {                  "Category":  [                          {                                  "name":  "all",                                  "len":  1   GET  /direct_api                          },                          {                                  "name":  "update_all",                                  "len":  2                          }                  ]          },          "namespace":  "App.models",          "url":  "/direct_router",          "type":  "remo#ng"   };   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  15. 15. Ac#veDirect  (an  Experimental  ImplementaDon  of  Ext.Direct,  yet  )   How  Ac#veDirect::Router  works   App.models.Category.all()   POST  /direct_router          {"ac#on":"Category","method":"all","data":[],"type":"rpc","#d":3}   Ac#veDirect::Router   Category.send  :all   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  16. 16. Ac#veDirect  -­‐  ConfiguraDon   •  Middleware  configuraDons  (environment.rb)            config.middleware.use  'Ac#veDirect::Router',  '/direct_router'            config.middleware.use  'Ac#veDirect::Api',  '/direct_api',  '/direct_router’   •  Method  configuraDons                <script  type="text/javascript"  src=”/javascripts/ext/adapter/ext/ext-­‐base.js"></script>              <script  type=“text/javascript”  src=”/javascripts/ext/ext-­‐all-­‐debug.js"></script>              <script  type=“text/javascript”  src=”/direct_api"></script>              Ext.Direct.addProvider(App.REMOTING_API);   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  17. 17. Ac#veDirect  -­‐  ConfiguraDon   •  Model  configuraDons     class  Category  <  AcDveRecord::Base          acts_as_nested_set          has_many  :books          acts_as_direct    :root_nodes  =>  0,  :create_new_cat  =>  {:len  =>  1,  :formHandler  =>  true}          def  root_nodes                    ……          end            def  create_new_cat(params)     Custom  remotable                    ……   methods          end   end     Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  18. 18. What  can  you  do  with  Ac#veDirect       CRUD  Default  Remotable  Methods   Custom  Remotable  Methods   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  19. 19. What  can  you  do  with  Ac#veDirect  (examples)       App.models.Category.create(  {  name  :  ‘ruby’  }    )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  20. 20. What  can  you  do  with  Ac#veDirect  (examples)       App.models.Category.update(2,    {  name  :  ‘ruby  books’  }  )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  21. 21. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.update_all({  name  :  ‘ruby  books’  },    “  name  LIKE  ‘%ruby%’  ”  )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  22. 22. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.all()   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  23. 23. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.find(  2  )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  24. 24. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.find_every(  {  condi#ons  :  “name  LIKE  ‘%java%’  “  }  )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  25. 25. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.exists(  [“  name  LIKE  ?  “,    ‘%java%’  ]  )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  26. 26. What  can  you  do  with  Ac#veDirect  (examples)     Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  27. 27. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.count()   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  28. 28. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.delete(  2  )   App.models.Category.delete_all(  “  name  LIKE    ‘%java%’    “    )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  29. 29. Wait,  Where  is  My  Controllers  ?!!   For  Ext  Js  Applica#ons,  you  don’t  necessarily  have  tradi#onal  Controllers     You  front  end  control  logics  is  the  Controllers  and  Ext  Widgets  is  the  Views   You  can  call  your  Model  methods  directly  using  Ext.Direct    and  Ac#veDirect   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  30. 30. Let’s  Collaborate  to  Improve  it       hTp://github.com/stonegao/acDve-­‐direct   (It’s  my  first  library    )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  31. 31. Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×