A Highly Decoupled Front-End Framework for High Trafficked Web Applications


Published on

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

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

A Highly Decoupled Front-End Framework for High Trafficked Web Applications

  1. 1. A Highly Decoupled Front-End Framework for High Traficked Web Applications Andrzej Tucholka & Prem Gurbani ICIW 2010, Barcelona, Spain
  2. 2. Outline• About Tuenti• Motivations for building a new Front-End Architecture & Strategy• Design Overview• Performance & Metrics on a PoC• Future Work
  3. 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. 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. 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. 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. 7. Closer Look at the Client Side FW
  8. 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. 9. Closer look at the Server-Side FW• PCAs controllers o Controllers can communicate freely between them o Each has its own data-driven responsibility• PCAs 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. 10. Closer look at the Server-Side FW
  11. 11. Metrics on a PoC Savings from 43 to 78%Savings between 45 and 91%
  12. 12. Metrics on a PoC Savings between 45 and 91%
  13. 13. Metrics on a PoC
  14. 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. 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. 16. Questions? Andrzej Tucholka - andrzej@tuenti.com Prem Gurbani - prem@tuenti.comInterested in shaping the future? Check out http://jobs.tuenti.com