The document discusses using Ruby and JavaScript together in various ways. It mentions embedding JavaScript in Ruby, using Ruby to simulate a browser and run JavaScript tests, sharing templates and code between Ruby and JavaScript, using JavaScript as a DSL to customize properties on both the client and server, running a Ruby agent exposed via JavaScript, and extending an image server with JavaScript at runtime.

2. • We love JavaScript
• We love Ruby better :)

3. Ruby + JavaScript
No one trick pony
• We’ll see six specific uses in three
categories
• All from the real world
• Examples use V8 interpreter (The Ruby
Racer)

4. Embedding Javascript
gem install therubyracer
Note that the only thing
available here is the js
standard objects
Nothing else except what
you explicitly embed into
it.
No DOM!

5. Embedding Javascript
gem install therubyracer
Note that the only thing
available here is the js
standard objects
Nothing else except what
you explicitly embed into
it.
No DOM!

6. Embedding Javascript
gem install therubyracer
Note that the only thing
available here is the js
standard objects
Nothing else except what
you explicitly embed into
it.
No DOM!

7. Embedding Javascript
gem install therubyracer
Note that the only thing
available here is the js
standard objects
Nothing else except what
you explicitly embed into
it.
No DOM!

8. Embedding Javascript
gem install therubyracer
Note that the only thing
available here is the js
standard objects
Nothing else except what
you explicitly embed into
it.
No DOM!

9. Simulated
Browser

10. 1: Headless UA
• Full browser: sessions, redirects, and of
course, javascript.
• Used to interact with Xbox Live website

11. 2: Headless Unit Testing
• faster: no network/rendering overhead
• better test isolation
• easier to run on a CI server

12. now it gets interesting.
Code Sharing

13. 3: Shared Templates
The Problem
Client(JavaScript) Server(Ruby)

14. 3: Shared Templates
The Problem
Client(JavaScript)
Client Server(Ruby)
Server
A
D
B
HTML Ta Data
Tb Tc Td
E
Te
C

15. 3: Shared Templates
The Problem
replace
Client(JavaScript)
Client Server(Ruby)
Server
A
D
B
HTML Ta Data
Tb Tc Td
E
Te
C

16. Solution: Work the Server
Client(JavaScript)
Client Server(Ruby)
Server
A
D
B
E
C
you either make 2 ajax
requests
OR
you have a “wrapper”
html template
Still suboptimal because which repurposes html
what if you need to use DRY, but inefficient
as a data format for
that data for something
that has no template Even so, sending fully
I.e. for a growl-like assembled views across
notification. the wire, just feels
HTML is a terrible wrong. after all, aren’t
datastructure. we supposed to transmit
just the model?

17. Solution: Work the Server
Client(JavaScript)
Client Server(Ruby)
Server
A AJAX for D
D HTML Td Data
B
E
AJAX for C
C HTML Tc Data
you either make 2 ajax
requests
OR
you have a “wrapper”
html template
Still suboptimal because which repurposes html
what if you need to use DRY, but inefficient
as a data format for
that data for something
that has no template Even so, sending fully
I.e. for a growl-like assembled views across
notification. the wire, just feels
HTML is a terrible wrong. after all, aren’t
datastructure. we supposed to transmit
just the model?

18. Solution: Work the Server
Client(JavaScript)
Client Server(Ruby)
Server
A AJAX for D,C
D
HT
B ML
Td
Data
HTML
Tc
E
L
HTM
C
you either make 2 ajax
requests
OR
you have a “wrapper”
html template
Still suboptimal because which repurposes html
what if you need to use DRY, but inefficient
as a data format for
that data for something
that has no template Even so, sending fully
I.e. for a growl-like assembled views across
notification. the wire, just feels
HTML is a terrible wrong. after all, aren’t
datastructure. we supposed to transmit
just the model?

19. Solution: Bring the Templates With You
Client(JavaScript)
Client Server(Ruby)
Server
A AJAX for D,C
D
B
E
C
Ta Ta
Tb Tc Td Tb Tc Td
Te Te

20. Solution: Bring the Templates With You
Client(JavaScript)
Client Server(Ruby)
Server
A AJAX for D,C
D
HTM
L
B Td
Data
Tc
L
E HTM
C
Ta Ta
Tb Tc Td Tb Tc Td
Te Te

21. What this looks like in code.

22. What this looks like in code.

23. What this looks like in code.

24. Advantages
• Efficient, DRY
• Data is data. Display is display.
• Render without server when possible.

25. Advantages
• Efficient, DRY
• Data is data. Display is display.
• Render without server when possible.
• Share implementations, not abstractions

26. 4: Shared DSL
• Implement a DSL in Javascript
• Use the same script on client and server

27. A JavaScript Customization Language
Talk about requirement
to edit in real time

28. A JavaScript Customization Language
Talk about requirement
to edit in real time

29. A JavaScript Customization Language
Talk about requirement
to edit in real time

30. A JavaScript Customization Language
Talk about requirement
to edit in real time

31. A JavaScript Customization Language
The client uses it to:
• render the property browser and editors
• edit and update values in real-time
The server uses it to:
• lookup property names
• set initial values

32. Delve a bit into the
history of javascript
Server
Extension

33. What makes JavaScript
Awesome?
• Download completely and totally untrusted
code from anywhere on the internet
• Execute it in your browser knowing that
your OS, Data and CPU are (relatively) safe
from attack.
• This has allowed for applications never
thought possible.

34. Code from Anywhere
And here is Brendan
Eich’s great innovation Server
rendered here before
your very eyes
Client
Server
Awesome!
Server

35. Code from Anywhere
And here is Brendan
Eich’s great innovation
rendered here before Client
your very eyes
Server
Client
Awesome!
Client

36. rb eval() = danger!
Explain why this is safe
Explain why rb.eval() is
dangerous
Because it only has
access to what you tell
it.

37. rb eval() = danger!
js eval() = safe!
Explain why this is safe
Explain why rb.eval() is
dangerous
Because it only has
access to what you tell
it.

38. rb eval() = danger!
js eval() = safe!
Explain why this is safe
Explain why rb.eval() is
dangerous
Because it only has
access to what you tell
it.

39. rb eval() = danger!
js eval() = safe!
Explain why this is safe
Explain why rb.eval() is
dangerous
Because it only has
access to what you tell
it.

40. rb eval() = danger!
js eval() = safe!
Explain why this is safe
Explain why rb.eval() is
dangerous
Because it only has
access to what you tell
it.

41. 5. Remote Control
• Run an agent written in Ruby
• Expose specific actions to clients

42. Process Control
point out data format
is whatever we want it
to be, and can be
extended to whatever we
want.

43. Process Control
point out data format
is whatever we want it
to be, and can be
extended to whatever we
want.

44. Process Control
point out data format
is whatever we want it
to be, and can be
extended to whatever we
want.

45. Process Control
point out data format
is whatever we want it
to be, and can be
extended to whatever we
want.

46. 6: Canvatar Script Store
javascript
Image Store image image++ Client
• Extend an image server at run time
• Use JavaScript to expose functionality
implemented with RMagick or equivalent

47. Pimp My Avatar

48. Pimp My Avatar
1) fetch the image

49. Pimp My Avatar
1) fetch the image
+
2) apply transform

50. Pimp My Avatar
1) fetch the image
+ =
2) apply transform

51. Ruby + JavaScript
• Ruby as browser implementation
• Ruby speaks JavaScript
• Ruby wrapped in JavaScript armor
• Let your imagination run wild Use ruby as a the implementation
language of the browser
Make ruby smarter by making it
speak the browser’s language
natively
Use JavaScripts

53. Thank You.
• cowboyd@thefrontside.net
• @cowboyd
• http://github.com/cowboyd/therubyracer
• http://github.com/cowboyd/therubyrhino
• http://drunkandretired.com/ThePodcast