Dubbo and Weidian's practice on micro-service architecture
A Highly Decoupled Front-End Framework for High Trafficked Web Applications
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)
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
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