coding on the shoulders of giants

61
DOPPLR Coding on the Shoulders of Giants Matt Biddulph Dopplr is a service for frequent travellers and their friends. It lets you share your travel plans with a group of trusted people that you choose. This worldmap shows where everyone on Dopplr came to London from on October 4th 2007 (the day this talk was given at FOWA)

Upload: matt-biddulph

Post on 13-May-2015

19.565 views

Category:

Technology


0 download

DESCRIPTION

A developer talk from FOWA 2007 on how Dopplr works as a Small Piece, Loosely Joined.

TRANSCRIPT

Page 1: Coding on the Shoulders of Giants

DOPPLRDOPPLR

DOPPLR

Where next?Where next?

Where next?

Coding on the Shoulders of Giants

Matt Biddulph

Dopplr is a service for frequent travellers and their friends. It lets you share your travel plans with a group of trusted people that you choose.

This worldmap shows where everyone on Dopplr came to London from on October 4th 2007 (the day this talk was given at FOWA)

Page 2: Coding on the Shoulders of Giants

DOPPLRDOPPLR

DOPPLR

Where next?Where next?

Where next?

Dopplr is a service for frequent travellers and their friends. It lets you share your travel plans with a group of trusted people that you choose.

This worldmap shows where everyone on Dopplr came to London from on October 4th 2007 (the day this talk was given at FOWA)

Page 3: Coding on the Shoulders of Giants

A "platform" is a system that can be programmed and therefore customized by outside developers – users – and in that way, adapted to countless needs and niches that the platform's original developers could not have possibly contemplated, much less had time to accommodate.

–Marc Andreessen, http://blog.pmarca.com/2007/09/the-three-kinds.html

Today I’m going to talk about using the internet as a platform that your webapps can build on top of.

Page 4: Coding on the Shoulders of Giants

A "platform" is a system that can be programmed and therefore customized by outside developers – users – and in that way, adapted to countless needs and niches that the platform's original developers could not have possibly contemplated, much less had time to accommodate.

–Marc Andreessen, http://blog.pmarca.com/2007/09/the-three-kinds.html

It’s impossible to predict all possible uses that your users might want to make of your app and its data, so we’re going to look at the technologies that developers can use today that maximise possibilities for integration and reuse.

Page 5: Coding on the Shoulders of Giants

Dopplr is a very targeted web application, and we have no wish to reinvent the wheel on any technology or function that isn’t part of our core mission to find serendipity in travel. We designed Dopplr from the start to be a Small Piece, Loosely Joined.

We believe that your data belongs to you, and that you should be able to have it anywhere you want it - even if you don’t frequently visit dopplr.com

Page 6: Coding on the Shoulders of Giants

Everything in this talk is based on live code that’s running on dopplr.com today. I’ll be pointing out what libraries we used. Because Dopplr’s written in Ruby on Rails, that’s where all the examples will come from.

Page 7: Coding on the Shoulders of Giants

The most basic and most important principle of integrating web apps today is sharing data. A good webapp helps its users make distinctive structured data (whether directly or indirectly) and does useful things with it.

Page 8: Coding on the Shoulders of Giants

Sharing Data

The most basic and most important principle of integrating web apps today is sharing data. A good webapp helps its users make distinctive structured data (whether directly or indirectly) and does useful things with it.

Page 9: Coding on the Shoulders of Giants

The simplest way to expose data in a webapp is to supply feeds in machine-readable formats. Dopplr gives its users a “my trips” feed. As a newsfeed, it’s not all that useful as it tells you things you already know (the trips that you’ve added). As a lightweight read-only API, it works very well. We mark up our feed with all the appropriate machine-readable formats that we can find: GeoRSS, hCalendar and Google Calendar GData.

This means it’s trivial to plug it into other systems like Yahoo Pipes, and mash it up with other data.

Page 10: Coding on the Shoulders of Giants

The simplest way to expose data in a webapp is to supply feeds in machine-readable formats. Dopplr gives its users a “my trips” feed. As a newsfeed, it’s not all that useful as it tells you things you already know (the trips that you’ve added). As a lightweight read-only API, it works very well. We mark up our feed with all the appropriate machine-readable formats that we can find: GeoRSS, hCalendar and Google Calendar GData.

This means it’s trivial to plug it into other systems like Yahoo Pipes, and mash it up with other data.

Page 11: Coding on the Shoulders of Giants

The simplest way to expose data in a webapp is to supply feeds in machine-readable formats. Dopplr gives its users a “my trips” feed. As a newsfeed, it’s not all that useful as it tells you things you already know (the trips that you’ve added). As a lightweight read-only API, it works very well. We mark up our feed with all the appropriate machine-readable formats that we can find: GeoRSS, hCalendar and Google Calendar GData.

This means it’s trivial to plug it into other systems like Yahoo Pipes, and mash it up with other data.

Page 12: Coding on the Shoulders of Giants

It’s also easy to transform our data into KML and view it in Google Earth.

Page 13: Coding on the Shoulders of Giants

And NetNewsWire lets you import trip details in iCal because of the hCalendar.

Page 14: Coding on the Shoulders of Giants

We also mark up our contact lists using hCard.

Page 15: Coding on the Shoulders of Giants

We also mark up our contact lists using hCard.

Page 16: Coding on the Shoulders of Giants

http://www.hauntedcastle.org/castle/And via our API, users are starting to create interesting tools like this Carbon Calculator.

Page 17: Coding on the Shoulders of Giants

If we want to integrate your Dopplr data with your data from elsewhere, we need to know who you are on other sites.

Page 18: Coding on the Shoulders of Giants

User Identity

If we want to integrate your Dopplr data with your data from elsewhere, we need to know who you are on other sites.

Page 19: Coding on the Shoulders of Giants

DOPPLRDOPPLR

DOPPLR

Where next?Where next?

Where next?

People have different identities spread across many sites.

Page 20: Coding on the Shoulders of Giants

OpenID is the obvious solution to this mess - if you use the same URL everywhere then sites sharing data can be sure that you are the same person.

It’s not just for login. OpenID can also be used to prove you own an identity. You may not want to use your AOL Instant Messenger identity as a login, but Dopplr can use the AOL OpenID provider to let you prove what your AIM ID is. This lets us write an AIM bot that talks to you by IM secure in the knowledge that we’re not leaking your information to an impostor.

Page 21: Coding on the Shoulders of Giants

OpenID is the obvious solution to this mess - if you use the same URL everywhere then sites sharing data can be sure that you are the same person.

It’s not just for login. OpenID can also be used to prove you own an identity. You may not want to use your AOL Instant Messenger identity as a login, but Dopplr can use the AOL OpenID provider to let you prove what your AIM ID is. This lets us write an AIM bot that talks to you by IM secure in the knowledge that we’re not leaking your information to an impostor.

Page 22: Coding on the Shoulders of Giants

“OpenId is the game changer for social networks, allowing for portability of the social graph and preferences.”

–Simon Willison

©2007 Julian Cashflickr.com/photos/juliancash/673891099/

For more about OpenID, read Simon Willison’s many talks and writings. He knows.

Page 23: Coding on the Shoulders of Giants

Once we know who you are on other sites, we’d like to help you import your social network from those sites to Dopplr.

Page 24: Coding on the Shoulders of Giants

Social Network

Once we know who you are on other sites, we’d like to help you import your social network from those sites to Dopplr.

Page 25: Coding on the Shoulders of Giants

For example, Twitter mark up their contact lists with XFN and hCard. Using the heuristic of “if you use the same username and real name on two systems, you’re probably the same person”, we can show our users a suggested list of users who might be the same on Twitter and Dopplr.

Page 26: Coding on the Shoulders of Giants

http://mofo.rubyforge.org

http://code.whytheluckystiff.net/hpricot/

We use the Mofo library to parse microformats, and Hpricot to scrape raw HTML.

Page 27: Coding on the Shoulders of Giants

class Traveller < ActiveRecord::Base matches_identitiesend

http://identity-matcher.googlecode.com/

We’re releasing the code we use to match identities across sites as a Rails plugin.

Page 28: Coding on the Shoulders of Giants

http://identity-matcher.googlecode.com/

This is an example of running the “match_twitter” call on Chris Messina’s profile.

Page 29: Coding on the Shoulders of Giants

>> Traveller.match_twitter("factoryjoe") [0].map(&:name)

http://identity-matcher.googlecode.com/

This is an example of running the “match_twitter” call on Chris Messina’s profile.

Page 30: Coding on the Shoulders of Giants

>> Traveller.match_twitter("factoryjoe") [0].map(&:name)

=> ["Alexander Ljung", "George Kelly", "Amy Raymond", "Andrew Crow", "Jonathan Greene", "Aubrey Sabala", "Matt Jones", "Blaine Cook", "Brian Oberkirch", "Buzz Andersen", "David Ulevitch", "Michael Buffington", "Eric Costello", "Kaustubh Srikanth", "Brian Del Vecchio", "Jack Dorsey", "joshua schachter", "Kevin Lawver", "Scott Beale", "Lisa McMillan", "Mary Hodder", "Dan Saffer", "Rob Hayes", "Thomas Vander Wal", "James Walker"]

http://identity-matcher.googlecode.com/

This is an example of running the “match_twitter” call on Chris Messina’s profile.

Page 31: Coding on the Shoulders of Giants

“the best way for you to manage your

network is to stop thinking about all of the little pieces and to start focusing on

the big picture”

As Gavin Bell has been telling us for a while, the tools for social network portability are reaching maturity. David Recordon (pictured) is working on open systems at Six Apart to aggregate and share social network information.

Page 32: Coding on the Shoulders of Giants

To make interesting mashups, we often need to delegate authority to 3rd-party automated services. Code running elsewhere needs to have access to users’ accounts to act on their behalf.

Page 33: Coding on the Shoulders of Giants

Delegating Authority

To make interesting mashups, we often need to delegate authority to 3rd-party automated services. Code running elsewhere needs to have access to users’ accounts to act on their behalf.

Page 34: Coding on the Shoulders of Giants

The worst way to do this (we’re guilty too) is for the 3rd-party to ask for the users login details and fake a login as them. This is not only bad for privacy but also teaches users terrible habits.

Page 35: Coding on the Shoulders of Giants

BBAuth

AuthSub

Authentication

OpenAuth

There are several standards for delegating API access to a 3rd-party but they all work slightly differently.

Page 36: Coding on the Shoulders of Giants

“An open protocol to allow secure API authentication in a simple and standard method from desktop and web applications.”

http://oauth.net

So the OAuth project is standardising a single protocol that everyone can use. This will mean one client library per language (rather than one per language per site) and an easier landscape for users to understand.

Page 37: Coding on the Shoulders of Giants

There are many ways to get a piece of screen real-estate on other sites.

Page 38: Coding on the Shoulders of Giants

Widgets & Plugins

There are many ways to get a piece of screen real-estate on other sites.

Page 39: Coding on the Shoulders of Giants

Dopplr has a Facebook app that puts a Dopplr profile box on your profile page. It doesn’t try to cram the Dopplr user experience into a small box; it just displays a useful summary of your travel information.

Page 40: Coding on the Shoulders of Giants

It also publishes cute little items in your mini-feed.

Page 41: Coding on the Shoulders of Giants

The Facebook F8 platform is actually very nice to work with. There are a few gotchas:

1. Pages served under apps.facebook.com are proxied directly to your server at request time. This makes development versions a bit of a pain as your dev server must be visible on the internet. We do this with an SSH tunnel.2. FBML is a subset of XHTML with some extra elements in the Facebook namespace. Facebook rewrite all your IDs and classes in the HTML and CSS so that you can’t accidentally change another app’s style.3. Facebook caches images, so you should test carefully if you do any dynamic image creation4. Facebook will give up if you take more than about 7 seconds to respond, so make sure your app is snappy even when you’re under load or it will look like your app is down.

Page 42: Coding on the Shoulders of Giants

proxies directly to your server

The Facebook F8 platform is actually very nice to work with. There are a few gotchas:

1. Pages served under apps.facebook.com are proxied directly to your server at request time. This makes development versions a bit of a pain as your dev server must be visible on the internet. We do this with an SSH tunnel.2. FBML is a subset of XHTML with some extra elements in the Facebook namespace. Facebook rewrite all your IDs and classes in the HTML and CSS so that you can’t accidentally change another app’s style.3. Facebook caches images, so you should test carefully if you do any dynamic image creation4. Facebook will give up if you take more than about 7 seconds to respond, so make sure your app is snappy even when you’re under load or it will look like your app is down.

Page 43: Coding on the Shoulders of Giants

proxies directly to your server

rewrites your HTML, CSS and JS

The Facebook F8 platform is actually very nice to work with. There are a few gotchas:

1. Pages served under apps.facebook.com are proxied directly to your server at request time. This makes development versions a bit of a pain as your dev server must be visible on the internet. We do this with an SSH tunnel.2. FBML is a subset of XHTML with some extra elements in the Facebook namespace. Facebook rewrite all your IDs and classes in the HTML and CSS so that you can’t accidentally change another app’s style.3. Facebook caches images, so you should test carefully if you do any dynamic image creation4. Facebook will give up if you take more than about 7 seconds to respond, so make sure your app is snappy even when you’re under load or it will look like your app is down.

Page 44: Coding on the Shoulders of Giants

proxies directly to your server

rewrites your HTML, CSS and JS

caches what it can

The Facebook F8 platform is actually very nice to work with. There are a few gotchas:

1. Pages served under apps.facebook.com are proxied directly to your server at request time. This makes development versions a bit of a pain as your dev server must be visible on the internet. We do this with an SSH tunnel.2. FBML is a subset of XHTML with some extra elements in the Facebook namespace. Facebook rewrite all your IDs and classes in the HTML and CSS so that you can’t accidentally change another app’s style.3. Facebook caches images, so you should test carefully if you do any dynamic image creation4. Facebook will give up if you take more than about 7 seconds to respond, so make sure your app is snappy even when you’re under load or it will look like your app is down.

Page 45: Coding on the Shoulders of Giants

proxies directly to your server

rewrites your HTML, CSS and JS

needs you to respond quickly

caches what it can

The Facebook F8 platform is actually very nice to work with. There are a few gotchas:

1. Pages served under apps.facebook.com are proxied directly to your server at request time. This makes development versions a bit of a pain as your dev server must be visible on the internet. We do this with an SSH tunnel.2. FBML is a subset of XHTML with some extra elements in the Facebook namespace. Facebook rewrite all your IDs and classes in the HTML and CSS so that you can’t accidentally change another app’s style.3. Facebook caches images, so you should test carefully if you do any dynamic image creation4. Facebook will give up if you take more than about 7 seconds to respond, so make sure your app is snappy even when you’re under load or it will look like your app is down.

Page 46: Coding on the Shoulders of Giants

http://rfacebook.rubyforge.org

We use the RFacebook library to abstract a lot of the low-level details away. It helps.

Page 47: Coding on the Shoulders of Giants

We also have a blog badge that follows the same style as the Facebook profilebox.

Page 48: Coding on the Shoulders of Giants
Page 49: Coding on the Shoulders of Giants
Page 50: Coding on the Shoulders of Giants

<div id="dopplr-blog-badge"> <script src="dopplr.com/blogbadge/..."> </script></div>

The user only has to paste a tiny piece of code into their template to enable it. It looks for its div and insert HTML and CSS there.

Page 51: Coding on the Shoulders of Giants

“Javascript is the extra layer above the mark-up ‘what is this text’ and the CSS ‘how should it be displayed’. It adds a new dimension, ‘how should this element behave.’”

–Christian Heilmann

This follows the principle of unobstrusive Javascript.

Page 52: Coding on the Shoulders of Giants

(function(i) {u = navigator.userAgent; e = /*@cc_on!@*/false; st = setTimeout;

if(/webkit/i.test(u)){st(function(){dr = document.readyState;if(dr=="loaded"||

dr=="complete"){i();}else{st(arguments.callee,10);}},10);}else if((/mozilla/i.

test(u)&&!/(compati)/.test(u))||(/opera/i.test(u))){document.addEventListener

("DOMContentLoaded",i,false);} else if(e){(function(){t=document.createElement

('doc:ready');try{t.doScroll('left');i();t= null;}catch(e){st(arguments.callee,

0);}})();}else{window.onload = i;}})(function() {

// make the badge

});

http://www.kryogenix.org/days/2007/09/26/shortloaded

We also avoid the need for pulling in a full Javascript library such as jQuery just to get a proper ‘page is loaded’ event, using this code.

Page 53: Coding on the Shoulders of Giants

Even application hosting is starting to become an on-demand commodity.

Page 54: Coding on the Shoulders of Giants

Utility Computing

Even application hosting is starting to become an on-demand commodity.

Page 55: Coding on the Shoulders of Giants

We’re currently experimenting with using Amazon S3 for MySQL backups, and EC2 to run a complete copy of the Dopplr application and a MySQL slave replicated over an SSH tunnel from live. This is looking like a good way to scale, and it’s a great way to run stats reports and live backups without disturbing our main servers.

Page 56: Coding on the Shoulders of Giants

S3 Data Storage

We’re currently experimenting with using Amazon S3 for MySQL backups, and EC2 to run a complete copy of the Dopplr application and a MySQL slave replicated over an SSH tunnel from live. This is looking like a good way to scale, and it’s a great way to run stats reports and live backups without disturbing our main servers.

Page 57: Coding on the Shoulders of Giants

S3 Data Storage

Pre-built EC2 Rails

We’re currently experimenting with using Amazon S3 for MySQL backups, and EC2 to run a complete copy of the Dopplr application and a MySQL slave replicated over an SSH tunnel from live. This is looking like a good way to scale, and it’s a great way to run stats reports and live backups without disturbing our main servers.

Page 58: Coding on the Shoulders of Giants

S3 Data Storage

MySQL Slave

Pre-built EC2 Rails

We’re currently experimenting with using Amazon S3 for MySQL backups, and EC2 to run a complete copy of the Dopplr application and a MySQL slave replicated over an SSH tunnel from live. This is looking like a good way to scale, and it’s a great way to run stats reports and live backups without disturbing our main servers.

Page 59: Coding on the Shoulders of Giants
Page 60: Coding on the Shoulders of Giants

Sharing Data

User Identity

Social Network

Delegating Authority

Widgets & Plugins

Utility Computing

Page 61: Coding on the Shoulders of Giants

DOPPLRDOPPLR

DOPPLR

Where next?Where next?

Where next?

Thank you

Matt Biddulph