Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Frontend ArchitecturePrem GurbaniSenior Tech Leadprem@tuenti.com@premdg                                    #io11Mad
About TuentiLargest social network in SpainHighest trafficked website in SpainOver 10 million usersOver a 1,000 million pa...
What will be the Agenda for  next 20-25 minutes?Theres so much to tell about
I can talk about our culture               We love what we do
About our Coding Competitions
But Today Well Get Technical       Lets Look at    Tuentis Architecture
New FE Architecture & Strategy (i)Concerns addressed: flexibility, cost,schedule, integrability, organizationalperformance...
New FE Architecture & Strategy (ii)Principle: a highly decoupled systemHow? Natural separation of concerns:  Structure (HT...
Overall Architecture
Closer look at the Server-Side FW (i) Server no longer generates presentation. Only data We have data-centric Controllers ...
Closer look at the Server-Side FW (ii)
Closer Look at the Client Side FW
Where everything starts: a request
Digging into JavaScript
Questions?
Upcoming SlideShare
Loading in …5
×

Tuenti architecture

1,777 views

Published on

Tuenti hosted in Madrid and Barcelona the Google I/O Extended in Spain.

This was a talk given in our offices in Madrid before the Google's keynote started.

  • Be the first to comment

  • Be the first to like this

Tuenti architecture

  1. 1. Frontend ArchitecturePrem GurbaniSenior Tech Leadprem@tuenti.com@premdg #io11Mad
  2. 2. About TuentiLargest social network in SpainHighest trafficked website in SpainOver 10 million usersOver a 1,000 million page-views / day
  3. 3. What will be the Agenda for next 20-25 minutes?Theres so much to tell about
  4. 4. I can talk about our culture We love what we do
  5. 5. About our Coding Competitions
  6. 6. But Today Well Get Technical Lets Look at Tuentis Architecture
  7. 7. New FE Architecture & Strategy (i)Concerns addressed: flexibility, cost,schedule, integrability, organizationalperformanceResponsibilities UI interaction & behavior Templating and UI rendering Client - server communication Interact with Backend & Domain API Controllers logic & produce data output
  8. 8. New FE Architecture & Strategy (ii)Principle: a highly decoupled systemHow? Natural separation of concerns: Structure (HTML) Style (CSS) Behavior & Control (JS) Data (JSON-RPC)
  9. 9. Overall Architecture
  10. 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. 11. Closer look at the Server-Side FW (ii)
  12. 12. Closer Look at the Client Side FW
  13. 13. Where everything starts: a request
  14. 14. Digging into JavaScript
  15. 15. Questions?

×