Transcript the full presentation

JAVASCRIPT APIS &
MASHUPS
work you don’t have to do
Kevin Yank
www.sitepoint.com
Cameron Adams
www.themaninblue.com
APIS VS MASHUPS
 both are very closely linked
 to understand a mashup you first have to
understand APIs
work you don’t have to do
WHAT’S AN API?
APIS
 Application Programming Interface
 an abstracted interface to 3rd party
programming
 access someone else’s code without having
to worry about the details
 a general principle in software development
 http://java.sun.com/j2ee/1.4/docs/api/
WEB APIS
 Far sexier than their desktop cousins
 Operate on the same principles
 But why do we need them?
WHAT YOUR WEBSITE LOOKS LIKE TO A PROGRAMMER
WHAT YOUR WEB 2.0 WEB SITE LOOKS LIKE TO A
PROGRAMMER
APIS LET PROGRAMMERS GET DATA OUT OF A WEBSITE
Your website is an island
Now it’s part of a true network
WHAT DOES A WEB API LOOK
LIKE?
 usually accessed via HTTP
 you don’t need any special technology to
access a Web API, just your browser or a
server HTTP connection
 a call to a script on someone else’s server
 http://www.flickr.com/services/api/
work you don’t have to do
WEB API EXAMPLES
MAPPING APIS
 Google Maps
 best Australian images
 good Australian maps
 free for free sites
 Virtual Earth
 good Australian images
 good Australian maps
 restrictive licensing
 Yahoo! Maps




good Australian images
Flash or JavaScript
static image
limited Australian maps
MAPPING DEMO
SEARCH APIS
providers
services
 Google
 Yahoo!
 MSN





web search
web cache
spelling
content analysis
incoming links
AMAZON
 product information




prices
images
customer reviews
affiliate sales
MANY, MANY MORE










advertising
blogging
bookmarks
events
messaging
music
news
photos
video
weather
work you don’t have to do
MASHUPS
MASHUPS
 novel UI or
application
 enhance data
 combine
multiple data
sources
API
local data
mashup
API
API
work you don’t have to do
MASHUP EXAMPLES
MAAAAAAAAAAAPS!




Chicagocrime: http://www.chicagocrime.org/
Overplot: http://persistent.info/overplot/
Asciimaps: http://www.asciimaps.com/
Banned Books:
http://www.applefritter.com/bannedbooks/
 Sex Offenders:
http://www.mapsexoffenders.com/
 Transit Map:
http://www.brail.org/transit/nycgoogle.html
 World of Warcraft: http://mapwow.com/
IT’S NOT ALL MAPS
 TagTV: http://www.onflex.org/TagTV/
 Viral Video:
http://www.viralvideochart.com/
 Blueorganizer:
http://www.adaptiveblue.com/
 Salesforce AdWords:
http://www.salesforce.com/google/
BLOWING MY OWN HORN
 FlickrSVG
 Familiar Faces
 Web Connections
ARE YOU HUMAN?
work you don’t have to do
HOW DO I USE AN API?
TYPES OF APIS
 2 general types:
 Interfaces (maps)
 Data (everything else)
MAKING A MAP
<script type="text/javascript"
src="http://maps.google.com/maps?file=api&am
p;v=2&amp;key=XXXX"></script>
MAKING A MAP
mapObject = new
GMap2(document.getElementById("mapArea"));
mapObject.setCenter(new GLatLng(-27.059126,
132.791016), 3);
var userPoint = new GLatLng(-37.851543,
145.011978);
var mapMarker = new GMarker(userPoint);
mapObject.addOverlay(mapMarker);
XML
 using REST architecture, simply make an
HTTP request to a resource on the server
 curl()
 wget()
 returns XML
 you do whatever you want with it!
XML + JavaScript
 AJAX: Use XMLHttpRequest()
XML + JavaScript
 AJAX: Use XMLHttpRequest()
work you don’t have to do
LIMITATIONS & CHALLENGES
LIMITATIONS OF APIS
 restricted to what the provider makes
available
 screen scraping
 query size/quantity
 privacy concerns with automation
API LOCK-IN
 APIs change
 license no longer
appropriate
 terms of use change
 can you keep up?
 API standards
 meta-APIs
 Mapstraction
CROSS-DOMAIN AJAX
 same domain policy
 can load
 images
 CSS
 JavaScript
 but not HTML/XML
 browsers designed to
protect “content”
A
WORKAROUNDS
 server proxy
 slow if not cached
 bottleneck
 JSON-P
 no POST
 fails silently
 security risk
 Flash
 it’s Flash
{callback({
name1: value1,
name1:
value1,
name2: value2,
name2:
value2,
…
}
});
mashup
<script>
Flash
?f=callback
server
crossdomain.xml
API
THE FUTURE
limited cross-domain
XMLHttpRequest
 ContextAgnosticXmlHttp
Request
 no HTTP authentication
 no cookies
and/or
 cross-domain policy file
(like Flash)
and/or
 HTTP header:
X-Allow-Foreign-Hosts
enhanced JSON
 JSONRequest
 like XHR, but execute
JavaScript response
 allows POST requests
 provides status/error info
and/or
 HTTP header:
X-Allow-Foreign-Hosts
DO SOMETHING!
 open your data
 trust
 let others do the work
 offer an API
 microformats
 XML
 JSON-P
 get involved
 W3C Web API WG
Questions?