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)