Your SlideShare is downloading. ×
0
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Active Direct
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Active Direct

653

Published on

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

No Downloads
Views
Total Views
653
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
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)  

×