The document discusses using Ext.Direct and Rack middleware to directly communicate with ActiveRecord from JavaScript. It introduces Ext JS, describes the problem of making separate Ajax calls from different JavaScript files, and presents Ext.Direct as a solution. Ext.Direct allows defining remote methods in JavaScript that can directly call backend services like ActiveRecord. The document then introduces Rack middleware and an experimental implementation of Ext.Direct called ActiveDirect that uses Rack middleware to enable Ext.Direct's remote method calls to communicate with an ActiveRecord backend.

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)