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