31
Talk Directly with Ac#veRecord using Ext.Direct and Rack Middleware Stone Gao, KungfuRails ([email protected]) Stone Gao, Ekohe

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

Talk  Directly  with  Ac#veRecord    

using  Ext.Direct  and  Rack  Middleware  

Stone  Gao,  KungfuRails  ([email protected])  

Stone  Gao,  Ekohe  

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

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  ([email protected])  

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

Intro  to  Ext  Js  

Stone  Gao,  KungfuRails  ([email protected])  

Ext  JS  is  a  cross-­‐browser  JavaScript  library  for  building  rich  internet  applicaDons.  

• High  performance,  customizable  UI  widgets,  Ajax  • IntuiDve,  easy  to  use  API                                                                                                                                                  (hTp://www.extjs.com)    

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

The  Problem  

Stone  Gao,  KungfuRails  ([email protected])  

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

Ajax  Calls  

Stone  Gao,  KungfuRails  ([email protected])  

……  

Ext.Ajax.request({                      url:  (”/baz?format=json"),                      method:  "POST",                      jsonData:    payLoad,                      success:  this..success,                      failure:  this.failure,                      headers:  {                          'accepts':  'applicaDon/json'                      },                      scope  :  this                  });  

……  

……  

Ext.Ajax.request({                      url:  (”/bar?format=json"),                      method:  ”GET",                      jsonData:    payLoad,                      success:  this..success,                      failure:  this.failure,                      headers:  {                          'accepts':  'applicaDon/json'                      },                      scope  :  this                  });  

……  

…….  

Ext.Ajax.request({                      url:  ("/foo?format=json"),                      method:  "POST",                      jsonData:    payLoad,                      success:  this..success,                      failure:  this.failure,                      headers:  {                          'accepts':  'applicaDon/json'                      },                      scope  :  this                  });  

……  

Foo.js  

Bar.js  

Baz.js  

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

Ajax  Calls  

Stone  Gao,  KungfuRails  ([email protected])  

……  

Ext.Ajax.request({                      url:  (”/baz?format=json"),                      method:  "POST",                      jsonData:    payLoad,                      success:  this..success,                      failure:  this.failure,                      headers:  {                          'accepts':  'applicaDon/json'                      },                      scope  :  this                  });  

……  

……  

Ext.Ajax.request({                      url:  (”/bar?format=json"),                      method:  ”GET",                      jsonData:    payLoad,                      success:  this..success,                      failure:  this.failure,                      headers:  {                          'accepts':  'applicaDon/json'                      },                      scope  :  this                  });  

……  

…….  

Ext.Ajax.request({                      url:  ("/foo?format=json"),                      method:  "POST",                      jsonData:    payLoad,                      success:  this..success,                      failure:  this.failure,                      headers:  {                          'accepts':  'applicaDon/json'                      },                      scope  :  this                  });  

……  

Foo.js  

Bar.js  

Baz.js  

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

The  SoluDon  

Stone  Gao,  KungfuRails  ([email protected])  

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

The  SoluDon  

Stone  Gao,  KungfuRails  ([email protected])  

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)  

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

Intro  to  Rack  Middleware    

Stone  Gao,  KungfuRails  ([email protected])  

log   auth   cache  HTTP  Client  

(browser)  

HTTP  Request  

HTTP  Response  

App  Middleware  

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

Intro  to  Rack  Middleware    

Stone  Gao,  KungfuRails  ([email protected])  

log   auth   cache  HTTP  Client  

(browser)  

HTTP  Request  

HTTP  Response  

App  Middleware  

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

Rack  Middleware  is  Pipeline  for  HTTP  Req  Processing!    

The  Unix  Philosophy  :    Rack  Middleware  is    Chainable  and  Composable  like  Unix  Pipelines                    

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

Intro  to  Rack  Middleware    

Stone  Gao,  KungfuRails  ([email protected])  

lambda  {  |env|                                                                                #Rack  Environment  variables        [    200,                                                                                                            #Status  Code              {‘Content-­‐Type’  =>  ‘text/plain’},            #Headers                [‘Hello  World!’]                                                                    #Reponse  Body                                                        ]  }    

Conven#on  :  app.call(env)  

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

Ac#veDirect  (an  Experimental  ImplementaDon  of  Ext.Direct,  yet  )  

Stone  Gao,  KungfuRails  ([email protected])  

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

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

Ac#veDirect  (an  Experimental  ImplementaDon  of  Ext.Direct,  yet  )  

Stone  Gao,  KungfuRails  ([email protected])  

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

AcDveDirect::Router  

AcDveDirect::Api  

Ext.Direct    

App  

Rack  Middleware  

Server-­‐side  methods  configs  

Method  Dispatching  

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

Ac#veDirect  (an  Experimental  ImplementaDon  of  Ext.Direct,  yet  )  

Stone  Gao,  KungfuRails  ([email protected])  

How  Ac#veDirect::Api  works    

GET  /direct_api  

App.REMOTING_API  =  {          "ac#ons":  {                  "Category":  [                          {                                  "name":  "all",                                  "len":  1                          },                          {                                  "name":  "update_all",                                  "len":  2                          }                  ]          },          "namespace":  "App.models",          "url":  "/direct_router",          "type":  "remo#ng"  };  

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

Ac#veDirect  (an  Experimental  ImplementaDon  of  Ext.Direct,  yet  )  

Stone  Gao,  KungfuRails  ([email protected])  

How  Ac#veDirect::Router  works  

POST  /direct_router          {"ac#on":"Category","method":"all","data":[],"type":"rpc","#d":3}  

Category.send  :all  

Ac#veDirect::Router  

App.models.Category.all()  

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

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  ([email protected])  

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

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)                      ……          end  end    

Stone  Gao,  KungfuRails  ([email protected])  

Custom  remotable  methods  

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

What  can  you  do  with  Ac#veDirect      

Stone  Gao,  KungfuRails  ([email protected])  

CRUD  Default  Remotable  Methods  

Custom  Remotable  Methods  

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

What  can  you  do  with  Ac#veDirect  (examples)      

Stone  Gao,  KungfuRails  ([email protected])  

App.models.Category.create(  {  name  :  ‘ruby’  }    )  

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

What  can  you  do  with  Ac#veDirect  (examples)      

Stone  Gao,  KungfuRails  ([email protected])  

App.models.Category.update(2,    {  name  :  ‘ruby  books’  }  )  

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

What  can  you  do  with  Ac#veDirect  (examples)    

Stone  Gao,  KungfuRails  ([email protected])  

App.models.Category.update_all({  name  :  ‘ruby  books’  },    “  name  LIKE  ‘%ruby%’  ”  )  

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

What  can  you  do  with  Ac#veDirect  (examples)    

Stone  Gao,  KungfuRails  ([email protected])  

App.models.Category.all()  

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

What  can  you  do  with  Ac#veDirect  (examples)    

Stone  Gao,  KungfuRails  ([email protected])  

App.models.Category.find(  2  )  

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

What  can  you  do  with  Ac#veDirect  (examples)    

Stone  Gao,  KungfuRails  ([email protected])  

App.models.Category.find_every(  {  condi#ons  :  “name  LIKE  ‘%java%’  “  }  )  

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

What  can  you  do  with  Ac#veDirect  (examples)    

Stone  Gao,  KungfuRails  ([email protected])  

App.models.Category.exists(  [“  name  LIKE  ?  “,    ‘%java%’  ]  )  

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

What  can  you  do  with  Ac#veDirect  (examples)    

Stone  Gao,  KungfuRails  ([email protected])  

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

What  can  you  do  with  Ac#veDirect  (examples)    

Stone  Gao,  KungfuRails  ([email protected])  

App.models.Category.count()  

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

What  can  you  do  with  Ac#veDirect  (examples)    

Stone  Gao,  KungfuRails  ([email protected])  

App.models.Category.delete(  2  )  

App.models.Category.delete_all(  “  name  LIKE    ‘%java%’    “    )  

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

Wait,  Where  is  My  Controllers  ?!!  

Stone  Gao,  KungfuRails  ([email protected])  

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  

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

Let’s  Collaborate  to  Improve  it      

Stone  Gao,  KungfuRails  ([email protected])  

hTp://github.com/stonegao/acDve-­‐direct  

(It’s  my  first  library    )  

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

Stone  Gao,  KungfuRails  ([email protected])