Tuenti architecture

  • 1,408 views
Uploaded on

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

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,408
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Frontend ArchitecturePrem GurbaniSenior Tech Leadprem@tuenti.com@premdg #io11Mad
  • 2. About TuentiLargest social network in SpainHighest trafficked website in SpainOver 10 million usersOver a 1,000 million page-views / day
  • 3. What will be the Agenda for next 20-25 minutes?Theres 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 Well Get Technical Lets Look at Tuentis Architecture
  • 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. 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. 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?