Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Flickr A Case Study in Rich Internet Application Development Cal Henderson."— Presentation transcript:

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

2 Web Design World, 30 th January 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 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 A flickr history Our two year birthday is next week – come to our party! Saturday 11 th February There will be cake

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

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

12 Web Design World, 30 th January

13 Web Design World, 30 th January

14 Web Design World, 30 th January

15 Web Design World, 30 th January

16 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

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

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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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?

27 Web Design World, 30 th January

28 Web Design World, 30 th January

29 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.

30 Web Design World, 30 th January

31 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

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

34 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

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

37 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 ;)

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

41 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

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

43 Web Design World, 30 th January

44 Web Design World, 30 th January 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=e59c d-4511-bb3e- 2d5e1db91038http://www.microsoft.com/downloads/details.a spx?FamilyID=e59c d-4511-bb3e- 2d5e1db91038

45 Web Design World, 30 th January

46 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

47 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

48 Web Design World, 30 th January

49 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?

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

51 Web Design World, 30 th January

52 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

53 Web Design World, 30 th January

54 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

55 Web Design World, 30 th January

56 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

57 Web Design World, 30 th January

58 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

59 Web Design World, 30 th January

60 Questions?

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


Download ppt "Flickr A Case Study in Rich Internet Application Development Cal Henderson."

Similar presentations


Ads by Google