Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


Published on

Published in: Technology
  • Be the first to comment

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

  1. 1. Octubre, 2009
  2. 2. Tuenti Tech Teams Frontend, Backend, Systems and more, working together
  3. 3. Tuenti Tech Teams - Frontend Web
  4. 4. Tuenti Tech Teams - Frontend Web
  5. 5. Tuenti Tech Teams - Frontend Mobile Web
  6. 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. 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. 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. 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. 10. Tuenti Tech Teams - Systems Managing our amazing servers:
  11. 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. 12. A sample case Developing the Tuenti IM
  13. 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. 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. 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. 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. 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. 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. 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. 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 cookie transport Finally iframe controller file
  21. 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. 22. gracias