Flickr A Case Study in Rich Internet Application Development Cal Henderson

Web Design World, 30 th January Hi Cal Henderson Flickr Architect Yahoo! Inc

Web Design World, 30 th January 20063

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

Web Design World, 30 th January 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

Web Design World, 30 th January A flickr history Our two year birthday is next week – come to our party! Saturday 11 th February There will be cake

Web Design World, 30 th January Vancouver, BC (not in America)

Web Design World, 30 th January A flickr feature tour Photos! On web pages!

Web Design World, 30 th January 20069

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

Web Design World, 30 th January

Web Design World, 30 th January

Web Design World, 30 th January

Web Design World, 30 th January

Web Design World, 30 th January

Web Design World, 30 th January 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

Web Design World, 30 th January Hardware architecture Storage Servers Database Servers Web Servers Interweb

Web Design World, 30 th January Software architecture Application Logic Page Logic Templates API Client / Browser AJAX

Web Design World, 30 th January AJAX Whats that all about? Asynchronous Javascript and XML –Jesse James Garret, AP, Feb 2005 Previously called remoting –Google maps, Gmail, Flickr et al

Web Design World, 30 th January AJAX History Started out as loading scripts into s or writing tags into the document Microsoft created XmlHttpRequest (1998) –Everyone else followed suit JSON appeared in 2005 –Javascript object notation

Web Design World, 30 th January The roundtrip User initiates action Browser makes background request Server does its thing Server responds Javascript in browser executes to handle response Response is displayed somehow to user

Web Design World, 30 th January The roundtrip User initiates action Browser makes background request Server does its thing Server responds Javascript in browser executes to handle response Response is displayed somehow to user

Web Design World, 30 th January 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

Web Design World, 30 th January 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 dont care if it came back as XML-RPC, REST or JSON

Web Design World, 30 th January Debugging AJAX Apps AJAX applications are harder to debug than static web pages –The client or server could be at fault –You cant see whats happening We need special tools to: –See what gets sent over the wire –See what our code is doing

Web Design World, 30 th January Debugging AJAX Apps The simplest way to see whats going on is to echo things out to the browser Thats what alert() was built for, right?

Web Design World, 30 th January

Web Design World, 30 th January

Web Design World, 30 th January Avoiding alert() alert() isnt always the best solution If we want to dump a lot of data, creating a debugging window within the application makes our lives easier.

Web Design World, 30 th January

Web Design World, 30 th January 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 were sending the right requests and that the server is acting as we expect

Web Design World, 30 th January Ethereal Ethereal lets us grab and analyze all network traffic – –Windows, Linux, Mac (via fink)

Web Design World, 30 th January

Web Design World, 30 th January Sniffing the wire This is great to see whats going on, but its 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

Web Design World, 30 th January Fiddler Fiddler from Microsoft – –Free –Windows only –Works best with IE, but also works with FF

Web Design World, 30 th January

Web Design World, 30 th January Debuggers Beyond looking at the traffic, we need to be able to see whats 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 ;)

Web Design World, 30 th January Visual Studio Microsoft have a free version of Visual Studio (Visual Studio Express) which contains their IE debugger – Full debugger environment –Watch lists –Breakpoints –Stack tracing

Web Design World, 30 th January Venkman For those of you with a Firefox preference, Venkman provides the same features – –Free –Open source –Quite ugly

Web Design World, 30 th January

Web Design World, 30 th January Dynamic pages Now that we routinely manipulate the DOM, we dont always know what state the source of the page is in New tools help us introspect the DOM on the fly

Web Design World, 30 th January Firefox Choose custom install when installing Firefox Adds a DOM Inspector option to the tools menu

Web Design World, 30 th January

Web Design World, 30 th January IE Dom Tools IE Instant Source Viewer – IE Dom Inspector – IE Developer Toolbar & Dom Explorer – spx?FamilyID=e59c d-4511-bb3e- 2d5e1db91038http:// spx?FamilyID=e59c d-4511-bb3e- 2d5e1db91038

Web Design World, 30 th January

Web Design World, 30 th January 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

Web Design World, 30 th January 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

Web Design World, 30 th January

Web Design World, 30 th January Web 2.0? Web 2.0 is the talk of the town Web 2.0 isnt all about AJAX What can we learn from Web 2.0?

Web Design World, 30 th January Five ways to love web 2.0 Collaboration –Embrace collaborative metadata –Dont ghettoize your users

Web Design World, 30 th January

Web Design World, 30 th January Five ways to love web 2.0 Aggregation –Use the data you have –Create new avenues of exploration –Present new views on old information

Web Design World, 30 th January

Web Design World, 30 th January Five ways to love web 2.0 Open APIs –Help 3 rd party developers to help you –Eat your own dog food for AJAX

Web Design World, 30 th January

Web Design World, 30 th January Five ways to love web 2.0 Unicode –Aim for I18n/L10n from the outset –Dont forget the rest of the world

Web Design World, 30 th January

Web Design World, 30 th January 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

Web Design World, 30 th January

Questions?

Thank you These slides are available from the conference website and at