Embed Size (px)
Citation preview
Octubre, 2009
Tuenti Tech Teams
Frontend, Backend, Systems and more, working together
• Web
Tuenti Tech Teams - Frontend
• Web
Tuenti Tech Teams - Frontend
• Mobile Web
Tuenti Tech Teams - Frontend
• Frameworkso Javascript
Client-side ProfilingSample perceived load times! This is what
matters to the users!o Presentation / UIo Navigation
Tuenti Tech Teams - Frontend
Stick together!Have fun!
• Product teamso Developers - JS/PHP -
frontend and backendo Product managerso Designerso Do
Product developmentProduct designSoftware designEverybody's input matters
- it's a team effort! Everybody has to be proud of the result!
Tuenti Tech Teams - Frontend
o Make possible the "web scale"
20.000.000.000 page views / month
3.000.000 page views / day in tuenti mobile
2.500.000 uploaded photos / day
72 minutes per user per day
500+ servers
Tuenti Tech Teams - Backend
o DB design ... ... forgetting about the old theory
o Cache, cache, cacheo Change the way you think...
... concurrency, race conditions, failureso Hard to test scalabilityo Every bit countso Know your software & work closely with systems
Tuenti Tech Teams - Backend
o Managing our amazing servers:
Tuenti Tech Teams - Systems
o Fundamental, the base of everything!!!o Network design, systems architectureo Cope with problems:
Internal network traffic, latencies, isolate traffic Load balancers Electricity consumption BGP, OSPF, multiple links with providers Know how to find problems, know how everything works. Deep linux knowledge, know how to optimize servers for
each task.o A big challenge to maintain and monitor hundreds of servers
+500!
Tuenti Tech Teams - Systems
A sample case
Developing the Tuenti IM
• Large scale & cost-effective web-based IM serviceo Open source + innovative ideas o Do not reinvent the wheel
Delay product launch indefinitely Repeat old mistakes
• XMPP is a mature, open, distributed & extensible middle-wareo Next generation large-scale real-time web applicationso Google Wave!
• 1M concurrent chatting userso ...launching to everybody in a couple of days
• Get a high quality IM platform: ejabberdo Extend + adapt + optimizeo High performance, clustered & fault-toleranto Open source + deployed all over the world o Implemented in Erlang/OTP
Overview
• Designed in Ericsson’s Computer Science Labo Ericsson AXD301 ATM switch⇒o Nortel Networks (Alteon) SSL accelerator⇒o CouchDB, RabbitMQ, Yaws, MochiWeb, Tsung, ejabberd...
• Distributed functional paradigmo Simple and easy to learn o High level of abstractiono High productivity o Built in solid concurrency modelo Explicit or transparent distributiono Asynchronous message passingo Soft real timeo Robustnesso Multi-core architectures
A glimpse at Erlang/OTP
• The challenge, o Handle even more concurrent users per server
Optimize memory & CPU consumptiono Be ready for site/service growth
Smart partitioning/load balancing strategieso Integrate in existing backend
State-less instant messaging service Data duplications / additional storage reqs API integration
Monitoring infrastructureo Self-management when overloadedo Anti-abuse policies
• Controlled client implementation + not server federationo Some cheating is allowed
The backend/systems side (I)
• Our strategy,o Benchmarko Optimizeo Monitoro Dark launcho Optimize
Performance bottlenecks Bugs
o Launch• Probably largest Jabber/XMPP deployment in Spain
o > 100M routed messages first week on-lineo Continuous growno Average 25M daily routed messages
The backend/systems side (and II)
• Build a rich UIo Increase user engagemento Make them use the chat
• Browser issueso Render timeo CSS constraints
• Technical requirementso XMPP JS libraryo Cross domain XHRo Fault tolerant client-side engineo Metrics
The frontend side
• Make the chat visible at the very first page loado Show the buddy listo One click - start chat
• Unobtrusive interfaceo The user must be able to keep browsing the site with
minimum impacto Deal with small screen resolutions and multiple
conversationso Integrate with the rest of our site (i.e. video player)
Building a rich UI
• Discard IE6o SLOW javascripto Style limitations (position fixed)
Fake the behavior attaching events is expensiveo Thank god the number of IE6 users is going down
• IE7 render performanceo Save states of the rendered elementso Reduce DOM manipulation
Reuse the buddy list module instead of repainting ito Firebug is your best friend
• Webkit browsers throwing generic errors from the JS libraryo Build our own error wrapper
Browser issues
• Send XMPP requests from the client to the jabber serverso Pick a JS Jabber library
Audit the code Performance tests Adapt and extend
• Cross domain XHR requestso Can't work with the current iframe approacho Approaches
window.name cookie transport
o Finally iframe controller file
Technical requirements (I)
• Fault tolerant request engineo Users poor connectionso Multiple connections from different browsers/computerso Gracefully recover from server errors
• Metricso Chat usage patternso Detect possible message delivery problemso Track active chat user engagemento Browser stats
Technical requirements (II)
