AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes, allowing parts of a page to change without reloading the entire page. Tuenti uses AJAX extensively to update parts of their single-page application, caching content on both client and server sides for scalability. They route requests to different server farms based on client location and cache content to improve performance. Tuenti serves billions of images per day using multiple CDNs and pre-fetches content to minimize load times.

1. AJAX for ScalabilityErik SchultinkPHP Barcelona – 30 Oct, 2009

2. AJAXWhat is AJAX?“Asynchronous JavaScript and XML”Paradigm for client-server interactionChange state on client, without loading a complete HTML page

3. Traditional HTML BrowsingUser clicks linkBrowser sends requestServer receives, parses request, generates responseBrowser receives response and begins renderingDependent objects (images, js, css) load and renderPage appears

4. AJAX BrowsingUser clicks linkBrowser sends requestServer receives, parses request, generates responseBrowser receives response and begins renderingDependent objects (images, js, css) load and renderPage appears

5. Why Asynchronous?Not always necessary to wait for server responseMost of response is predictable

6. Scalability?Through-put, not speedIdeally, capacity is linear function of machinesIn practice, linear below some boundary

7. What is Tuenti.com?

8. Tuenti.comStarted 2007More than 20 billion pageviews/monthMore than 20k/second at peakBased in Madrid~80 employees, 40 engineers

9. How does Tuenti use AJAX?Only pageloads are login and home pageLoader pulls in all JS/CSSAfterwards 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 Architecturewww.tuenti.comLoad BalancerWeb server farmWeb server farmWeb server farm

16. Traditional Systems Architecturewww.tuenti.com12.45.34.17912.45.34.178Load BalancerLoad BalancerWeb server farmWeb server farmWeb server farmWeb server farm

17. Client-side Routingwww.tuenti.comwwwb3.tuenti.comwwwb2.tuenti.comwwwb1.tuenti.comwwwb4.tuenti.comLoad BalancerLoad BalancerLoad BalancerLoad BalancerWeb server farmWeb server farmWeb server farmWeb server farmLinearly scalable …

18. Client-side Routingwww.tuenti.comwwwb3.tuenti.comwwwb2.tuenti.comwwwb1.tuenti.comwwwb4.tuenti.comLoad BalancerLoad BalancerLoad BalancerLoad BalancerWeb server farmWeb server farmWeb server farmWeb server farmLinearly scalable … except for top level

19. Client-side Routingwww.tuenti.comwwwb3.tuenti.comwwwb2.tuenti.comwwwb1.tuenti.comwwwb4.tuenti.comLoad BalancerLoad BalancerLoad BalancerLoad BalancerWeb server farmWeb server farmWeb server farmWeb server farmlots of content creation = lots of dynamic data

20. Client-side Routingwww.tuenti.comwwwb3.tuenti.comwwwb2.tuenti.comwwwb1.tuenti.comwwwb4.tuenti.comLoad BalancerLoad BalancerLoad BalancerLoad BalancerWeb server farmWeb server farmWeb server farmWeb server farmCache Farm lots of dynamic data = lots of cache = internal network traffic

21. Client-side Routingwww.tuenti.comwwwb3.tuenti.comwwwb2.tuenti.comwwwb1.tuenti.comwwwb4.tuenti.comLoad BalancerLoad BalancerLoad BalancerLoad BalancerWeb server farmWeb server farmWeb server farmWeb server farmCache FarmCache FarmCache FarmCache FarmPartition cacheRoute requests to a farm near cache needed to respond

22. Internal network savings

23. Balancing LoadTop-level requests to www.tuenti.comEach request tells client which farm it should be using, based on a mappingMapping can be changed to balance load, perform maintenance, etc

24. Robust BrowsingDon’t tightly couple layersClient and server are separate layers

25. Robust BrowsingClient-side code should be robust against server-side failuresWhat can go wrong?Client loses connectivityServer-side errorWeb server overloadedEntire server farm overloadedServer farm loses connectivity

26. Robust BrowsingOptions:Retry (carefully)Switch to alternate farm (carefully)Detect error, give user feedback

27. CachingThink like server-side scalabilityCache data that is likely to be requested in the futureDoesn’t have consistency issuesDoesn’t change

28. Cache Data in Client BrowserMore responsive for userFewer requests to your servers

29. Some detailsLots of dependencies to load initiallyLoading can be brittle and slowBrowser performance

30. Some detailsBeware of external librariesGoogle JS lib are not static, not indefinitely cacheable

31. Some detailsFriends do have consistency issuesAdd/remove friendsChange avatar (rare)

32. Image ServingTuenti serves ~2.5 billion images/dayAt peak, this is >6 Gbps and >70k hits/secWe use CDNs

33. What is a CDN?Content Delivery Network

34. What is a CDN?Examples: Akamai, Limelightalso dozens more, including AmazonBig distributed, object cachePay per use either per request, per TB transfer, or per peak Mbps

35. What is a CDN?Advantages:Outsource dev and infrastructureGeographically distributedEconomies of scaleDisadvantages:High costLess control and transparencyCommitments

36. What affects image load time?Client internet connectionResponse time of CDNCDN cache hit rateResponse time of Origin

37. What affects image load time?Client internet connectionResponse time of CDNCDN cache hit rateResponse time of Origin

39. Monitor Performance from ClientCloser to performance experienced by end-userOnly way to get view of network issues faced by users (ie last mile)

41. Good MonitoringPercentiles > averages Less noise, more stableComparable to SLA termsEstablish baselines performance relative to past more important than absoluteAvoid false positives

42. How to fix slow ISP?Choose better transit providerSet-up peering (or get CDN too)Traffic management

43. What affects image load time?Client internet connectionResponse time of CDNCDN cache hit rateResponse time of Origin

46. Quality of End-User Experiencevs.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 content3075200

52. Know your content600

53. Know your content120

54. Know your content

55. Pre-fetch ContentExploit predictable user behaviorEx: clicking to next photo in an albumSimple solution – load next image hiddenClient browser will cache it (next response < 100 ms)Increase tolerance for slow response time

56. Pre-fetch ContentMore complex solutionPre-fetch next canvas (full html), render in background – rotate in on NextEven more complexInstantiate HTML template w/ data on clientPre-fetch data X photos in advance, render Y templates in advance with this data

57. Pre-fetch ContentProblems:Rendering still takes timeIncreases browser loadNeed to set cache headers correctly

58. Image deliverySmall images: High request, low volumeMost cost-effective to cache in memoryLarge images: High volume, low requests, greater tolerance for latency

59. What affects image load time?Client internet connectionResponse time of CDNCDN cache hit rateResponse time of Origin

60. Monitor Performance from Clientcold servers online

61. What affects image load time?Client internet connectionResponse time of CDNCDN cache hit rateResponse time of Origin

62. Deploy cache layers (squid, varnish)Optimize web servers for static content deliveryMore machinesAvoid RAID, file systemImprove Origin Response

63. SummaryCache and pre-fetch contentClient-side routingClient-side monitoring

64. General caveatsBe careful with browser performanceLook carefully at what’s in the worst 5%Don’t assume that high values are incorrect

65. Morejobs.tuenti.comPresentationSaturday 14:20Challenge (win a PS3)Talk: Continuous IntegrationDavideMendolia, Saturday 12:00

66. More? Ask us!

67. More? Ask us!

68. Q & A