Talk presented at the ICIW 2010. Paper published in the IEEE Computer Society

1. A Highly Decoupled Front-End Framework
for
High Traficked Web Applications
Andrzej Tucholka & Prem Gurbani
ICIW 2010, Barcelona, Spain

2. Outline
• About Tuenti
• Motivations for building a new Front-End
Architecture & Strategy
• Design Overview
• Performance & Metrics on a PoC
• Future Work

3. About Tuenti
• Largest social network in Spain
• Highest trafficked website in Spain
• Over 6 million users
• Over a billion page-views / day
• Over 130 employees

4. Old System
• In-house built MVC-like and in-house built template
engine
• Limitations of current system:
 tight inter-team dependencies
 duplicated work when adding additional client
applications (mobile, etc)
 limited opportunities for external usage
 limited caching solutions in the front-end
 limited flexibility in UI development

5. New FE Architecture & Strategy
• Concerns addressed: flexibility, cost,
schedule, integrability and... performance
• Responsibilities
o UI interaction & behavior
o Templating and UI rendering
o Client - server communication
o Interact with Backend & Domain core
o Controllers logic & produce data output

6. New FE Architecture & Strategy
• Principle: a highly decoupled system
• How? Natural separation of concerns:
o Structure (HTML)
o Style (CSS)
o Behavior & Control (JS)
o Data (JSON-RPC)

7. Closer Look at the Client Side FW

8. Closer look at the Server-Side FW
• Server no longer generates presentation. Only data
• We have data-centric Controllers that freely interact
between each other to provide the requested data.
• Controllers instantiate Abstractions: these interact with
the back-end domain core
• We called this design PCA: Printer-Controller-Abstraction
o Inspired by the architectural pattern known as PAC
(Presentation-Abstraction-Controller)

9. Closer look at the Server-Side FW
• PCA's controllers
o Controllers can communicate freely between them
o Each has its own data-driven responsibility
• PCA's abstractions
o Interface with Domain core
o Can be instantiated by multiple controllers
• PCA can provide
o Response buffering
o Interchangeable printers
o Build a highly cohesive system

10. Closer look at the Server-Side FW

11. Metrics on a PoC
Savings from 43 to 78%
Savings between 45 and 91%

12. Metrics on a PoC
Savings between 45 and 91%

13. Metrics on a PoC

14. Benefits
• Simplifies maintenance of multiple
interfaces
• Reducing the need for server-side
changes
• Teams focus on core responsibilities
• Improved parallelized development
• Improve testing and release procedures
• Reduce TCO: drastic savings in
bandwidth and server load

15. Future Work
• Challenges launching in Live environment
• Analyze performance on client-side
• Possibility to run Client-Side FW on Server
• Enhancements to current API controllers
structure
• Mobile browser Client-Side FWs

16. Questions?
Andrzej Tucholka - andrzej@tuenti.com
Prem Gurbani - prem@tuenti.com
Interested in shaping the future? Check out http://jobs.tuenti.com