Your SlideShare is downloading. ×
Ajax For Scalability
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ajax For Scalability

1,082
views

Published on

My talk from PHP Barcelona 2009. I discuss how Tuenti's AJAX architecture helps us scale and deliver a better user experience.

My talk from PHP Barcelona 2009. I discuss how Tuenti's AJAX architecture helps us scale and deliver a better user experience.

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,082
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • JavaScript and XML are just technologies; “Asynchronous” is what’s important – the shift in thinking from web browsing as serial page by page to more fluid navigation that’s wholly contained within the same HTML page. I’m not going to go much into implementation, etc – it’s a lot of detail, and talking about cross-browser compatibility isn’t so fun or interesting. Focus on approaches – what we’ve learned from scaling on the server side can be applied to client side.
  • Using AJAX in application design, allows 1-6 to collapse a bit
  • Using AJAX in application design, allows 1-6 to collapse a bit
  • ComScore numbers show that we have more traffic than all Google properties combined. ComScore estimates 1 in 6 web pages viewed in Spain is from Tuenti. ComScore numbers are lower than our internal measurements.
  • Consider breaking into slides that illustrate this process
  • Not just well structure
  • Not just well structure
  • Not just well structure
  • Not just well structure
  • Not just well structure
  • Not just well structure
  • Not just well structure
  • Competitive market – only 2 (Akamai and Limelight) are financially very healthy – and Limelight is losing money if you consider investments
  • Transcript

    • 1. AJAX for ScalabilityErik SchultinkPHP Barcelona – 30 Oct, 2009
    • 2. AJAX
      What is AJAX?
      “Asynchronous JavaScript and XML”
      Paradigm for client-server interaction
      Change state on client, without loading a complete HTML page
    • 3. Traditional HTML Browsing
      User clicks link
      Browser sends request
      Server receives, parses request, generates response
      Browser receives response and begins rendering
      Dependent objects (images, js, css) load and render
      Page appears
    • 4. AJAX Browsing
      User clicks link
      Browser sends request
      Server receives, parses request, generates response
      Browser receives response and begins rendering
      Dependent objects (images, js, css) load and render
      Page appears
    • 5. Why Asynchronous?
      Not always necessary to wait for server response
      Most of response is predictable
    • 6. Scalability?
      Through-put, not speed
      Ideally, capacity is linear function of machines
      In practice, linear below some boundary
    • 7. What is Tuenti.com?
    • 8. Tuenti.com
      Started 2007
      More than 20 billion pageviews/month
      More than 20k/second at peak
      Based in Madrid
      ~80 employees, 40 engineers
    • 9. How does Tuenti use AJAX?
      Only pageloads are login and home page
      Loader pulls in all JS/CSS
      Afterwards stay within one HTML page, rotating canvas area content
    • 10. How does Tuenti use AJAX?
      PHOTO UPLOAD
    • 11. How does Tuenti use AJAX?
      CHAT
    • 12. How does Tuenti use AJAX?
      CHAT
    • 13. How does Tuenti use AJAX?
    • 14. How does Tuenti use AJAX?
    • 15. Traditional Systems Architecture
      www.tuenti.com
      Load Balancer
      Web server farm
      Web server farm
      Web server farm
    • 16. Traditional Systems Architecture
      www.tuenti.com
      12.45.34.179
      12.45.34.178
      Load Balancer
      Load Balancer
      Web server farm
      Web server farm
      Web server farm
      Web server farm
    • 17. Client-side Routing
      www.tuenti.com
      wwwb3.tuenti.com
      wwwb2.tuenti.com
      wwwb1.tuenti.com
      wwwb4.tuenti.com
      Load Balancer
      Load Balancer
      Load Balancer
      Load Balancer
      Web server farm
      Web server farm
      Web server farm
      Web server farm
      Linearly scalable …
    • 18. Client-side Routing
      www.tuenti.com
      wwwb3.tuenti.com
      wwwb2.tuenti.com
      wwwb1.tuenti.com
      wwwb4.tuenti.com
      Load Balancer
      Load Balancer
      Load Balancer
      Load Balancer
      Web server farm
      Web server farm
      Web server farm
      Web server farm
      Linearly scalable … except for top level
    • 19. Client-side Routing
      www.tuenti.com
      wwwb3.tuenti.com
      wwwb2.tuenti.com
      wwwb1.tuenti.com
      wwwb4.tuenti.com
      Load Balancer
      Load Balancer
      Load Balancer
      Load Balancer
      Web server farm
      Web server farm
      Web server farm
      Web server farm
      lots of content creation
      = lots of dynamic data
    • 20. Client-side Routing
      www.tuenti.com
      wwwb3.tuenti.com
      wwwb2.tuenti.com
      wwwb1.tuenti.com
      wwwb4.tuenti.com
      Load Balancer
      Load Balancer
      Load Balancer
      Load Balancer
      Web server farm
      Web server farm
      Web server farm
      Web server farm
      Cache Farm
      lots of dynamic data
      = lots of cache
      = internal network traffic
    • 21. Client-side Routing
      www.tuenti.com
      wwwb3.tuenti.com
      wwwb2.tuenti.com
      wwwb1.tuenti.com
      wwwb4.tuenti.com
      Load Balancer
      Load Balancer
      Load Balancer
      Load Balancer
      Web server farm
      Web server farm
      Web server farm
      Web server farm
      Cache Farm
      Cache Farm
      Cache Farm
      Cache Farm
      Partition cache
      Route requests to a farm near cache needed to respond
    • 22. Internal network savings
    • 23. Balancing Load
      Top-level requests to www.tuenti.com
      Each request tells client which farm it should be using, based on a mapping
      Mapping can be changed to balance load, perform maintenance, etc
    • 24. Robust Browsing
      Don’t tightly couple layers
      Client and server are separate layers
    • 25. Robust Browsing
      Client-side code should be robust against server-side failures
      What can go wrong?
      Client loses connectivity
      Server-side error
      Web server overloaded
      Entire server farm overloaded
      Server farm loses connectivity
    • 26. Robust Browsing
      Options:
      Retry (carefully)
      Switch to alternate farm (carefully)
      Detect error, give user feedback
    • 27. Caching
      Think like server-side scalability
      Cache data that is likely to be requested in the future
      Doesn’t have consistency issues
      Doesn’t change
    • 28. Cache Data in Client Browser
      More responsive for user
      Fewer requests to your servers
    • 29. Some details
      Lots of dependencies to load initially
      Loading can be brittle and slow
      Browser performance
    • 30. Some details
      Beware of external libraries
      Google JS lib are not static, not indefinitely cacheable
    • 31. Some details
      Friends do have consistency issues
      Add/remove friends
      Change avatar (rare)
    • 32. Image Serving
      Tuenti serves ~2.5 billion images/day
      At peak, this is >6 Gbps and >70k hits/sec
      We use CDNs
    • 33. What is a CDN?
      Content Delivery Network
    • 34. What is a CDN?
      Examples: Akamai, Limelight
      also dozens more, including Amazon
      Big distributed, object cache
      Pay per use
      either per request, per TB transfer, or per peak Mbps
    • 35. What is a CDN?
      Advantages:
      Outsource dev and infrastructure
      Geographically distributed
      Economies of scale
      Disadvantages:
      High cost
      Less control and transparency
      Commitments
    • 36. What affects image load time?
      Client internet connection
      Response time of CDN
      CDN cache hit rate
      Response time of Origin
    • 37. What affects image load time?
      Client internet connection
      Response time of CDN
      CDN cache hit rate
      Response time of Origin
    • 38.
    • 39. Monitor Performance from Client
      Closer to performance experienced by end-user
      Only way to get view of network issues faced by users (ie last mile)
    • 40.
    • 41. Good Monitoring
      Percentiles > averages
      Less noise, more stable
      Comparable to SLA terms
      Establish baselines
      performance relative to past more important than absolute
      Avoid false positives
    • 42. How to fix slow ISP?
      Choose better transit provider
      Set-up peering (or get CDN too)
      Traffic management
    • 43. What affects image load time?
      Client internet connection
      Response time of CDN
      CDN cache hit rate
      Response time of Origin
    • 44.
    • 45.
    • 46. Quality of End-User Experience
      vs.
      Cost
    • 47. We use multiple CDNs, and shift content based on price/performance.
    • 48. Know your content
    • 49. Know your content
    • 50. Know your content
    • 51. Know your content
      30
      75
      200
    • 52. Know your content
      600
    • 53. Know your content
      120
    • 54. Know your content
    • 55. Pre-fetch Content
      Exploit predictable user behavior
      Ex: clicking to next photo in an album
      Simple solution – load next image hidden
      Client browser will cache it (next response < 100 ms)
      Increase tolerance for slow response time
    • 56. Pre-fetch Content
      More complex solution
      Pre-fetch next canvas (full html), render in background – rotate in on Next
      Even more complex
      Instantiate HTML template w/ data on client
      Pre-fetch data X photos in advance, render Y templates in advance with this data
    • 57. Pre-fetch Content
      Problems:
      Rendering still takes time
      Increases browser load
      Need to set cache headers correctly
    • 58. Image delivery
      Small images: High request, low volume
      Most cost-effective to cache in memory
      Large images: High volume, low requests, greater tolerance for latency
    • 59. What affects image load time?
      Client internet connection
      Response time of CDN
      CDN cache hit rate
      Response time of Origin
    • 60. Monitor Performance from Client
      cold servers online
    • 61. What affects image load time?
      Client internet connection
      Response time of CDN
      CDN cache hit rate
      Response time of Origin
    • 62. Deploy cache layers (squid, varnish)
      Optimize web servers for static content delivery
      More machines
      Avoid RAID, file system
      Improve Origin Response
    • 63. Summary
      Cache and pre-fetch content
      Client-side routing
      Client-side monitoring
    • 64. General caveats
      Be careful with browser performance
      Look carefully at what’s in the worst 5%
      Don’t assume that high values are incorrect
    • 65. More
      jobs.tuenti.com
      Presentation
      Saturday 14:20
      Challenge (win a PS3)
      Talk: Continuous Integration
      DavideMendolia, Saturday 12:00
    • 66. More? Ask us!
    • 67. More? Ask us!
    • 68. Q & A