The document discusses the new frontend architecture of Tuenti, the largest social network in Spain. Some key points: - It addresses concerns around flexibility, costs, schedule, integration, and organizational performance. - Responsibilities of the frontend include UI interactions, templating, client-server communication, interacting with backend/APIs, and controlling logic and data output. - The principle is a highly decoupled system with natural separation of concerns between structure, style, behavior, and data. - On the server-side, controllers interact freely to provide requested data, following a "Printer-Controller-Abstraction" model inspired by PAC architecture. - On the client-side, everything starts with a

1. Frontend Architecture
Prem Gurbani
Senior Tech Lead
prem@tuenti.com
@premdg #io11Mad

2. About Tuenti
Largest social network in Spain
Highest trafficked website in Spain
Over 10 million users
Over a 1,000 million page-views / day

3. What will be the Agenda for
next 20-25 minutes?
There's so much to tell about

4. I can talk about our culture
We love what we do

5. About our Coding Competitions

6. But Today We'll Get Technical
Let's Look at
Tuenti's Architecture

7. New FE Architecture & Strategy (i)
Concerns addressed: flexibility, cost,
schedule, integrability, organizational
performance
Responsibilities
UI interaction & behavior
Templating and UI rendering
Client - server communication
Interact with Backend & Domain API
Controllers logic & produce data output

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

9. Overall Architecture

10. Closer look at the Server-Side FW (i)
Server no longer generates presentation. Only data
We have data-centric Controllers that freely interact
between each other to provide the requested data.
We called this design PCA: Printer-Controller-
Abstraction
Inspired by the architectural pattern known as PAC
(Presentation-Abstraction-Controller)

11. Closer look at the Server-Side FW (ii)

12. Closer Look at the Client Side FW

13. Where everything starts: a request

14. Digging into JavaScript

15. Questions?