tuenti tech teams. frontend, backend, systems and more, working together
TRANSCRIPT
Octubre, 2009
Tuenti Tech Teams
Frontend, Backend, Systems and more, working together
WebTuenti Tech Teams - Frontend
WebTuenti Tech Teams - Frontend
Mobile WebTuenti Tech Teams - Frontend
FrameworksJavascript
Client-side ProfilingSample perceived load times! This is what matters to the users!
Presentation / UINavigation
Tuenti Tech Teams - Frontend
Stick together!Have fun!
Product teamsDevelopers - JS/PHP - frontend and backendProduct managersDesignersDo
Product developmentProduct designSoftware designEverybody's input matters - it's a team effort! Everybody has to be proud of the result!
Tuenti Tech Teams - Frontend
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 theoryCache, cache, cacheChange the way you think... ... concurrency, race conditions, failuresHard to test scalabilityEvery bit countsKnow your software & work closely with systems
Tuenti Tech Teams - Backend
Managing our amazing servers:
Tuenti Tech Teams - Systems
Fundamental, the base of everything!!!Network design, systems architectureCope with problems:
Internal network traffic, latencies, isolate trafficLoad balancersElectricity consumptionBGP, OSPF, multiple links with providersKnow 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!
Tuenti Tech Teams - Systems
A sample case
Developing the Tuenti IM
Large scale & cost-effective web-based IM serviceOpen source + innovative ideas Do not reinvent the wheel
Delay product launch indefinitely Repeat old mistakes
XMPP is a mature, open, distributed & extensible middle-wareNext generation large-scale real-time web applicationsGoogle Wave!
1M concurrent chatting users...launching to everybody in a couple of days
Get a high quality IM platform: ejabberdExtend + adapt + optimizeHigh performance, clustered & fault-tolerantOpen source + deployed all over the world Implemented in Erlang/OTP
Overview
Designed in Ericsson’s Computer Science LabEricsson ⇒ AXD301 ATM switchNortel Networks (Alteon) ⇒ SSL acceleratorCouchDB, RabbitMQ, Yaws, MochiWeb, Tsung, ejabberd...
Distributed functional paradigmSimple and easy to learn High level of abstractionHigh productivity Built in solid concurrency modelExplicit or transparent distributionAsynchronous message passingSoft real timeRobustnessMulti-core architectures
A glimpse at Erlang/OTP
The challenge, Handle even more concurrent users per server
Optimize memory & CPU consumptionBe ready for site/service growth
Smart partitioning/load balancing strategiesIntegrate in existing backend
State-less instant messaging serviceData duplications / additional storage reqsAPI integration
Monitoring infrastructureSelf-management when overloadedAnti-abuse policies
Controlled client implementation + not server federationSome cheating is allowed
The backend/systems side (I)
Our strategy,BenchmarkOptimizeMonitorDark launchOptimize
Performance bottlenecksBugs
LaunchProbably largest Jabber/XMPP deployment in Spain
> 100M routed messages first week on-lineContinuous grownAverage 25M daily routed messages
The backend/systems side (and II)
Build a rich UIIncrease user engagementMake them use the chat
Browser issuesRender timeCSS constraints
Technical requirementsXMPP JS libraryCross domain XHRFault tolerant client-side engineMetrics
The frontend side
Make the chat visible at the very first page loadShow the buddy listOne click - start chat
Unobtrusive interfaceThe user must be able to keep browsing the site with minimum impactDeal with small screen resolutions and multiple conversationsIntegrate with the rest of our site (i.e. video player)
Building a rich UI
Discard IE6SLOW javascriptStyle limitations (position fixed)
Fake the behavior attaching events is expensiveThank god the number of IE6 users is going down
IE7 render performanceSave states of the rendered elementsReduce DOM manipulation
Reuse the buddy list module instead of repainting itFirebug is your best friend
Webkit browsers throwing generic errors from the JS libraryBuild our own error wrapper
Browser issues
Send XMPP requests from the client to the jabber serversPick a JS Jabber library
Audit the codePerformance testsAdapt and extend
Cross domain XHR requestsCan't work with the current iframe approachApproaches
window.name cookie transport
Finallyiframe controller file
Technical requirements (I)
Fault tolerant request engineUsers poor connectionsMultiple connections from different browsers/computersGracefully recover from server errors
MetricsChat usage patternsDetect possible message delivery problemsTrack active chat user engagementBrowser stats
Technical requirements (II)
