1. Flickr A Case Study in Rich Internet Application Development Cal Henderson

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

3. Web Design World, 30 th January 20063

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

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

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

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

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

9. Web Design World, 30 th January 20069

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

11. Web Design World, 30 th January 200611

12. Web Design World, 30 th January 200612

13. Web Design World, 30 th January 200613

14. Web Design World, 30 th January 200614

15. Web Design World, 30 th January 200615

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

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

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

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

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

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

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

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

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

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

26. Web Design World, 30 th January 200626 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?

27. Web Design World, 30 th January 200627

28. Web Design World, 30 th January 200628

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

30. Web Design World, 30 th January 200630

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

32. Web Design World, 30 th January 200632 Ethereal Ethereal lets us grab and analyze all network traffic –http://www.ethereal.com/http://www.ethereal.com/ –Windows, Linux, Mac (via fink)

33. Web Design World, 30 th January 200633

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

35. Web Design World, 30 th January 200635 Fiddler Fiddler from Microsoft –http://www.fiddlertool.com/http://www.fiddlertool.com/ –Free –Windows only –Works best with IE, but also works with FF

36. Web Design World, 30 th January 200636

37. Web Design World, 30 th January 200637 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 ;)

38. Web Design World, 30 th January 200638 Visual Studio Microsoft have a free version of Visual Studio (Visual Studio Express) which contains their IE debugger –http://msdn.microsoft.com/vstudio/express/http://msdn.microsoft.com/vstudio/express/ Full debugger environment –Watch lists –Breakpoints –Stack tracing

39. Web Design World, 30 th January 200639 Venkman For those of you with a Firefox preference, Venkman provides the same features –http://www.mozilla.org/projects/venkman/http://www.mozilla.org/projects/venkman/ –Free –Open source –Quite ugly

40. Web Design World, 30 th January 200640

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

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

43. Web Design World, 30 th January 200643

44. Web Design World, 30 th January 200644 IE Dom Tools IE Instant Source Viewer –http://www.blazingtools.com/is.htmlhttp://www.blazingtools.com/is.html IE Dom Inspector –http://www.ieinspector.com/dominspector/http://www.ieinspector.com/dominspector/ IE Developer Toolbar & Dom Explorer –http://www.microsoft.com/downloads/details.a spx?FamilyID=e59c3964-672d-4511-bb3e- 2d5e1db91038http://www.microsoft.com/downloads/details.a spx?FamilyID=e59c3964-672d-4511-bb3e- 2d5e1db91038

45. Web Design World, 30 th January 200645

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

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

48. Web Design World, 30 th January 200648

49. Web Design World, 30 th January 200649 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?

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

51. Web Design World, 30 th January 200651

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

53. Web Design World, 30 th January 200653

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

55. Web Design World, 30 th January 200655

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

57. Web Design World, 30 th January 200657

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

59. Web Design World, 30 th January 200659

60. Questions?

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