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

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 server) • E4X • Parallel operations 4. Using JavaScript to get data (JSON-P)

Where’s the kaboom?

YQL in 5 mins

YQL is Star Wars Allstars + Superman

var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); …

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)) { … } …

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

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

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

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

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

dev 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 • Uniﬁed 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 ﬂickr.photos.recent; • use • insert • update • delete

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)

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.ﬂickr.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 %22&format=json&callback=cbfunc

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-hostname data

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

http://speakerrate.com	37
http://www.techgig.com	9
http://www.slideshare.net	8
http://onwebdev.blogspot.com	7
http://oggadelaidaogg.blogspot.com	2
http://10.80.3.42:8000	1
http://115.112.206.131	1
http://blog.gabrieleromanato.com	1

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

by Tom Hughes-Croucher

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 66

Statistics