Flickr

1
Flickr

• A Case Study in Rich Internet Application
  Development
  
• Cal Henderson

2
Hi

• Cal Henderson
• Flickr Architect
• Yahoo! Inc

3
(No Transcript)
4
flickr.com

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

5
A flickr history

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

6
A flickr history

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

7
Vancouver, BC (not in America)
8
A flickr feature tour

• Photos!
• On web pages!

9
(No Transcript)
10
A flickr feature tour

• How does it differ from other photo management
  services?
  
• Social network based
• Collaborative metadata
• Community aggregation

11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
15
(No Transcript)
16
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
Hardware architecture
18
Software architecture
19
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
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
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
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
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
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
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
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

28
(No Transcript)
29
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
(No Transcript)
31
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
Ethereal

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

33
(No Transcript)
34
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
Fiddler

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

36
(No Transcript)
37
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
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

39
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

40
(No Transcript)
41
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
Firefox

• Choose custom install when installing Firefox
• Adds a DOM Inspector option to the tools menu

43
(No Transcript)
44
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?Fa
  milyIDe59c3964-672d-4511-bb3e-2d5e1db91038

45
(No Transcript)
46
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
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
(No Transcript)
49
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
Five ways to love web 2.0

• Collaboration
• Embrace collaborative metadata
• Dont ghettoize your users

51
(No Transcript)
52
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
(No Transcript)
54
Five ways to love web 2.0

• Open APIs
• Help 3rd party developers to help you
• Eat your own dog food for AJAX

55
(No Transcript)
56
Five ways to love web 2.0

• Unicode
• Aim for I18n/L10n from the outset
• Dont forget the rest of the world

57
(No Transcript)
58
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
(No Transcript)
60
Questions?
61
Thank you

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