• Save
AJAX for Scalability
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

AJAX for Scalability

on

  • 5,680 views

 

Statistics

Views

Total Views
5,680
Views on SlideShare
4,541
Embed Views
1,139

Actions

Likes
7
Downloads
0
Comments
1

10 Embeds 1,139

http://elblogdetuenti.blogspot.com 516
http://blog.tuenti.com 514
http://hoctudau.com 59
http://feeds.feedburner.com 21
http://kartones.net 12
http://www.slideshare.net 10
http://www.elblogdetuenti.blogspot.com 3
http://translate.googleusercontent.com 2
http://webcache.googleusercontent.com 1
http://www.hoctudau.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • nice!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

AJAX for Scalability Presentation 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