Client-side APIs

How, What, & Why

What's a (web) API?

We use APIs to enhance our sites, in a few different ways. Functionality: We use APIs to outsource part of our application’s functionality to someone else, so we can focus on the unique bits. Public Data: There is a huge amount of data available, and APIs make that data available to use in a structured way. (Google Maps API) For example, I don’t particularly want to install a database of the world’s addresses and algorithms for searching them on my server -- I’d much rather just use the Google Maps API to geocode an address. User Data: We also use APIs to access data from other products and integrate them with our own. Users use multiple products and expect for them to work together - synergy. APIs can be quite useful, so we need to understand how to best use APIs, and this is a talk about how client-side APIs work, what APIs are out there, and why you should use them.

Client-side APIs

Many different ways to bring in content from other sites using HTML and JavaScript.

Client-side APIs: How?

By definition (or atleast by my definition), an API to bring in stuff from another server, and there's only so many ways that you can do that in the client. HTML was designed for webpages to connect together via links, not all on one page, so many of the ways they work (like much of the web) are hacks. These technologies are old, but their uses as APIs is more recent. It's taken a while to figure out the hacks and for client-side APIs to take off.

IMG as API

First image API?

IMG as API: url2png

Read more: url2png.com

IMG as API: Google Charts API

Read more: Google Charts API Docs

IMG as API: Google Maps Image APIs

Read more: Google Static Maps API | Google Street View Image API

EMBED/OBJECT as API

Flickr Slideshow:

IFRAME as API: Simple

YouTube Embed:

Youtube Player Embed Reference

Exercise Time!

SCRIPT as API: Libraries

Your code:

Their code:

Google Analytics

More reading: Google Analytics JS Docs

Disqus

More reading: Disqus Universal Code Docs

Facebook Like button

More reading: Facebook Like Button

Exercise Time!

XmlHttpRequest as API?

SCRIPT as API: Data (JSONP)

Your page:

API Server:

JSONP: Twitter API

Example URL: http://search.twitter.com/search.json?q=capitoljs

JSONP: Youtube API

Lightweight JSONP JS Library

See also: Lightweight JSONP JS Library

JSONP: Flickr API

See also: jQuery .ajax() | Flickr API

Combo APIs

...they do it all!

Google Maps API

Disqus API

Facebook API

Any APIs that use this crazy nested iframe hack will wrap it up in a client library so that mere mortals like us can use it.

Exercise Time!

Client-side APIs: Why?

• No server necessary
• Faster for user
• Less cost
• Less failure points
• Less limits

Okay so it might seem like we're kind of stretching the browser to make client-side APIs work. Why do we go through so much trouble, when we could just use our servers? Well, there are a couple reasons.. Don’t need a server - can start prototyping before there’s a server, only bring in when necessary. (That’s why I got into it - didn’t have servers to use at Google) Okay, but even if you have a server... Faster for user- doesn’t have to wait for middleman Results can be cached on the client, making it almost INSTANTANEOUS! The user’s browser does the work, no hits on your server Don’t have to worry about your server going down, only theirs. Avoid issues with rate-limiting (for the most part) particularly on cloud services (i.e. Maps API)

Client-side APIs: What?

See also: ProgrammableWeb.com API Directory

Client-side APIs: What?

Client-side APIs: Functionality

• Analytics
• Site Search
• Text Processing (Translation/Analysis/TTS/Conversion)
• Image Processing (Editing/Filter)
• Payment
• Communication (Telephony/Messaging/Chat/Email)

Stuff you could write yourself, but find it easier to let the API do for you.

Text Processing: WebPurify

See also: WebPurify JSON Docs | Profane Game

Chris asked to be respectful, but since I'm not capable of doing that myself, I'll simply ask an API to censor me - the WebPurify API.

Image Processing: Aviary

See also: Aviary Feather API

Client-side APIs: Data

• Mapping
• Real Estate
• Shopping
• Weather
• Movies
• Science
• Books
• Words
• Government
• Food
• Sports
• Travel
• Wikipedia (Everything)

Data: SimpleGeo

See also: SimpleGeo Docs

APIs: User Data

• Social Networks
• Multimedia: Music, Video, Photos
• Documents

- Multimedia: Music (SoundCloud?), Video, Photos (Instagram, WebPurify) - Document storage: DropBox - Social Networks: Social networks (mostly FB/Twitter)

So you want to use an API...

• Will you save time/money?
• What are the terms?
• What is the pricing?
• How stable is it?
• How will it affect performance?
• What's your plan B?

APIs are...

See also: Wordnik API | ProgrammableWeb