Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
• 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
Prochain SlideShare
Chargement dans…5
×

JavaScript and Friends

899 vues

Publié le

Six ways you can use JavaScript and Ruby together.

Originally presented at Red Dirt Ruby Conference May 6th 2010

Publié dans : Technologie
  • Comparing VigRX Plus to ED Prescription Drugs ●●● https://bit.ly/30G1ZO1
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • You can now be your own boss and get yourself a very generous daily income. START FREE...★★★ https://tinyurl.com/realmoneystreams2019
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Just got my check for $500, Sometimes people don't believe me when I tell them about how much you can make taking paid surveys online... So I took a video of myself actually getting paid $500 for paid surveys to finally set the record straight. I'm not going to leave this video up for long, so check it out now before I take it down! ➤➤ https://tinyurl.com/make2793amonth
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×