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)

graciashr@tuenti.com

http://jobs.tuenti.com