Upload
stone-gao
View
4.304
Download
3
Embed Size (px)
DESCRIPTION
ActiveDirect - Talk Directly with ActiveRecord using Ext.Direct and Rack Middleware
Citation preview
Talk Directly with Ac#veRecord
using Ext.Direct and Rack Middleware
Stone Gao, KungfuRails ([email protected])
Stone Gao, Ekohe
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])
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)
The Problem
Stone Gao, KungfuRails ([email protected])
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
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
The SoluDon
Stone Gao, KungfuRails ([email protected])
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)
Intro to Rack Middleware
Stone Gao, KungfuRails ([email protected])
log auth cache HTTP Client
(browser)
HTTP Request
HTTP Response
App 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
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)
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
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
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" };
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()
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])
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
What can you do with Ac#veDirect
Stone Gao, KungfuRails ([email protected])
CRUD Default Remotable Methods
Custom Remotable Methods
What can you do with Ac#veDirect (examples)
Stone Gao, KungfuRails ([email protected])
App.models.Category.create( { name : ‘ruby’ } )
What can you do with Ac#veDirect (examples)
Stone Gao, KungfuRails ([email protected])
App.models.Category.update(2, { name : ‘ruby books’ } )
What can you do with Ac#veDirect (examples)
Stone Gao, KungfuRails ([email protected])
App.models.Category.update_all({ name : ‘ruby books’ }, “ name LIKE ‘%ruby%’ ” )
What can you do with Ac#veDirect (examples)
Stone Gao, KungfuRails ([email protected])
App.models.Category.all()
What can you do with Ac#veDirect (examples)
Stone Gao, KungfuRails ([email protected])
App.models.Category.find( 2 )
What can you do with Ac#veDirect (examples)
Stone Gao, KungfuRails ([email protected])
App.models.Category.find_every( { condi#ons : “name LIKE ‘%java%’ “ } )
What can you do with Ac#veDirect (examples)
Stone Gao, KungfuRails ([email protected])
App.models.Category.exists( [“ name LIKE ? “, ‘%java%’ ] )
What can you do with Ac#veDirect (examples)
Stone Gao, KungfuRails ([email protected])
What can you do with Ac#veDirect (examples)
Stone Gao, KungfuRails ([email protected])
App.models.Category.count()
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%’ “ )
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
Let’s Collaborate to Improve it
Stone Gao, KungfuRails ([email protected])
hTp://github.com/stonegao/acDve-‐direct
(It’s my first library )
Stone Gao, KungfuRails ([email protected])