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"
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
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
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!
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.
19. 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)
20.
21. 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
22. 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
23. 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
