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

Octubre, 2009

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

Tuenti Tech Teams - Frontend Web

Tuenti Tech Teams - Frontend Mobile Web

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!

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!

Tuenti Tech Teams - Backend 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 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

Tuenti Tech Teams - Systems Managing our amazing servers:

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!

A sample case Developing the Tuenti IM

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

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

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

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

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

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)

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

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

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

http://jobs.tuenti.com gracias hr@tuenti.com

http://elblogdetuenti.blogspot.com	347
http://blog.tuenti.com	321
http://feeds.feedburner.com	15
http://kartones.net	12
http://www.slideshare.net	7
http://666.mashmetv.appspot.com	4
http://veroycintia.blogspot.com	3
http://www.elblogdetuenti.blogspot.com	2
http://translate.googleusercontent.com	1
http://yoana-mb.blogspot.com	1

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

by Tuenti on Nov 12, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 713

Statistics

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