Mobile Data: How to avoid the latency trap - SWDC 2010

Mobile Data: How to avoid the latency trap when using web services SWDC June 2010, Stockholm

I’m BIG in Sweden

Tom Hughes-Croucher @sh1mmer

What is the latency trap?

Mobile

Web Service My Server

My Server Web Service

Optical Fibre

Web Service Telia

Radio Waves

Web Service Telia

Web Services Telia

Bigger than mobile?

Wiﬁ sucks.

Ofcom study • UK study into Wiﬁ interfence (PDF) • Upto 90% of bandwidth used on protocol • Many other sources of interference • Baby monitors • Microwaves • Cordless Phones

Interference sucks.

So how do we ﬁx it?

1. Reduce Sequential Requests

Web Services AT&T

Web Services Server AT&T

Reducing requests • Yahoo! Performance Guidelines • http://developer.yahoo.com/performance • Reduce web service requests • Bundle requests from device logically • Gzip all web service responses

Never that simple

Bandwidth

Bandwidth doesn’t matter so much

Mike Belshe • Research into page load times • http://www.belshe.com/2010/05/24/more- bandwidth-doesnt-matter-much/

Bandwidth up

Latency Down

Fighting latency

>4 People 15% surcharge

We care about perception

6 Requests Per Domain

Reducing requests • Yahoo! Performance Guidelines • http://developer.yahoo.com/performance • Reduce web service requests • Reduce serial requests • Bundle requests from device logically • Gzip all web service responses • Maximise concurrent requests • LabJS http://labjs.com/

2. Shape to packets

Indiana Packet and the Byte of Doom

Packet #1 Payload ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ........................................................... Packet #2 Payload .

1 extra byte means 1 extra packet

Reduce number of packets

Packet sizes • Make sure static assets (JS, images, etc) ﬁt in discrete packet boundaries • Don’t forget Gzip • Try and ﬁgure out ‘high latency’ connections to send inlined assets to • E.g. detect ‘iPhone’

Packet Research http://developer.yahoo.net/blog/archives/2009/10/ a_engineers_gui.html

• What is YQL? • Why is YQL bad-ass for mobile development? • How you can use YQL in mobile development • Examples

What is YQL?

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 var map = new MY PROJECTS APIs & WEB SERVICES 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 dev Home The Tour Sign Up Explore currentGeoPoint = new Started Guide var Get an App ID Search YGeoPoint( _c.Lat, _c.Lon ); Learn the fundamentals of the Yahoo! Maps AJAX API and start creating your own maps. This page contains: Introduction and Prerequisites Flickr Services map.addMarker(currentGeoPoint); Yahoo! Maps Cheatsheets Yahoo! My Yahoo! Mail RECENT BLOG ARTICLES ? Examples Welcome, guest Sign In Display a Yahoo! Map API Documentation Feeds Your API Keys Apply for a new API Key Add controls to your Yahoo! Map Add a logger to a Yahoo! Map … Leonardo da Vinci: Hacker January 24, 2009 Search Place a marker on a Yahoo! Map Draw Polylines on a Yahoo! Map MY PROJECTS APIs & WEB SERVICES RESOURCES SUPPORT 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 Fetches a list of available place types for Flickr. Yahoo! Pipes JSON output information overlay accessible Local search results overlay Overlay GeoRSS XML data YMap … The Weather RSS feed enables you to get up-to-date weather information for your location. You can save this January 21, 2009 Search feed in My Yahoo! or your favorite feed aggregator, or incorporate the RSS data into your own web site or client Overlay custom objects at YGeoPoint location Authentication Overlay custom objects at YCoordPoint location if (flickcurl_prepare(fc, application. The Weather RSSRetrievingdynamically-generatedfrom based on zip code or Location ID. feed is a and displaying data feed Wikipedia with YQL PROJECTS MY APIs & WEB SERVICES RESOURCES SUPPORT ? Overlay polyline on Yahoo! Map This page describes the format of the 18, 2009 URL and the RSS response for developers. It contains these January request Export Yahoo! Map in GeoRSS format GeoRSS overlay with polyline This method does not require authentication. "flickr.photos.geo.correctLocation", sections: YDN Image Search Documentation for Yahoo! Search Web Services Get zoom level given radius from center Custom position of controls Arguments parameters, count)) { …Documentation for Yahoo! Search RSS Request Summary Image Search } READY TO GET STARTED? By applying for an Application ID for this service, you Change Marker Images Dynamically hereby agree to the Terms of Use Use YMapTypeControl to position map types api_key (Required) Other Features of the Yahoo! Maps AJAX API … Request Parameters RSS Response YEvent, YGeoRSS, YMarker Submitting Image Queries Rate Limit Get an App ID Your API application key. See here for moreTop-Level Elements details. The Image Search Web Service allows you to search the Internet for images. 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 check out v3.8 Reference Manual. http://search.yahooapis.com/ <place_type place_type_id="7">locality</place_type> <place_type place_type_id="9">county</place_type> Request parameters Tue, 27 Jan 2009 RSS Request My Web Search API shut down <place_type <place_type ImageSearchService/V1/imageSearch? place_type_id="8">region</place_type> Remaining, Supporting Classes place_type_id="12">country</place_type> See information on constructing REST queries The Weather RSS feed request follows simple HTTP GET syntax: start with a base URL and then add announcement Wed, 21 Jan 2009 Introduction and Prerequisites <place_type place_type_id="29">continent</place_type> (?). Multiple parameters are separated by an ampersand (&). </place_types> appid=YahooDemo&query=Corvette&results=2 parameters and values after a question mark The Yahoo! AJAX Maps API lets developers add maps to their web sites using DHTML and JavaScript®. the Weather RSS feed is Parameter appid Value string (required) Description The application ID. See Application IDs for more information. Re: Site Explorer API returns 999 Rate Limit The base URL for Maps ? 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 114: Invalid SOAP envelope http://weather.yahooapis.com/ u for degrees units (Fahrenheit or Celsius). adult_ok 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 115: Invalid XML-RPC Method Call forecastrss?p=FRXX0076&u=c zip code or Location ID. coloration any (default), color, The service returns only the images of the coloration specified (color or bw black-and-white). 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. 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 code for Sunnyvale ID example, to get one 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

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

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;

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

Web Services Server Telia

YQL Example

select * from ﬂickr.photos.info where photo_id in (select id from ﬂickr.photos.search where query = “lolcats”)

Server did a bunch of work (11 requests) and aggregated the results

Conclusion • Latency hurts anything wireless • Fight latency by reducing web service requests on the device • Fight latency by parallelising requests • Fight latency by reducing the number of unnecessary packets • YQL can help you bundle your requests to mobile device without a backend

follow me on twitter.com/sh1mmer Slides? Feedback? www.speakerrate.com/sh1mmer

Mobile Data: How to avoid the latency trap - SWDC 2010

by Tom Hughes-Croucher on Jun 03, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 72

Statistics

Mobile Data: How to avoid the latency trap - SWDC 2010 — Presentation Transcript

http://speakerrate.com	30
http://www.slideshare.net	20
http://developer.yahoo.net	19
http://developer.yahoo.com	3