0
End to End JavaScript -
From Server to Client
   Tom Hughes-Croucher (@sh1mmer)
What’s up doc?
What’s up doc?
1. YQL in 5 mins
2. Using JavaScript to make YQL frikkin’ awesome
3. JavaScript is good stuff (on the serve...
Where’s the kaboom?
YQL in 5 mins
YQL is
Star Wars Allstars + Superman
dev
dev
dev
dev
dev
dev
dev
dev
dev
dev
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
          YMap(document.getElementById('map'));
          …
dev       var currentGeoPoint = new
          YG...
var map = new
          YMap(document.getElementById('map'));
          …
dev       var currentGeoPoint = new
          YG...
Yahoo!    My Yahoo!   Mail                                                                                                ...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
dev




      YQL
dev




      YQL
dev



       Bindings




      YQL
dev



       Bindings




      YQL
dev



             Bindings




      YQL
            YQL
dev



                Bindings




       YQL
               YQL
      select
dev



                Bindings




       YQL
               YQL
      select
      desc
dev



                Bindings




       YQL
               YQL
      select
      desc
      show
YQL

• Unified interface to Web services
• Self-describing to avoid documentation
• Uses a common way to return data
YQL is like SQL
• Uses SQL verbs
• Uses SQL syntax
• Returns rows of data
• Self-describing
 • show tables;
 • desc table;
Pick your weapon of choice
Verbs
•   show - show tables;

•   desc - desc search.web;

•   select - select * from flickr.photos.recent;

•   use

•   ...
Demo
http://developer.yahoo.com/yql/console
Using JavaScript to
make YQL frikkin’
    awesome
Step 1: Open Tables
http://api.search.live.net/xml.aspx?
appid=5061CD1C64F6015A128E51F
E1FDFDC3B18D0610A&query=sushi
Step 2: Add JavaScript
http://opi.yahoo.com/online?
 m=t&u=tom_croucher_y
tom_croucher_y is ONLINE


             or


tom_croucher_y is NOT ONLINE
JavaScript: It’s good stuff
     (on the server)
E4X
XML Literals
XPath on XML
You really really want it
to be awesome. But it’s
just creepy and wrong.
E4X references
Don’t use the root node
CSS Selectors → XPath
Parallel Processing
Rhino
    http://www.flickr.com/photos/thomashawk/2228937833/in/set-72157611169911360/
Authenication
We’ve birthed a
  monster
Consuming YQL in
   JavaScript
http://query.yahooapis.com/v1/yql?q=select%20*
  %20from%20search.web%20where%20query
             %20%3D%20%22jsconf
    ...
Business up front - Party in the back
Conclusion

• YQL = Star Wars + Superman
• E4X useful but annoying
• Concurrency in server-side JS rocks
• JSON-P for x-ho...
YQL is totally bad-ass
       Keep asking me about it. Seriously.

Tom Hughes-Croucher - croucher@yahoo-inc.com
          ...
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu
Upcoming SlideShare
Loading in...5
×

Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu

5,942

Published on

Published in: Technology, Sports
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,942
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Transcript of "Apps from Space!!!1!! (End to End JavaScript) @ JSConf.eu"

    1. 1. End to End JavaScript - From Server to Client Tom Hughes-Croucher (@sh1mmer)
    2. 2. What’s up doc?
    3. 3. What’s up doc? 1. YQL in 5 mins 2. Using JavaScript to make YQL frikkin’ awesome 3. JavaScript is good stuff (on the server) • E4X • Parallel operations 4. Using JavaScript to get data (JSON-P)
    4. 4. Where’s the kaboom?
    5. 5. YQL in 5 mins
    6. 6. YQL is Star Wars Allstars + Superman
    7. 7. dev
    8. 8. dev
    9. 9. dev
    10. 10. dev
    11. 11. dev
    12. 12. dev
    13. 13. dev
    14. 14. dev
    15. 15. dev
    16. 16. dev
    17. 17. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); …
    18. 18. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } …
    19. 19. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2
    20. 20. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
    21. 21. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
    22. 22. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
    23. 23. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
    24. 24. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
    25. 25. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); ? … … if (flickcurl_prepare(fc, ? "flickr.photos.geo.correctLocation", parameters, count)) { … } … ? http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 ? http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
    26. 26. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); ? … … if (flickcurl_prepare(fc, ? "flickr.photos.geo.correctLocation", parameters, count)) { … } … ? http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 ? http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
    27. 27. Yahoo! My Yahoo! Mail Welcome, guest Sign In Search MY PROJECTS APIs & WEB SERVICES var map = new RESOURCES SUPPORT YDN Maps Suite AJAX Maps YMap(document.getElementById('map')); Yahoo! Maps Web Services - AJAX API Getting … READY TO GET STARTED? You aren't signed in Sign In Help Started Guide var currentGeoPoint = newGet an App ID dev Home The Tour Sign Up Explore Search Learn the fundamentals of the Yahoo! Maps AJAX API and start creating your own maps. This page contains: Introduction and Prerequisites YGeoPoint( _c.Lat, _c.Lon ); Yahoo! Maps Cheatsheets Examples Flickr Services Yahoo! My Yahoo! Mail RECENT BLOG ARTICLES Welcome, guest Sign In API Documentation Feeds Your API Keys map.addMarker(currentGeoPoint); Display a Yahoo! Map ? Apply for a new API Key Add controls to your Yahoo! Map Leonardo da Vinci: Hacker Search Add a logger to a Yahoo! Map Place a marker on a Yahoo! Map … MY PROJECTS January 24, 2009 APIs & WEB SERVICES RESOURCES SUPPORT Draw Polylines on a Yahoo! Map Whaddyathink? & the Yahoo! Application flickr.places.getPlaceTypes Place Smart Markers on a Yahoo! Map Add multiple custom markers on Yahoo! Map YDN Weather RSS Feed Platform January 22, 2009 Traffic information overlay Yahoo! Pipes RSS output information overlay Yahoo! Weather RSS Feed Making the new Yahoo! Currency Converter Yahoo! My Yahoo! Mail Welcome, guest Sign In Local search results overlay Fetches a list of available place types for Flickr. Yahoo! Pipes JSON output information overlay YMap accessible The Weather RSS feed enables you Januaryto get up-to-date weather information for your location. You can save this 21, 2009 Overlay GeoRSS XML data Overlay custom objects at YGeoPoint location … feed in My Yahoo! or your favorite feed aggregator, or incorporate the RSS data into your own web site or client Search application. The Weather RSSRetrievingdynamically-generatedfrom based on zip code or Location ID. feed is a and displaying data feed Authentication Overlay custom objects at YCoordPoint location Overlay polyline on Yahoo! Map if (flickcurl_prepare(fc, Wikipedia with YQL PROJECTS MY APIs & WEB SERVICES RESOURCES This page describes the format of the 18, 2009 URL and the RSS response for developers. It contains these January request SUPPORT ? Export Yahoo! Map in GeoRSS format YDN Image Search Documentation for Yahoo! Search Web Services This method does not require authentication. GeoRSS overlay with polyline "flickr.photos.geo.correctLocation", sections: Get zoom level given radius from center Custom position of controls Arguments RSS Request Image Search Documentation for Yahoo! Search READY TO GET STARTED? Change Marker Images Dynamically Use YMapTypeControl to position map types parameters, count)) { … } Summary Request Parameters By applying for an Application ID for this service, you hereby agree to the Terms of Use Submitting Image Queries Rate Limit api_key (Required) Other Features of the Yahoo! Maps AJAX API … RSS Response YEvent, YGeoRSS, YMarker Your API application key. See here for moreTop-Level Elements details. The Image Search Web Service allows you to search the Internet for images. Get an App ID Terms of Service Channel Elements Support & Community Image Elements Example Response ? Item Elements Download all of the cheatsheets and example code in the Yahoo Request URL Maps API Reference Bundle. Condition Codes YAHOO! GROUPS DISCUSSIONS view all <place_types> Examples http://search.yahooapis.com/ImageSearchService/V1/imageSearch For detailed descriptions of the classes and methods in the API, place_type_id="22">neighbourhood</place_type> <place_type yahoo local search code in php Terms of Use Tue, 27 Jan 2009 check out v3.8 Reference Manual. <place_type place_type_id="7">locality</place_type> <place_type <place_type http://search.yahooapis.com/ place_type_id="9">county</place_type> RSS Request place_type_id="8">region</place_type> Remaining, Supporting Classes Request parameters My Web Search API shut down See information on constructing REST queries announcement Introduction and <place_type Prerequisites <place_type ImageSearchService/V1/imageSearch? place_type_id="12">country</place_type> The Weather RSS feed request follows simple HTTP GET syntax: start with a base URL and then add place_type_id="29">continent</place_type> (?). Multiple parameters are separated by an ampersand (&). parameters and values after a question mark Wed, 21 Jan 2009 Parameter Value Description </place_types> appid=YahooDemo&query=Corvette&results=2 The Yahoo! AJAX Maps API lets developers add maps to their web sites using DHTML and JavaScript®. the Weather RSS feed is The base URL for Maps appid string (required) The application ID. See Application IDs for more information. Re: Site Explorer API returns 999 Rate Limit Exceeded are fully embeddable and scriptable using the JavaScript programming language. Yahoo! Maps AS-Flash API's query string (required) The query to search for. Use + to include terms, - to exclude terms, and Wed, 21 Jan 2009 ? Error Codes built-in geocoder means that you can specify a physical address or latitude/longitude coordinates for your map's http://weather.yahooapis.com/forecastrss put quotes around "exact phrase". location, as you like. type all (default), any, or The kind of search to submit: Reminder: Old obsolete versions of Local In this section, Summary shows how to make an RSS request with different parameters; Request Parameters phrase Search (V1, V2) shutting do In order to create and test applications 100: Yahoo! Maps AJAX API, you'll need to use a supported summarizing those parameters. using Invalid API Key shows a table web all returns results with all query terms. Mon, 19 Jan 2009 The API key passed was not valid or has expired. browser: Firefox 2, Internet Explorer 6 or 7, Opera 9 or Safari 3. Newer versions of these browsers are also any returns results with one or more of the query terms. supported. You can code your JavaScript applications usingcurrently unavailable 105: Service your favorite text editor or IDE. phrase returns results containing the query terms as a phrase. SUMMARY results integer: default 10, The number of results to return. The requested service is temporarily unavailable. An application ID is required to use the Yahoo! Maps AJAX API. You can get an application ID here. max 50 The Weather RSS feed request follows simple HTTP GET syntax: start with a base URL and then add 111: Format "xxx" not found start integer: default 1 parameters and values after a question mark (?). Multiple parameters are separated by an starting result position to return (1-based). The finishing position (start The ampersand (&). For For best results, you should launch your web pagesrequested response format was not found. applications The from a web server. However, it's possible to run + results - 1) cannot exceed 1000. the Weather RSS feed there are two parameters: directly from your hard drive by double-clickingMethod This can be donefound 112: on them. "xxx" not by lowering the security settings in format any (default), bmp, Specifies the kind of image file to search for. the Internet Explorer browser or by setting the The requested method was not found. p for location. UniversalBrowserRead property in Firefox. gif, jpeg, png u for degrees units (Fahrenheit or Celsius). adult_ok 114: Invalid SOAP envelope http://weather.yahooapis.com/ no value or 1 The service filters out adult content by default. Enter a 1 to allow adult content. The SOAP envelope send in the requestlocationnot be parsed. required. Use this parameter to indicate the location for the weather forecast as a The could parameter p is Displaying a Yahoo! Map zip code or Location ID. coloration any (default), color, The service returns only the images of the coloration specified (color or 115: Invalid XML-RPC Method Call forecastrss?p=FRXX0076&u=c All the API classes and methods necessary to interact with Yahoo! Mapsdocument couldyour application when The XML-RPC request are availablehttp://weather.yahooapis.com/forecastrss?p=location to not be parsed. bw black-and-white). site string: default no A domain to restrict your searches to (e.g. www.yahoo.com). You may you include Yahoo! Maps AJAX API library in your web page.This example uses the demonstration application value submit up to 30 values (site=www.yahoo.com&site=www.cnn.com). ID "YD-eQRpTl0_JX2E95l_xAFs5UwZUlNQhhn7lj1H"; you cannot use this Application Forand must requestweather for Yahoo! Headquarters in Sunnyvale, CA, use the zip ID example, to get one code for Sunnyvale here. API Explorer (94089): output string: xml The format for the output. If json is requested, the results will be returned (default), json, php in JSON format. If php is requested, the results will be returned in Serialized PHP format. <html> API Explorer : flickr.places.getPlaceTypes http://weather.yahooapis.com/forecastrss?p=94089 <head> callback string The name of the callback function to wrap around the JSON data. The <b><script type="text/javascript" Or use the Location ID for Sunnyvale (USCA1116): following characters are allowed: A-Z a-z 0-9 . [] and _. If output=json has src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=YD- not been requested, this parameter has no effect. More information on the
    28. 28. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
    29. 29. dev YQL
    30. 30. dev YQL
    31. 31. dev Bindings YQL
    32. 32. dev Bindings YQL
    33. 33. dev Bindings YQL YQL
    34. 34. dev Bindings YQL YQL select
    35. 35. dev Bindings YQL YQL select desc
    36. 36. dev Bindings YQL YQL select desc show
    37. 37. YQL • Unified interface to Web services • Self-describing to avoid documentation • Uses a common way to return data
    38. 38. YQL is like SQL • Uses SQL verbs • Uses SQL syntax • Returns rows of data • Self-describing • show tables; • desc table;
    39. 39. Pick your weapon of choice
    40. 40. Verbs • show - show tables; • desc - desc search.web; • select - select * from flickr.photos.recent; • use • insert • update • delete
    41. 41. Demo http://developer.yahoo.com/yql/console
    42. 42. Using JavaScript to make YQL frikkin’ awesome
    43. 43. Step 1: Open Tables
    44. 44. http://api.search.live.net/xml.aspx? appid=5061CD1C64F6015A128E51F E1FDFDC3B18D0610A&query=sushi
    45. 45. Step 2: Add JavaScript
    46. 46. http://opi.yahoo.com/online? m=t&u=tom_croucher_y
    47. 47. tom_croucher_y is ONLINE or tom_croucher_y is NOT ONLINE
    48. 48. JavaScript: It’s good stuff (on the server)
    49. 49. E4X
    50. 50. XML Literals
    51. 51. XPath on XML
    52. 52. You really really want it to be awesome. But it’s just creepy and wrong.
    53. 53. E4X references
    54. 54. Don’t use the root node
    55. 55. CSS Selectors → XPath
    56. 56. Parallel Processing
    57. 57. Rhino http://www.flickr.com/photos/thomashawk/2228937833/in/set-72157611169911360/
    58. 58. Authenication
    59. 59. We’ve birthed a monster
    60. 60. Consuming YQL in JavaScript
    61. 61. http://query.yahooapis.com/v1/yql?q=select%20* %20from%20search.web%20where%20query %20%3D%20%22jsconf %22&format=json&callback=cbfunc
    62. 62. Business up front - Party in the back
    63. 63. Conclusion • YQL = Star Wars + Superman • E4X useful but annoying • Concurrency in server-side JS rocks • JSON-P for x-hostname data
    64. 64. YQL is totally bad-ass Keep asking me about it. Seriously. Tom Hughes-Croucher - croucher@yahoo-inc.com - twitter.com/sh1mmer - speakrate.com/sh1mmer developer.yahoo.com/yql/forum
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×