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

Tom Hughes-Croucher
@sh1mmer

What is the latency
trap?

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

1. Reduce Sequential
Requests

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

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/

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/

Indiana Packet and the
Byte of Doom

Packet #1 Payload

.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
...........................................................

Packet #2 Payload
.

1 extra byte means
1 extra packet

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

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

var map = new
…
…

…
if (flickcurl_prepare(fc,
"flickr.photos.geo.correctLocation",
parameters, count)) { … }
…

var map = new
…
…

…
…

http://search.yahooapis.com/
ImageSearchService/V1/imageSearch?
appid=YahooDemo&query=Corvette&results=2

var map = new
…
…

…
…

http://search.yahooapis.com/

http://weather.yahooapis.com/
forecastrss?p=FRXX0076&u=c

var map = new
…

?
…

…

?
…

? http://search.yahooapis.com/

?
http://weather.yahooapis.com/

Yahoo! My Yahoo! Mail Welcome, guest Sign In

Search
var map = new
MY PROJECTS APIs & WEB SERVICES RESOURCES SUPPORT

YDN Maps Suite AJAX Maps
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
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
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
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

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

YQL Telia

select * from
flickr.photos.info where
photo_id in (select id
from flickr.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

More Related Content

Viewers also liked (6)

Similar to Mobile Data: How to avoid the latency trap - SWDC 2010 (20)

More from Tom Croucher (20)

Recently uploaded (20)

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