Octubre, 2009
Tuenti Tech Teams

Frontend, Backend, Systems and
     more, working together
Tuenti Tech Teams - Frontend
 Web
Tuenti Tech Teams - Frontend
 Web
Tuenti Tech Teams - Frontend
 Mobile Web
Tuenti Tech Teams - Frontend
 Frameworks
   Javascript
      Client-side Profiling
         Sample perceived load times! T...
Tuenti Tech Teams - Frontend
 Product teams
    Developers - JS/PHP -
    frontend and backend
    Product managers
    De...
Tuenti Tech Teams - Backend

   Make possible the "web scale"

   20.000.000.000 page views / month

   3.000.000 page vie...
Tuenti Tech Teams - Backend
   DB design ...
                    ... forgetting about the old theory
   Cache, cache, cach...
Tuenti Tech Teams - Systems
    Managing our amazing servers:
Tuenti Tech Teams - Systems
   Fundamental, the base of everything!!!
   Network design, systems architecture
   Cope with...
A sample case

Developing the Tuenti IM
Overview
 Large scale & cost-effective web-based IM service
    Open source + innovative ideas
    Do not reinvent the whe...
A glimpse at Erlang/OTP
 Designed in Ericsson’s Computer Science Lab
    Ericsson ⇒ AXD301 ATM switch
    Nortel Networks ...
The backend/systems side (I)
 The challenge,
    Handle even more concurrent users per server
        Optimize memory & CP...
The backend/systems side (and II)
 Our strategy,
    Benchmark
    Optimize
    Monitor
    Dark launch
    Optimize
     ...
The frontend side
 Build a rich UI
    Increase user engagement
    Make them use the chat

  Browser issues
    Render ti...
Building a rich UI
 Make the chat visible at the very first page load
   Show the buddy list
   One click - start chat


 ...
Browser issues
 Discard IE6
    SLOW javascript
    Style limitations (position fixed)
       Fake the behavior attaching ...
Technical requirements (I)
 Send XMPP requests from the client to the jabber servers
    Pick a JS Jabber library
       A...
Technical requirements (II)
 Fault tolerant request engine
    Users poor connections
    Multiple connections from differ...
http://jobs.tuenti.com




                   gracias
                  hr@tuenti.com
Tuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti Tech Teams. Frontend, Backend, Systems and more, working together
Upcoming SlideShare
Loading in …5
×

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

4,018 views

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" 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. 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 window.name 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. http://jobs.tuenti.com gracias hr@tuenti.com

×