Your SlideShare is downloading. ×
  • Like
ActiveDirect - Talk Directly with ActiveRecord  using Ext.Direct and Rack Middleware
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 2,917 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,917
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Talk  Directly  with  Ac#veRecord     using  Ext.Direct  and  Rack  Middleware   Stone  Gao,  Ekohe   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 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. 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. The  Problem   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 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. 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. The  SoluDon   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 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. Intro  to  Rack  Middleware     Middleware   App   HTTP  Request   HTTP   Client   log   auth   cache   (browser)   HTTP  Response   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 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. 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. 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. 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. 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. 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. 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. 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. What  can  you  do  with  Ac#veDirect       CRUD  Default  Remotable  Methods   Custom  Remotable  Methods   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 19. What  can  you  do  with  Ac#veDirect  (examples)       App.models.Category.create(  {  name  :  ‘ruby’  }    )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 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. 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. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.all()   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 23. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.find(  2  )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 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. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.exists(  [“  name  LIKE  ?  “,    ‘%java%’  ]  )   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 26. What  can  you  do  with  Ac#veDirect  (examples)     Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 27. What  can  you  do  with  Ac#veDirect  (examples)     App.models.Category.count()   Stone  Gao,  KungfuRails   (stones.gao@gmail.com)  
  • 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. 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. 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. Stone  Gao,  KungfuRails   (stones.gao@gmail.com)