• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript and Friends
 

JavaScript and Friends

on

  • 944 views

Six ways you can use JavaScript and Ruby together.

Six ways you can use JavaScript and Ruby together.

Originally presented at Red Dirt Ruby Conference May 6th 2010

Statistics

Views

Total Views
944
Views on SlideShare
936
Embed Views
8

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 8

http://www.slideshare.net 8

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • we build for all kinds of platforms. <br /> mostly the web, but even on your iphone, android, desktop, chances are you&#x2019;ll still use javascript. <br /> <br />
  • 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. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

JavaScript and Friends JavaScript and Friends Presentation Transcript

  • • 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 world • Examples use V8 interpreter (The Ruby Racer)
  • 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!
  • 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!
  • 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!
  • 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!
  • 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!
  • Simulated Browser
  • 1: Headless UA • Full browser: sessions, redirects, and of course, javascript. • Used to interact with Xbox Live website
  • 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 Server(Ruby) Server A D B HTML Ta Data Tb Tc Td E Te C
  • 3: Shared Templates The Problem replace Client(JavaScript) Client Server(Ruby) Server A D B HTML Ta Data Tb Tc Td E Te C
  • 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?
  • 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?
  • 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?
  • 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
  • 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
  • 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 implementations, not abstractions
  • 4: Shared DSL • Implement a DSL in Javascript • Use the same script on client and server
  • A JavaScript Customization Language Talk about requirement to edit in real time
  • A JavaScript Customization Language Talk about requirement to edit in real time
  • A JavaScript Customization Language Talk about requirement to edit in real time
  • A JavaScript Customization Language Talk about requirement to edit in real time
  • 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
  • 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 • 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.
  • Code from Anywhere And here is Brendan Eich’s great innovation Server rendered here before your very eyes Client Server Awesome! Server
  • Code from Anywhere And here is Brendan Eich’s great innovation rendered here before Client your very eyes Server Client Awesome! Client
  • rb eval() = danger! Explain why this is safe Explain why rb.eval() is dangerous Because it only has access to what you tell it.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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 extended to whatever we want.
  • Process Control point out data format is whatever we want it to be, and can be extended to whatever we want.
  • Process Control point out data format is whatever we want it to be, and can be extended to whatever we want.
  • Process Control point out data format is whatever we want it to be, and can be extended to whatever we want.
  • 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
  • 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 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
  • Thank You. • cowboyd@thefrontside.net • @cowboyd • http://github.com/cowboyd/therubyracer • http://github.com/cowboyd/therubyrhino • http://drunkandretired.com/ThePodcast