Flickr A Case Study in Rich Internet Application Development Cal Henderson
Hi <ul><li>Cal Henderson </li></ul><ul><li>Flickr Architect </li></ul><ul><li>Yahoo! Inc </li></ul>
 
flickr.com <ul><li>Over 2 million users </li></ul><ul><li>Over 93 million photos </li></ul><ul><li>368 TB of hard disk spa...
A flickr history <ul><li>Flickr started out as a Massively Multiplayer Online Game called “Game Never Ending” </li></ul><u...
A flickr history <ul><li>Our two year birthday is next week – come to our party! </li></ul><ul><li>Saturday 11 th  Februar...
Vancouver, BC (not in America)
A flickr feature tour <ul><li>Photos! </li></ul><ul><li>On web pages! </li></ul>
 
A flickr feature tour <ul><li>How does it differ from other photo management services? </li></ul><ul><li>Social network ba...
 
 
 
 
 
Flickr architecture <ul><li>Flickr is powered by a bunch of hardware in Texas and Virginia </li></ul><ul><ul><li>A few hun...
Hardware architecture Storage Servers Database Servers Web Servers Interweb
Software architecture Application Logic Page Logic Templates API Client / Browser AJAX
AJAX <ul><li>What’s that all about? </li></ul><ul><li>Asynchronous Javascript and XML </li></ul><ul><ul><li>Jesse James Ga...
AJAX History <ul><li>Started out as loading scripts into  <iframe> ‘s or writing  <script>  tags into the document </li></...
The roundtrip <ul><li>User initiates action </li></ul><ul><li>Browser makes background request </li></ul><ul><li>Server do...
The roundtrip <ul><li>User initiates action </li></ul><ul><li>Browser makes background request </li></ul><ul><li>Server do...
Browser compatibility <ul><li>Sounds too easy? </li></ul><ul><li>Luckily all the browsers implement XmlHttpRequest slightl...
AJAX Abstraction <ul><li>In fact, we care even less about the implementation when trying to get things done </li></ul><ul>...
Debugging AJAX Apps <ul><li>AJAX applications are harder to debug than static web pages </li></ul><ul><ul><li>The client o...
Debugging AJAX Apps <ul><li>The simplest way to see what’s going on is to echo things out to the browser </li></ul><ul><li...
 
 
Avoiding  alert() <ul><li>alert()  isn’t always the best solution </li></ul><ul><li>If we want to dump a lot of data, crea...
 
Sniffing the wire <ul><li>With AJAX applications, we care about the data going over the wire </li></ul><ul><li>If we can s...
Ethereal <ul><li>Ethereal lets us grab and analyze all network traffic </li></ul><ul><ul><li>http://www.ethereal.com/ </li...
 
Sniffing the wire <ul><li>This is great to see what’s going on, but it’s a read-only tool </li></ul><ul><li>It would be re...
Fiddler <ul><li>Fiddler from Microsoft </li></ul><ul><ul><li>http://www.fiddlertool.com/ </li></ul></ul><ul><ul><li>Free <...
 
Debuggers <ul><li>Beyond looking at the traffic, we need to be able to see what’s going on in our guts </li></ul><ul><li>I...
Visual Studio <ul><li>Microsoft have a free version of Visual Studio (Visual Studio Express) which contains their IE debug...
Venkman <ul><li>For those of you with a Firefox preference, Venkman provides the same features </li></ul><ul><ul><li>http:...
 
Dynamic pages <ul><li>Now that we routinely manipulate the DOM, we don’t always know what state the “source” of the page i...
Firefox  <ul><li>Choose ‘custom’ install when installing Firefox </li></ul><ul><li>Adds a “DOM Inspector” option to the to...
 
IE Dom Tools <ul><li>IE Instant Source Viewer </li></ul><ul><ul><li>http://www.blazingtools.com/is.html </li></ul></ul><ul...
 
AJAX in the wild <ul><li>We can build whole applications in AJAX, but there are drawbacks </li></ul><ul><li>Having URLs fo...
AJAX in the wild <ul><li>We can use AJAX to allow click-to-edit functionality, avoiding two page roundtrips </li></ul><ul>...
 
Web 2.0? <ul><li>Web 2.0 is the talk of the town </li></ul><ul><li>Web 2.0 isn’t all about AJAX </li></ul><ul><li>What can...
Five ways to love web 2.0 <ul><li>Collaboration </li></ul><ul><ul><li>Embrace collaborative metadata </li></ul></ul><ul><u...
 
Five ways to love web 2.0 <ul><li>Aggregation </li></ul><ul><ul><li>Use the data you have </li></ul></ul><ul><ul><li>Creat...
 
Five ways to love web 2.0 <ul><li>Open APIs </li></ul><ul><ul><li>Help 3 rd  party developers to help you </li></ul></ul><...
 
Five ways to love web 2.0 <ul><li>Unicode </li></ul><ul><ul><li>Aim for I18n/L10n from the outset </li></ul></ul><ul><ul><...
 
Five ways to love web 2.0 <ul><li>Open content </li></ul><ul><ul><li>Creative commons </li></ul></ul><ul><ul><li>Allow you...
 
Questions?
Thank you These slides are available from the conference website and at http://iamcal.com/talks/
Upcoming SlideShare
Loading in …5
×

Web Design World Flickr

10,541 views
9,614 views

Published on

http://www.iamcal.com/talks/

Published in: Technology, Business
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,541
On SlideShare
0
From Embeds
0
Number of Embeds
247
Actions
Shares
0
Downloads
205
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Web Design World Flickr

  1. Flickr A Case Study in Rich Internet Application Development Cal Henderson
  2. Hi <ul><li>Cal Henderson </li></ul><ul><li>Flickr Architect </li></ul><ul><li>Yahoo! Inc </li></ul>
  3.  
  4. flickr.com <ul><li>Over 2 million users </li></ul><ul><li>Over 93 million photos </li></ul><ul><li>368 TB of hard disk space </li></ul><ul><ul><li>(376,832 GB) </li></ul></ul>
  5. A flickr history <ul><li>Flickr started out as a Massively Multiplayer Online Game called “Game Never Ending” </li></ul><ul><li>On February 10 th , 2004, Flickr was launched at the Emerging Technology Conference </li></ul>
  6. A flickr history <ul><li>Our two year birthday is next week – come to our party! </li></ul><ul><li>Saturday 11 th February </li></ul><ul><li>http://upcoming.org/event/51807 </li></ul><ul><li>There will be cake </li></ul>
  7. Vancouver, BC (not in America)
  8. A flickr feature tour <ul><li>Photos! </li></ul><ul><li>On web pages! </li></ul>
  9.  
  10. A flickr feature tour <ul><li>How does it differ from other photo management services? </li></ul><ul><li>Social network based </li></ul><ul><li>Collaborative metadata </li></ul><ul><li>Community aggregation </li></ul>
  11.  
  12.  
  13.  
  14.  
  15.  
  16. Flickr architecture <ul><li>Flickr is powered by a bunch of hardware in Texas and Virginia </li></ul><ul><ul><li>A few hundred boxes </li></ul></ul><ul><li>It can be broken down into 3 chunks: </li></ul><ul><ul><li>Web serving </li></ul></ul><ul><ul><li>Photo storage / serving </li></ul></ul><ul><ul><li>Databases </li></ul></ul>
  17. Hardware architecture Storage Servers Database Servers Web Servers Interweb
  18. Software architecture Application Logic Page Logic Templates API Client / Browser AJAX
  19. AJAX <ul><li>What’s that all about? </li></ul><ul><li>Asynchronous Javascript and XML </li></ul><ul><ul><li>Jesse James Garret, AP, Feb 2005 </li></ul></ul><ul><li>Previously called “remoting” </li></ul><ul><ul><li>Google maps, Gmail, Flickr et al </li></ul></ul>
  20. AJAX History <ul><li>Started out as loading scripts into <iframe> ‘s or writing <script> tags into the document </li></ul><ul><li>Microsoft created XmlHttpRequest (1998) </li></ul><ul><ul><li>Everyone else followed suit </li></ul></ul><ul><li>JSON appeared in 2005 </li></ul><ul><ul><li>Javascript object notation </li></ul></ul>
  21. The roundtrip <ul><li>User initiates action </li></ul><ul><li>Browser makes background request </li></ul><ul><li>Server does it’s thing </li></ul><ul><li>Server responds </li></ul><ul><li>Javascript in browser executes to handle response </li></ul><ul><li>Response is displayed somehow to user </li></ul>
  22. The roundtrip <ul><li>User initiates action </li></ul><ul><li>Browser makes background request </li></ul><ul><li>Server does it’s thing </li></ul><ul><li>Server responds </li></ul><ul><li>Javascript in browser executes to handle response </li></ul><ul><li>Response is displayed somehow to user </li></ul>
  23. Browser compatibility <ul><li>Sounds too easy? </li></ul><ul><li>Luckily all the browsers implement XmlHttpRequest slightly differently </li></ul><ul><li>We can avoid the grief by wrapping the different implementations in a simple library </li></ul><ul><li>For all browsers we just make a request and receive a response, hiding the ugliness </li></ul>
  24. AJAX Abstraction <ul><li>In fact, we care even less about the implementation when trying to get things done </li></ul><ul><li>We can abstract away the entire request/response cycle, hiding the protocol </li></ul><ul><li>We just receive a Javascript object – we don’t care if it came back as XML-RPC, REST or JSON </li></ul>
  25. Debugging AJAX Apps <ul><li>AJAX applications are harder to debug than static web pages </li></ul><ul><ul><li>The client or server could be at fault </li></ul></ul><ul><ul><li>You can’t see what’s happening </li></ul></ul><ul><li>We need special tools to: </li></ul><ul><ul><li>See what gets sent over the wire </li></ul></ul><ul><ul><li>See what our code is doing </li></ul></ul>
  26. Debugging AJAX Apps <ul><li>The simplest way to see what’s going on is to echo things out to the browser </li></ul><ul><li>That’s what alert() was built for, right? </li></ul>
  27.  
  28.  
  29. Avoiding alert() <ul><li>alert() isn’t always the best solution </li></ul><ul><li>If we want to dump a lot of data, creating a “debugging window” within the application makes our lives easier. </li></ul>
  30.  
  31. Sniffing the wire <ul><li>With AJAX applications, we care about the data going over the wire </li></ul><ul><li>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 </li></ul>
  32. Ethereal <ul><li>Ethereal lets us grab and analyze all network traffic </li></ul><ul><ul><li>http://www.ethereal.com/ </li></ul></ul><ul><ul><li>Windows, Linux, Mac (via fink) </li></ul></ul>
  33.  
  34. Sniffing the wire <ul><li>This is great to see what’s going on, but it’s a read-only tool </li></ul><ul><li>It would be really nice if we could edit requests and responses on the fly to help us test different scenarios </li></ul>
  35. Fiddler <ul><li>Fiddler from Microsoft </li></ul><ul><ul><li>http://www.fiddlertool.com/ </li></ul></ul><ul><ul><li>Free </li></ul></ul><ul><ul><li>Windows only </li></ul></ul><ul><ul><li>Works best with IE, but also works with FF </li></ul></ul>
  36.  
  37. Debuggers <ul><li>Beyond looking at the traffic, we need to be able to see what’s going on in our guts </li></ul><ul><li>In the old days, we had to be content with alert() statements and patience </li></ul><ul><li>In these enlightened days we have debuggers ;) </li></ul>
  38. Visual Studio <ul><li>Microsoft have a free version of Visual Studio (Visual Studio Express) which contains their IE debugger </li></ul><ul><ul><li>http://msdn.microsoft.com/vstudio/express/ </li></ul></ul><ul><li>Full debugger environment </li></ul><ul><ul><li>Watch lists </li></ul></ul><ul><ul><li>Breakpoints </li></ul></ul><ul><ul><li>Stack tracing </li></ul></ul>
  39. Venkman <ul><li>For those of you with a Firefox preference, Venkman provides the same features </li></ul><ul><ul><li>http://www.mozilla.org/projects/venkman/ </li></ul></ul><ul><ul><li>Free </li></ul></ul><ul><ul><li>Open source </li></ul></ul><ul><ul><li>Quite ugly </li></ul></ul>
  40.  
  41. Dynamic pages <ul><li>Now that we routinely manipulate the DOM, we don’t always know what state the “source” of the page is in </li></ul><ul><li>New tools help us introspect the DOM on the fly </li></ul>
  42. Firefox <ul><li>Choose ‘custom’ install when installing Firefox </li></ul><ul><li>Adds a “DOM Inspector” option to the tools menu </li></ul>
  43.  
  44. IE Dom Tools <ul><li>IE Instant Source Viewer </li></ul><ul><ul><li>http://www.blazingtools.com/is.html </li></ul></ul><ul><li>IE Dom Inspector </li></ul><ul><ul><li>http://www.ieinspector.com/dominspector/ </li></ul></ul><ul><li>IE Developer Toolbar & Dom Explorer </li></ul><ul><ul><li>http://www.microsoft.com/downloads/ details.aspx?FamilyID =e59c3964-672d-4511-bb3e-2d5e1db91038 </li></ul></ul>
  45.  
  46. AJAX in the wild <ul><li>We can build whole applications in AJAX, but there are drawbacks </li></ul><ul><li>Having URLs for resources are important </li></ul><ul><li>Smushing everything into a single interface gets ugly quickly </li></ul>
  47. AJAX in the wild <ul><li>We can use AJAX to allow click-to-edit functionality, avoiding two page roundtrips </li></ul><ul><li>For discrete pieces of functionality, we can create small AJAX applications </li></ul><ul><ul><li>Organizer </li></ul></ul>
  48.  
  49. Web 2.0? <ul><li>Web 2.0 is the talk of the town </li></ul><ul><li>Web 2.0 isn’t all about AJAX </li></ul><ul><li>What can we learn from Web 2.0? </li></ul>
  50. Five ways to love web 2.0 <ul><li>Collaboration </li></ul><ul><ul><li>Embrace collaborative metadata </li></ul></ul><ul><ul><li>Don’t ghettoize your users </li></ul></ul>
  51.  
  52. Five ways to love web 2.0 <ul><li>Aggregation </li></ul><ul><ul><li>Use the data you have </li></ul></ul><ul><ul><li>Create new avenues of exploration </li></ul></ul><ul><ul><li>Present new views on old information </li></ul></ul>
  53.  
  54. Five ways to love web 2.0 <ul><li>Open APIs </li></ul><ul><ul><li>Help 3 rd party developers to help you </li></ul></ul><ul><ul><li>Eat your own dog food for AJAX </li></ul></ul>
  55.  
  56. Five ways to love web 2.0 <ul><li>Unicode </li></ul><ul><ul><li>Aim for I18n/L10n from the outset </li></ul></ul><ul><ul><li>Don’t forget the rest of the world </li></ul></ul>
  57.  
  58. Five ways to love web 2.0 <ul><li>Open content </li></ul><ul><ul><li>Creative commons </li></ul></ul><ul><ul><li>Allow your content to live beyond your application </li></ul></ul><ul><ul><li>Turn your application into a resource </li></ul></ul>
  59.  
  60. Questions?
  61. Thank you These slides are available from the conference website and at http://iamcal.com/talks/

×