• We love JavaScript
• We love Ruby better :)
Ruby + JavaScript
            No one trick pony

• We’ll see six specific uses in three
  categories
• All from the real wo...
Embedding Javascript
     gem install therubyracer


                                Note that the only thing
            ...
Embedding Javascript
     gem install therubyracer


                                Note that the only thing
            ...
Embedding Javascript
     gem install therubyracer


                                Note that the only thing
            ...
Embedding Javascript
     gem install therubyracer


                                Note that the only thing
            ...
Embedding Javascript
     gem install therubyracer


                                Note that the only thing
            ...
Simulated
Browser
1: Headless UA




• Full browser: sessions, redirects, and of
  course, javascript.
• Used to interact with Xbox Live web...
2: Headless Unit Testing

• faster: no network/rendering overhead
• better test isolation
• easier to run on a CI server
now it gets interesting.




Code Sharing
3: Shared Templates
       The Problem

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

           Client(JavaScript)
                 Client                     Se...
3: Shared Templates
                    The Problem
replace
                  Client(JavaScript)
                        C...
Solution: Work the Server
                                    Client(JavaScript)
                                         ...
Solution: Work the Server
                                    Client(JavaScript)
                                         ...
Solution: Work the Server
                                    Client(JavaScript)
                                         ...
Solution: Bring the Templates With You

             Client(JavaScript)
                     Client                       ...
Solution: Bring the Templates With You

             Client(JavaScript)
                     Client                       ...
What this looks like in code.
What this looks like in code.
What this looks like in code.
Advantages

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

• Efficient, DRY
• Data is data. Display is display.
• Render without server when possible.
• Share implementat...
4: Shared DSL


• Implement a DSL in Javascript
• Use the same script on client and server
A JavaScript Customization Language
                                  Talk about requirement
                             ...
A JavaScript Customization Language
                                  Talk about requirement
                             ...
A JavaScript Customization Language
                                  Talk about requirement
                             ...
A JavaScript Customization Language
                                  Talk about requirement
                             ...
A JavaScript Customization Language

The client uses it to:

  • render the property browser and editors
  • edit and upda...
Delve a bit into the
        history of javascript




 Server
Extension
What makes JavaScript
    Awesome?
• Download completely and totally untrusted
  code from anywhere on the internet
• Exec...
Code from Anywhere
And here is Brendan
Eich’s great innovation                       Server
rendered here before
your very...
Code from Anywhere
And here is Brendan
Eich’s great innovation
rendered here before      Client
your very eyes



        ...
rb eval() = danger!

         Explain why this is safe
         Explain why rb.eval() is
         dangerous
         Becau...
rb eval() = danger!
js eval() = safe!
         Explain why this is safe
         Explain why rb.eval() is
         dangero...
rb eval() = danger!
js eval() = safe!
         Explain why this is safe
         Explain why rb.eval() is
         dangero...
rb eval() = danger!
js eval() = safe!
         Explain why this is safe
         Explain why rb.eval() is
         dangero...
rb eval() = danger!
js eval() = safe!
         Explain why this is safe
         Explain why rb.eval() is
         dangero...
5. Remote Control


• Run an agent written in Ruby
• Expose specific actions to clients
Process Control




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




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




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




            point out data format
            is whatever we want it
            to be, and can be
   ...
6: Canvatar    Script Store




                                javascript
         Image Store   image                 im...
Pimp My Avatar
Pimp My Avatar
1) fetch the image
Pimp My Avatar
1) fetch the image



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



              +                      =
                     2) apply transform
Ruby + JavaScript

• Ruby as browser implementation
• Ruby speaks JavaScript
• Ruby wrapped in JavaScript armor
• Let your...
Thank You.

• cowboyd@thefrontside.net
• @cowboyd
• http://github.com/cowboyd/therubyracer
• http://github.com/cowboyd/the...
JavaScript and Friends
JavaScript and Friends
Upcoming SlideShare
Loading in …5
×

JavaScript and Friends

813 views
772 views

Published on

Six ways you can use JavaScript and Ruby together.

Originally presented at Red Dirt Ruby Conference May 6th 2010

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
813
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

  • we build for all kinds of platforms.
    mostly the web, but even on your iphone, android, desktop, chances are you’ll still use javascript.

  • The key point I want to make with this talk is just how many possibilities there are, and how many positive outcomes you can have when these guys join forces.



























































  • JavaScript and Friends

    1. 1. • We love JavaScript • We love Ruby better :)
    2. 2. 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)
    3. 3. 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!
    4. 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. 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. 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. 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. 8. Simulated Browser
    9. 9. 1: Headless UA • Full browser: sessions, redirects, and of course, javascript. • Used to interact with Xbox Live website
    10. 10. 2: Headless Unit Testing • faster: no network/rendering overhead • better test isolation • easier to run on a CI server
    11. 11. now it gets interesting. Code Sharing
    12. 12. 3: Shared Templates The Problem Client(JavaScript) Server(Ruby)
    13. 13. 3: Shared Templates The Problem Client(JavaScript) Client Server(Ruby) Server A D B HTML Ta Data Tb Tc Td E Te C
    14. 14. 3: Shared Templates The Problem replace Client(JavaScript) Client Server(Ruby) Server A D B HTML Ta Data Tb Tc Td E Te C
    15. 15. 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?
    16. 16. 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?
    17. 17. 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?
    18. 18. 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
    19. 19. 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
    20. 20. What this looks like in code.
    21. 21. What this looks like in code.
    22. 22. What this looks like in code.
    23. 23. Advantages • Efficient, DRY • Data is data. Display is display. • Render without server when possible.
    24. 24. Advantages • Efficient, DRY • Data is data. Display is display. • Render without server when possible. • Share implementations, not abstractions
    25. 25. 4: Shared DSL • Implement a DSL in Javascript • Use the same script on client and server
    26. 26. A JavaScript Customization Language Talk about requirement to edit in real time
    27. 27. A JavaScript Customization Language Talk about requirement to edit in real time
    28. 28. A JavaScript Customization Language Talk about requirement to edit in real time
    29. 29. A JavaScript Customization Language Talk about requirement to edit in real time
    30. 30. 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
    31. 31. Delve a bit into the history of javascript Server Extension
    32. 32. 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.
    33. 33. Code from Anywhere And here is Brendan Eich’s great innovation Server rendered here before your very eyes Client Server Awesome! Server
    34. 34. Code from Anywhere And here is Brendan Eich’s great innovation rendered here before Client your very eyes Server Client Awesome! Client
    35. 35. rb eval() = danger! Explain why this is safe Explain why rb.eval() is dangerous Because it only has access to what you tell it.
    36. 36. 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.
    37. 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. 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. 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. 40. 5. Remote Control • Run an agent written in Ruby • Expose specific actions to clients
    41. 41. Process Control point out data format is whatever we want it to be, and can be extended to whatever we want.
    42. 42. Process Control point out data format is whatever we want it to be, and can be extended to whatever we want.
    43. 43. Process Control point out data format is whatever we want it to be, and can be extended to whatever we want.
    44. 44. Process Control point out data format is whatever we want it to be, and can be extended to whatever we want.
    45. 45. 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
    46. 46. Pimp My Avatar
    47. 47. Pimp My Avatar 1) fetch the image
    48. 48. Pimp My Avatar 1) fetch the image + 2) apply transform
    49. 49. Pimp My Avatar 1) fetch the image + = 2) apply transform
    50. 50. 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
    51. 51. Thank You. • cowboyd@thefrontside.net • @cowboyd • http://github.com/cowboyd/therubyracer • http://github.com/cowboyd/therubyrhino • http://drunkandretired.com/ThePodcast

    ×