Tuenti Tech Teams. Frontend, Backend, Systems and more, working together

Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Octubre, 2009
  • 2. Tuenti Tech Teams Frontend, Backend, Systems and more, working together
  • 3. Tuenti Tech Teams - Frontend Web
  • 4. Tuenti Tech Teams - Frontend Web
  • 5. Tuenti Tech Teams - Frontend Mobile Web
  • 6. Tuenti Tech Teams - Frontend Frameworks Javascript Client-side Profiling Sample perceived load times! This is what matters to the users! Presentation / UI Navigation Stick together! Have fun!
  • 7. Tuenti Tech Teams - Frontend Product teams Developers - JS/PHP - frontend and backend Product managers Designers Do Product development Product design Software design Everybody's input matters - it's a team effort! Everybody has to be proud of the result!
  • 8. Tuenti Tech Teams - Backend Make possible the "web scale" 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
  • 9. Tuenti Tech Teams - Backend DB design ... ... forgetting about the old theory Cache, cache, cache Change the way you think... ... concurrency, race conditions, failures Hard to test scalability Every bit counts Know your software & work closely with systems
  • 10. Tuenti Tech Teams - Systems Managing our amazing servers:
  • 11. Tuenti Tech Teams - Systems Fundamental, the base of everything!!! Network design, systems architecture 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. A big challenge to maintain and monitor hundreds of servers +500!
  • 12. A sample case Developing the Tuenti IM
  • 13. Overview Large scale & cost-effective web-based IM service Open source + innovative ideas Do not reinvent the wheel Delay product launch indefinitely Repeat old mistakes XMPP is a mature, open, distributed & extensible middle-ware Next generation large-scale real-time web applications Google Wave! 1M concurrent chatting users ...launching to everybody in a couple of days Get a high quality IM platform: ejabberd Extend + adapt + optimize High performance, clustered & fault-tolerant Open source + deployed all over the world Implemented in Erlang/OTP
  • 14. A glimpse at Erlang/OTP Designed in Ericsson’s Computer Science Lab Ericsson ⇒ AXD301 ATM switch Nortel Networks (Alteon) ⇒ SSL accelerator CouchDB, RabbitMQ, Yaws, MochiWeb, Tsung, ejabberd... Distributed functional paradigm Simple and easy to learn High level of abstraction High productivity Built in solid concurrency model Explicit or transparent distribution Asynchronous message passing Soft real time Robustness Multi-core architectures
  • 15. The backend/systems side (I) The challenge, Handle even more concurrent users per server Optimize memory & CPU consumption Be ready for site/service growth Smart partitioning/load balancing strategies Integrate in existing backend State-less instant messaging service Data duplications / additional storage reqs API integration Monitoring infrastructure Self-management when overloaded Anti-abuse policies Controlled client implementation + not server federation Some cheating is allowed
  • 16. The backend/systems side (and II) Our strategy, Benchmark Optimize Monitor Dark launch Optimize Performance bottlenecks Bugs Launch Probably largest Jabber/XMPP deployment in Spain > 100M routed messages first week on-line Continuous grown Average 25M daily routed messages
  • 17. The frontend side Build a rich UI Increase user engagement Make them use the chat Browser issues Render time CSS constraints Technical requirements XMPP JS library Cross domain XHR Fault tolerant client-side engine Metrics
  • 18. Building a rich UI Make the chat visible at the very first page load Show the buddy list One click - start chat Unobtrusive interface The user must be able to keep browsing the site with minimum impact Deal with small screen resolutions and multiple conversations Integrate with the rest of our site (i.e. video player)
  • 19. Browser issues Discard IE6 SLOW javascript Style limitations (position fixed) Fake the behavior attaching events is expensive Thank god the number of IE6 users is going down IE7 render performance Save states of the rendered elements Reduce DOM manipulation Reuse the buddy list module instead of repainting it Firebug is your best friend Webkit browsers throwing generic errors from the JS library Build our own error wrapper
  • 20. Technical requirements (I) Send XMPP requests from the client to the jabber servers Pick a JS Jabber library Audit the code Performance tests Adapt and extend Cross domain XHR requests Can't work with the current iframe approach Approaches window.name cookie transport Finally iframe controller file
  • 21. Technical requirements (II) Fault tolerant request engine Users poor connections Multiple connections from different browsers/computers Gracefully recover from server errors Metrics Chat usage patterns Detect possible message delivery problems Track active chat user engagement Browser stats
  • 22. http://jobs.tuenti.com gracias hr@tuenti.com