work you don’t have to do JAVASCRIPT APIS & MASHUPS 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

both are very closely linked

to understand a mashup you first have to understand APIs

WHAT’S AN API? work you don’t have to do

work you don’t have to do

APIS A pplication P rogramming I nterface an abstracted interface to 3 rd 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/

A pplication P rogramming I nterface

an abstracted interface to 3 rd 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?

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/

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/

WEB API EXAMPLES work you don’t have to do

work you don’t have to do

MAPPING APIS Google Maps best Australian images good Australian maps free for free sites

Google Maps

best Australian images

good Australian maps

free for free sites

MAPPING APIS Google Maps best Australian images good Australian maps free for free sites Virtual Earth good Australian images good Australian maps restrictive licensing

Google Maps

best Australian images

good Australian maps

free for free sites

Virtual Earth

good Australian images

good Australian maps

restrictive licensing

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

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

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

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 Google Yahoo! MSN providers services web search web cache spelling content analysis incoming links

Google

Yahoo!

MSN

providers

services

web search

web cache

spelling

content analysis

incoming links

AMAZON product information prices images customer reviews affiliate sales

product information

prices

images

customer reviews

affiliate sales

MANY, MANY MORE advertising blogging bookmarks events messaging music news photos video weather

advertising

blogging

bookmarks

events

messaging

music

news

photos

video

weather

MASHUPS work you don’t have to do

work you don’t have to do

novel UI or application enhance data combine multiple data sources MASHUPS API API local data

novel UI or application

enhance data

combine multiple data sources

MASHUP EXAMPLES work you don’t have to do

work you don’t have to do

MAAAAAAAAAAAPS! Chicagocrime http://www.chicagocrime.org/ Overplot http://persistent.info/overplot/ Banned Books http://www.applefritter.com/bannedbooks/ Transit Map http://www.brail.org/transit/nycgoogle.html World of Warcraft http://mapwow.com/

Chicagocrime http://www.chicagocrime.org/

Overplot http://persistent.info/overplot/

Banned Books http://www.applefritter.com/bannedbooks/

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/

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

FlickrSVG

Familiar Faces

Web Connections

HOW DO I USE AN API? work you don’t have to do

work you don’t have to do

TYPES OF APIS 2 general types: Interfaces (maps) Data (everything else)

2 general types:

Interfaces (maps)

Data (everything else)

MAKING A MAP <script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXX&quot;></script>

<script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXX&quot;></script>

MAKING A MAP mapObject = new GMap2(document.getElementById(&quot;mapArea&quot;)); 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);

mapObject = new GMap2(document.getElementById(&quot;mapArea&quot;));

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);

MAKING A MAP

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!

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()

AJAX: Use XMLHttpRequest()

X ML + JavaScript AJA X : Use X MLHttpRequest()

AJA X : Use X MLHttpRequest()

LIMITATIONS & CHALLENGES work you don’t have to do

work you don’t have to do

LIMITATIONS OF APIS restricted to what the provider makes available screen scraping query size/quantity privacy concerns with automation

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?

APIs change

license no longer appropriate

terms of use change

can you keep up?

API LOCK-IN APIs change license no longer appropriate terms of use change can you keep up? API standards meta-APIs Mapstraction

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

same domain policy

can load

images

CSS

JavaScript

but not HTML/XML

browsers designed to protect “content”

WORKAROUNDS server proxy slow if not cached bottleneck server

server proxy

slow if not cached

bottleneck

WORKAROUNDS server proxy slow if not cached bottleneck JSON-P no POST fails silently security risk { name1: value1, name2: value2, … } <script>

server proxy

slow if not cached

bottleneck

JSON-P

no POST

fails silently

security risk

WORKAROUNDS server proxy slow if not cached bottleneck JSON-P no POST fails silently security risk callback( { name1: value1, name2: value2, … } ); ?f=callback <script>

server proxy

slow if not cached

bottleneck

JSON-P

no POST

fails silently

security risk

WORKAROUNDS server proxy slow if not cached bottleneck JSON-P no POST fails silently security risk Flash it’s Flash Flash crossdomain.xml

server proxy

slow if not cached

bottleneck

JSON-P

no POST

fails silently

security risk

Flash

it’s Flash

THE FUTURE ContextAgnosticXmlHttpRequest no HTTP authentication no cookies and/or cross-domain policy file (like Flash) and/or HTTP header: X-Allow-Foreign-Hosts limited cross-domain XMLHttpRequest enhanced JSON JSONRequest like XHR, but execute JavaScript response allows POST requests provides status/error info and/or HTTP header: X-Allow-Foreign-Hosts

ContextAgnosticXmlHttpRequest

no HTTP authentication

no cookies

and/or

cross-domain policy file (like Flash)

and/or

HTTP header: X-Allow-Foreign-Hosts

limited cross-domain XMLHttpRequest

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

open your data

trust

let others do the work

offer an API

microformats

XML

JSON-P

get involved

W3C Web API WG

QUESTIONS? work you don’t have to do Kevin Yank www.sitepoint.com Cameron Adams www.themaninblue.com

work you don’t have to do