Active Direct

882 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
882
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Active Direct

  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)  

×