Flickr A Case Study in Rich Internet Application Development Cal Henderson

Hi Cal Henderson Flickr Architect Yahoo! Inc

Cal Henderson

Flickr Architect

Yahoo! Inc

flickr.com Over 2 million users Over 93 million photos 368 TB of hard disk space (376,832 GB)

Over 2 million users

Over 93 million photos

368 TB of hard disk space

(376,832 GB)

A flickr history Flickr started out as a Massively Multiplayer Online Game called “Game Never Ending” On February 10 th , 2004, Flickr was launched at the Emerging Technology Conference

Flickr started out as a Massively Multiplayer Online Game called “Game Never Ending”

On February 10 th , 2004, Flickr was launched at the Emerging Technology Conference

A flickr history Our two year birthday is next week – come to our party! Saturday 11 th February http://upcoming.org/event/51807 There will be cake

Our two year birthday is next week – come to our party!

Saturday 11 th February

http://upcoming.org/event/51807

There will be cake

Vancouver, BC (not in America)

A flickr feature tour Photos! On web pages!

Photos!

On web pages!

A flickr feature tour How does it differ from other photo management services? Social network based Collaborative metadata Community aggregation

How does it differ from other photo management services?

Social network based

Collaborative metadata

Community aggregation

Flickr architecture Flickr is powered by a bunch of hardware in Texas and Virginia A few hundred boxes It can be broken down into 3 chunks: Web serving Photo storage / serving Databases

Flickr is powered by a bunch of hardware in Texas and Virginia

A few hundred boxes

It can be broken down into 3 chunks:

Web serving

Photo storage / serving

Databases

Hardware architecture Storage Servers Database Servers Web Servers Interweb

Software architecture Application Logic Page Logic Templates API Client / Browser AJAX

AJAX What’s that all about? Asynchronous Javascript and XML Jesse James Garret, AP, Feb 2005 Previously called “remoting” Google maps, Gmail, Flickr et al

What’s that all about?

Asynchronous Javascript and XML

Jesse James Garret, AP, Feb 2005

Previously called “remoting”

Google maps, Gmail, Flickr et al

AJAX History Started out as loading scripts into <iframe> ‘s or writing <script> tags into the document Microsoft created XmlHttpRequest (1998) Everyone else followed suit JSON appeared in 2005 Javascript object notation

Started out as loading scripts into <iframe> ‘s or writing <script> tags into the document

Microsoft created XmlHttpRequest (1998)

Everyone else followed suit

JSON appeared in 2005

Javascript object notation

The roundtrip User initiates action Browser makes background request Server does it’s thing Server responds Javascript in browser executes to handle response Response is displayed somehow to user

User initiates action

Browser makes background request

Server does it’s thing

Server responds

Javascript in browser executes to handle response

Response is displayed somehow to user

The roundtrip User initiates action Browser makes background request Server does it’s thing Server responds Javascript in browser executes to handle response Response is displayed somehow to user

User initiates action

Browser makes background request

Server does it’s thing

Server responds

Javascript in browser executes to handle response

Response is displayed somehow to user

Browser compatibility Sounds too easy? Luckily all the browsers implement XmlHttpRequest slightly differently We can avoid the grief by wrapping the different implementations in a simple library For all browsers we just make a request and receive a response, hiding the ugliness

Sounds too easy?

Luckily all the browsers implement XmlHttpRequest slightly differently

We can avoid the grief by wrapping the different implementations in a simple library

For all browsers we just make a request and receive a response, hiding the ugliness

AJAX Abstraction In fact, we care even less about the implementation when trying to get things done We can abstract away the entire request/response cycle, hiding the protocol We just receive a Javascript object – we don’t care if it came back as XML-RPC, REST or JSON

In fact, we care even less about the implementation when trying to get things done

We can abstract away the entire request/response cycle, hiding the protocol

We just receive a Javascript object – we don’t care if it came back as XML-RPC, REST or JSON

Debugging AJAX Apps AJAX applications are harder to debug than static web pages The client or server could be at fault You can’t see what’s happening We need special tools to: See what gets sent over the wire See what our code is doing

AJAX applications are harder to debug than static web pages

The client or server could be at fault

You can’t see what’s happening

We need special tools to:

See what gets sent over the wire

See what our code is doing

Debugging AJAX Apps The simplest way to see what’s going on is to echo things out to the browser That’s what alert() was built for, right?

The simplest way to see what’s going on is to echo things out to the browser

That’s what alert() was built for, right?

Avoiding alert() alert() isn’t always the best solution If we want to dump a lot of data, creating a “debugging window” within the application makes our lives easier.

alert() isn’t always the best solution

If we want to dump a lot of data, creating a “debugging window” within the application makes our lives easier.

Sniffing the wire With AJAX applications, we care about the data going over the wire If we can see the HTTP traffic, we can make sure we’re sending the right requests and that the server is acting as we expect

With AJAX applications, we care about the data going over the wire

If we can see the HTTP traffic, we can make sure we’re sending the right requests and that the server is acting as we expect

Ethereal Ethereal lets us grab and analyze all network traffic http://www.ethereal.com/ Windows, Linux, Mac (via fink)

Ethereal lets us grab and analyze all network traffic

http://www.ethereal.com/

Windows, Linux, Mac (via fink)

Sniffing the wire This is great to see what’s going on, but it’s a read-only tool It would be really nice if we could edit requests and responses on the fly to help us test different scenarios

This is great to see what’s going on, but it’s a read-only tool

It would be really nice if we could edit requests and responses on the fly to help us test different scenarios

Fiddler Fiddler from Microsoft http://www.fiddlertool.com/ Free Windows only Works best with IE, but also works with FF

Fiddler from Microsoft

http://www.fiddlertool.com/

Free

Windows only

Works best with IE, but also works with FF

Debuggers Beyond looking at the traffic, we need to be able to see what’s going on in our guts In the old days, we had to be content with alert() statements and patience In these enlightened days we have debuggers ;)

Beyond looking at the traffic, we need to be able to see what’s going on in our guts

In the old days, we had to be content with alert() statements and patience

In these enlightened days we have debuggers ;)

Visual Studio Microsoft have a free version of Visual Studio (Visual Studio Express) which contains their IE debugger http://msdn.microsoft.com/vstudio/express/ Full debugger environment Watch lists Breakpoints Stack tracing

Microsoft have a free version of Visual Studio (Visual Studio Express) which contains their IE debugger

http://msdn.microsoft.com/vstudio/express/

Full debugger environment

Watch lists

Breakpoints

Stack tracing

Venkman For those of you with a Firefox preference, Venkman provides the same features http://www.mozilla.org/projects/venkman/ Free Open source Quite ugly

For those of you with a Firefox preference, Venkman provides the same features

http://www.mozilla.org/projects/venkman/

Free

Open source

Quite ugly

Dynamic pages Now that we routinely manipulate the DOM, we don’t always know what state the “source” of the page is in New tools help us introspect the DOM on the fly

Now that we routinely manipulate the DOM, we don’t always know what state the “source” of the page is in

New tools help us introspect the DOM on the fly

Firefox Choose ‘custom’ install when installing Firefox Adds a “DOM Inspector” option to the tools menu

Choose ‘custom’ install when installing Firefox

Adds a “DOM Inspector” option to the tools menu

IE Dom Tools IE Instant Source Viewer http://www.blazingtools.com/is.html IE Dom Inspector http://www.ieinspector.com/dominspector/ IE Developer Toolbar & Dom Explorer http://www.microsoft.com/downloads/ details.aspx?FamilyID =e59c3964-672d-4511-bb3e-2d5e1db91038

IE Instant Source Viewer

http://www.blazingtools.com/is.html

IE Dom Inspector

http://www.ieinspector.com/dominspector/

IE Developer Toolbar & Dom Explorer

http://www.microsoft.com/downloads/ details.aspx?FamilyID =e59c3964-672d-4511-bb3e-2d5e1db91038

AJAX in the wild We can build whole applications in AJAX, but there are drawbacks Having URLs for resources are important Smushing everything into a single interface gets ugly quickly

We can build whole applications in AJAX, but there are drawbacks

Having URLs for resources are important

Smushing everything into a single interface gets ugly quickly

AJAX in the wild We can use AJAX to allow click-to-edit functionality, avoiding two page roundtrips For discrete pieces of functionality, we can create small AJAX applications Organizer

We can use AJAX to allow click-to-edit functionality, avoiding two page roundtrips

For discrete pieces of functionality, we can create small AJAX applications

Organizer

Web 2.0? Web 2.0 is the talk of the town Web 2.0 isn’t all about AJAX What can we learn from Web 2.0?

Web 2.0 is the talk of the town

Web 2.0 isn’t all about AJAX

What can we learn from Web 2.0?

Five ways to love web 2.0 Collaboration Embrace collaborative metadata Don’t ghettoize your users

Collaboration

Embrace collaborative metadata

Don’t ghettoize your users

Five ways to love web 2.0 Aggregation Use the data you have Create new avenues of exploration Present new views on old information

Aggregation

Use the data you have

Create new avenues of exploration

Present new views on old information

Five ways to love web 2.0 Open APIs Help 3 rd party developers to help you Eat your own dog food for AJAX

Open APIs

Help 3 rd party developers to help you

Eat your own dog food for AJAX

Five ways to love web 2.0 Unicode Aim for I18n/L10n from the outset Don’t forget the rest of the world

Unicode

Aim for I18n/L10n from the outset

Don’t forget the rest of the world

Five ways to love web 2.0 Open content Creative commons Allow your content to live beyond your application Turn your application into a resource

Open content

Creative commons

Allow your content to live beyond your application

Turn your application into a resource

Questions?

Thank you These slides are available from the conference website and at http://iamcal.com/talks/