Mobile Data: How to avoid the latency trap when using web services

Transcription

1 Mobile Data: How to avoid the latency trap when using web services

2 Tom

3 What is the latency trap?

4 Mobile

5 Web Service My Server

6 My Server Web Service

7 Optical Fibre

8 Web Service AT&T

9 Web Service AT&T

10 Radio Waves

11 Web Service AT&T

12 Web Service AT&T

13 Web Services AT&T

14 Bigger than mobile?

15

16 Wifi sucks.

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

18 Interference sucks.

19 So how do we fix it?

20 1. Reduce Requests

21 Web Services AT&T

22 Web Services Server AT&T

23 Reducing requests Yahoo! Performance Guidelines Reduce web service requests Bundle requests from device logically Gzip all web service responses

24 2. Shape to packets

25 Indiana Packet and the Byte of Doom

26 Packet #1 Payload Packet #2 Payload.

27 1 extra byte means 1 extra packet

28 Reduce number of packets

29 Packet sizes Make sure static assets (JS, images, etc) fit in discrete packet boundaries Don t forget Gzip Try and figure out high latency connections to send inlined assets to E.g. detect iphone

30 Packet Research a_engineers_gui.html

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

32 What is YQL?

33

34 dev

35 dev

36 dev

37 dev

38 dev

39 dev

40 dev

41 dev

42 dev

43 dev

44 dev

45 dev var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint);

46 dev var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { }

47 dev var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { } ImageSearchService/V1/imageSearch? appid=yahoodemo&query=corvette&results=2

48 dev var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { } ImageSearchService/V1/imageSearch? appid=yahoodemo&query=corvette&results=2 forecastrss?p=frxx0076&u=c

49 dev var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { } ImageSearchService/V1/imageSearch? appid=yahoodemo&query=corvette&results=2 forecastrss?p=frxx0076&u=c

50 dev var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { } ImageSearchService/V1/imageSearch? appid=yahoodemo&query=corvette&results=2 forecastrss?p=frxx0076&u=c

51 dev var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { } ImageSearchService/V1/imageSearch? appid=yahoodemo&query=corvette&results=2 forecastrss?p=frxx0076&u=c

52 dev var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { } ImageSearchService/V1/imageSearch? appid=yahoodemo&query=corvette&results=2 forecastrss?p=frxx0076&u=c

53 dev?? var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { }?? ImageSearchService/V1/imageSearch? appid=yahoodemo&query=corvette&results=2 forecastrss?p=frxx0076&u=c

54 dev?? var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { }?? ImageSearchService/V1/imageSearch? appid=yahoodemo&query=corvette&results=2 forecastrss?p=frxx0076&u=c

55 Yahoo! My Yahoo! Mail Welcome, guest Sign In MY PROJECTS APIs & WEB SERVICES RESOURCES SUPPORT YDN Maps Suite AJAX Maps Yahoo! Maps Web Services - AJAX API Getting Started Guide dev Learn the fundamentals of the Yahoo! Maps AJAX API and start creating your own maps. This page contains: Introduction and Prerequisites Examples Display a Yahoo! Map Add controls to your Yahoo! Map Add a logger to a Yahoo! Map Place a marker on a Yahoo! Map Draw Polylines on a Yahoo! Map Place Smart Markers on a Yahoo! Map Add multiple custom markers on Yahoo! Map Traffic information overlay Yahoo! Pipes RSS output information overlay Yahoo! Pipes JSON output information overlay Local search results overlay Overlay GeoRSS XML data Overlay custom objects at YGeoPoint location Overlay custom objects at YCoordPoint location Overlay polyline on Yahoo! Map Export Yahoo! Map in GeoRSS format GeoRSS overlay with polyline Get zoom level given radius from center Custom position of controls Flickr Services? Authentication? Change Marker Images Dynamically Use YMapTypeControl to position map types Other Features of the Yahoo! Maps AJAX api_key API (Required) YEvent, YGeoRSS, Response YMarker Rate Limit Your API application key. See here for more Top-Level details. Elements Terms of Service Support & Community? Download all of the cheatsheets and example code in the Yahoo The Yahoo! AJAX Maps API lets developers add maps to their web sites using DHTML and JavaScript. Maps? <html> <head> <b><script type="text/javascript" src=" Search var map = new YMap(document.getElementById('map')); READY TO GET STARTED? You aren't signed in Sign In Help var currentgeopoint Get an App ID = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); RECENT BLOG ARTICLES Leonardo da Vinci: Hacker Home The Tour Sign Up Explore Search Yahoo! Maps Cheatsheets Yahoo! My Yahoo! Mail Welcome, guest Sign In API Documentation Feeds Your API Keys Apply for a new API Key January 24, 2009 MY PROJECTS APIs & WEB SERVICES RESOURCES SUPPORT Whaddyathink? & the Yahoo! Application Platform YDN Weather RSS Feed January 22, 2009 flickr.places.getplacetypes Yahoo! Weather RSS Feed Making the new Yahoo! Yahoo! Currency My Yahoo! Converter Mail Welcome, guest Sign In Fetches a list of available YMapplace types for Flickr. The Weather RSS feed enables you to get up-to-date weather information for your location. You can save this Search feed in My Yahoo! or your favorite feed aggregator, or incorporate the RSS data into your own web site or client application. The Weather RSS feed is a dynamically-generated feed based on zip code or Location ID. MY PROJECTS APIs & WEB SERVICES RESOURCES SUPPORT This method does not require authentication. Arguments API Explorer : flickr.places.getplacetypes accessible January 21, 2009 if (flickcurl_prepare(fc, Retrieving and displaying data from Wikipedia with YQL January 18, 2009 "flickr.photos.geo.correctlocation", YDN Image Search Documentation for Yahoo! Search Web Services parameters, RSS Request count)) { } Summary Request Parameters This page describes the format of the request URL and the RSS response for developers. It contains these sections: Channel Elements Image Elements Example Response Item Elements Request URL Maps API Reference Bundle. Condition Codes <place_types> Examples For detailed descriptions of the classes and methods <place_type in the API, place_type_id="22">neighbourhood</place_type> Terms of Use check out v3.8 Reference Manual. <place_type place_type_id="7">locality</place_type> <place_type place_type_id="9">county</place_type> <place_type place_type_id="8">region</place_type> RSS Request Request parameters Remaining, Supporting Classes ImageSearchService/V1/imageSearch? See information on constructing REST queries <place_type 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 Introduction and Prerequisites <place_type place_type_id="29">continent</place_type> parameters and values after a question mark (?). Multiple appid=yahoodemo&query=corvette&results=2 Parameter parameters Valueare separated by Description an ampersand (&). </place_types> appid string (required) The application ID. See Application IDs for more information. The base URL for the Weather RSS feed is 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 built-in geocoder means that you can specify Error a physical Codes address or latitude/longitude coordinates your map's put quotes around "exact phrase". location, as you like. type all (default), any, or The kind of search to submit: In this section, Summary shows how to make an RSS request with phrase different parameters; Request Parameters In order to create and test applications 100: using Yahoo! Invalid Maps AJAX API API, Key you'll need to use shows a supported a table summarizing web those parameters. all returns results with all query terms. browser: Firefox 2, Internet Explorer 6 or 7, Opera The 9 API or Safari key passed 3. Newer was versions not valid of these or has browsers expired. are also any returns results with one or more of the query terms. supported. You can code your JavaScript 105: applications Service using currently your favorite text unavailable editor or IDE. phrase returns results containing the query terms as a phrase. SUMMARY The requested service is temporarily unavailable. results integer: default 10, The number of results to return. An application ID is required to use the Yahoo! Maps AJAX API. You can get an application ID here. 111: Format "xxx" not found The Weather RSS feed request follows simple HTTP GET syntax: max start 50with a base URL and then add parameters and values after a question mark (?). Multiple start parameters integer: are default separated 1 by The an starting ampersand result (&). position For to return (1-based). The finishing position (start For best results, you should launch your web pages The requested from a web response server. However, format was it's possible not found. to run applications the Weather RSS feed there are two parameters: + results - 1) cannot exceed directly from your hard drive by double-clicking 112: Method on them. This "xxx" can be not done found 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 UniversalBrowserRead requested method property was not in found. Firefox. p for location. gif, jpeg, png 114: Invalid SOAP envelope 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 The SOAP envelope send in the request The location could not parameter be parsed. p is required. Use this parameter to indicate the location the content. weather forecast as a Displaying a Yahoo! Map zip forecastrss?p=frxx0076&u=c code Location ID. coloration any (default), color, The service returns only the images of the coloration specified (color or 115: Invalid XML-RPC Method Call bw black-and-white). All the API classes and methods necessary to interact The XML-RPC with Yahoo! request Maps document are available could to your not application be parsed. when site string: default no A domain to restrict your searches to (e.g. 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= ID "YD-eQRpTl0_JX2E95l_xAFs5UwZUlNQhhn7lj1H"; you cannot use this Application For ID and example, must request to get weather one for Yahoo! Headquarters in Sunnyvale, CA, use the zip code for Sunnyvale here. API Explorer output string: xml (94089): (default), json, php Or use the Location ID for Sunnyvale (USCA1116): Image Search Documentation for Yahoo! Search Submitting Image Queries The Image Search Web Service allows you to search the Internet for images. The format for the output. If json is requested, the results will be returned in JSON format. If php is requested, the results will be returned in Serialized PHP format. callback string The name of the callback function to wrap around the JSON data. The Search following characters are allowed: A-Z a-z 0-9. [] and _. If output=json has not been requested, this parameter has no effect. More information on the READY TO GET STARTED? By applying for an Application ID for this service, you hereby agree to the Terms of Use Get an App ID YAHOO! GROUPS DISCUSSIONS yahoo local search code in php Tue, 27 Jan 2009 My Web Search API shut down announcement Wed, 21 Jan 2009 view all Re: Site Explorer API returns 999 Rate Limit Exceeded Wed, 21 Jan 2009 Reminder: Old obsolete versions of Local Search (V1, V2) shutting do Mon, 19 Jan 2009

56 dev var map = new YMap(document.getElementById('map')); var currentgeopoint = new YGeoPoint( _c.lat, _c.lon ); map.addmarker(currentgeopoint); if (flickcurl_prepare(fc, "flickr.photos.geo.correctlocation", parameters, count)) { } ImageSearchService/V1/imageSearch? appid=yahoodemo&query=corvette&results=2 forecastrss?p=frxx0076&u=c

57 dev YQL

58 dev YQL

59 dev Bindings YQL

60 YQL Unified interface to Web services Self-describing to avoid documentation Uses a common way to return data

61 YQL is like SQL Uses SQL verbs Uses SQL syntax Returns rows of data Self-describing show tables; desc table;

62 Verbs show - show tables; desc - desc search.web; select - select * from flickr.photos.recent; use insert update delete

63 Demo

64 Web Services Server AT&T

65 YQL Example

66 select * from flickr.photos.info where photo_id in (select id from flickr.photos.search where query = lolcats )

67 Conclusion Latency hurts anything wireless Fight latency by reducing connections Fight latency by reducing the number of unnecessary packets YQL can help you bundle your requests to mobile device without a backend

68 follow me on twitter.com/sh1mmer Slides? Feedback?