2013 | LinkedIn David Fleming Senior Product Manager at Zoomjax San Francisco Bay Area | Software Previous Education Golden Phase, FixDex Silicon Valley Business Academy
identity ◦ Not just your resume ◦ Activity, Groups, Following, Connections, Insights about you and your network • Needs to be more interactive ◦ Keep users engaged on the page ◦ Inline pagination, editing, searching
identity ◦ Not just your resume ◦ Activity, Groups, Following, Connections, Insights about you and your network • Needs to be more interactive ◦ Keep users engaged on the page ◦ Inline pagination, editing, searching • Needs to be fluid, flexible, fast ◦ Progressive rendering ◦ Maintain high performance
CDN Load Balancer SCDS Fizzy Profile Web App Profile Content Service Profile Web App Connections Content Service Groups Content Service Dust/JS/CSS Server Retrieve Data Models from Mid-tier /profile/view?id=32 top_card.tl, background.tl /profile/topcard /profile/background
CDN Load Balancer SCDS Fizzy Profile Web App Profile Content Service Profile Web App Connections Content Service Groups Content Service Dust/JS/CSS Server Retrieve Data Models /profile/view?id=32 top_card.tl, background.tl /profile/topcard /profile/background Our new architecture uses new tech at all layers
CDN Load Balancer SCDS Fizzy Profile Web App Profile Content Service Profile Web App Connections Content Service Groups Content Service Dust/JS/CSS Server Retrieve Data Models /profile/view?id=32 top_card.tl, background.tl /profile/topcard /profile/background Let's start at the bottom with Mappers
services into JSON • Each have an unique endpoint URL ( /profile/positions?id=42 ) Positions Mapper JSON "positions": [{ "position": {"id:{}"}, ]} Biz Profile Model Profile Model Rich Media Rest Model References Model Profile Flex Model
retrieve data for a section ▪ Positions, Educations, Groups, etc. • Reusable & Combinable ◦ Mappers can be used more than once ▪ Positions Mapper is used for Positions section and the positions part of Top Card ◦ You can Aggregate Mappers under a common root element and a new URL endpoint
a single Mapper or Aggregated Mapper (like Top Card) for its data Profile Web App Summary Mapper Positions Mapper Educations Mapper Picture Mapper Top Card Mapper "Summary": { "summary": "I'm an experienced..."} JSON JSON "TopCard": { "positions": {}, "educations":{}, "picture":{}} Groups Mapper Connections Mapper Patents Mapper "Connections": { "profiles": [ ...]} JSON
CDN Load Balancer SCDS Fizzy Profile Web App Profile Content Service Profile Web App Connections Content Service Groups Content Service Dust/JS/CSS Server Retrieve Data Models /profile/view?id=32 top_card.tl, background.tl /profile/topcard /profile/background Fizzy - the UI aggregator
◦ Fizzy Server fetches the content you want ◦ Fizzy Client renders it when ready • Your base page defines its structure and which UI components it needs (called "embeds") *Fizzy Server is an Apache Traffic Server Plugin, Fizzy Client is a JS library
CDN Load Balancer SCDS Fizzy Profile Web App Profile Content Service Profile Web App Connections Content Service Groups Content Service Dust/JS/CSS Server Retrieve Data Models /profile/view?id=32 top_card.tl, background.tl /profile/topcard /profile/background You guessed it... Dust client templates
in CDNs and browsers ◦ Members browse many profiles in a row • Very DRY and reusable ◦ Improved development speed ◦ Templates within templates within templates... ▪ date range, degree badge, formatted summary field • Super easy to refresh a section on the page ◦ Re-render and replace ◦ Useful in pagination, inline searching, and inline editing
• Dust templates for view and edit • Mappers return just the data we need to refresh "View" template "Edit" template Summary Section When edit link is clicked, render "edit" template
• Dust templates for view and edit • Mappers return just the data we need to refresh "View" template "Edit" template Summary Section On submit, our endpoint sends back JSON, and we re-render
highly coupled with different sections. ◦ Adding/editing a position needs to be reflected on Top Card... ◦ Deleting a project needs to also be removed from any associated position... • Solution: since we have mappers for each section, we know which to re-fetch upon a save and refresh the respective templates
on LinkedIn • Profile fetches 48+ different types of content on each page load ◦ This content results in 250+ total downstream calls Bottom Line: We need to be fast, but need to consider downstream fanout
Profile App Profile App Profile App Profile App Profile App Profile App Profile App Profile App In the beginning, Profile had 15 embeds with 15 different endpoints which is great for speed...
Profile App Profile App Profile App Profile App Profile App Profile App Profile App Profile App Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service That's a lot of downstream calls, often requesting the same data too. Content Service Content Service
Profile App Profile App Profile App Profile App Profile App Profile App Profile App Profile App Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service and those calls call more and more... until...
Profile App Profile App Profile App Profile App Profile App Profile App Profile App Profile App Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service Content Service aaaaand the site's down
parallel requests to Profile • It's a good balance of speed vs. scalability • Batching requests that need the same data has the added benefit of less downstream calls
above the fold as fast as we can ◦ Deferring everything at the bottom ◦ Reduces the static content we need to initially download Sorry guys, we’ll get to you later
fetching the modules at the bottom of the page ◦ Improves server side assembly times ◦ Lowers payload and improves network time ◦ Improves client rendering times
fetching the modules at the bottom of the page ◦ Improves server side assembly times ◦ Lowers payload and improves network time ◦ Improves client rendering times Go fetch!
entire professional identity ◦ Easily expose new data endpoints • Needs to be more interactive ◦ Inline editing, searching • Needs to be ◦ Fluid ◦ Flexible ◦ Fast
can combine and reuse with ease ◦ A must if refreshing part of page • When structuring your page, start with many embeds ◦ You can control number of requests, when embeds are rendered, and when to fetch data • Many partial templates are a good thing ◦ Allows you finer control over what to re-render ◦ Improves developer speed
Our Mappers are structured to guarantee minimal downstream calls ◦ Take advantage of decoupling rendering layer with server side endpoints ▪ Engineers can build endpoints ▪ Web devs can start the templates with mocked JSON data
joshclemm
techiro
shimastripe
ryosukeigarashi
%20(1).jpg){kind=avatar}
giftojabu1
.jpeg){kind=avatar}
arthur1
bbrbbq
salaboy
sadnessojisan
kazuhitotakahashi
hirosatogamo
msato
jeffersonlam
chriscoyier
garrettdimon
philnash
stephaniewalter
paulrobertlloyd
eileencodes
ufuk
brad_frost
deanohume
sstephenson
jacobian
