Velocity dust
Upcoming SlideShare
Loading in...5
×
 

Velocity dust

on

  • 4,018 views

Our experience of using dust at scale.

Our experience of using dust at scale.

Statistics

Views

Total Views
4,018
Views on SlideShare
3,790
Embed Views
228

Actions

Likes
4
Downloads
46
Comments
0

5 Embeds 228

http://velocityconf.com 194
https://twitter.com 12
http://lanyrd.com 11
http://eventifier.co 10
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Velocity dust Velocity dust Presentation Transcript

  • The Curious case ofDustjs &web-performance1Wednesday, June 19, 13
  • Across 15 countriessupporting 19 languages &growing2Wednesday, June 19, 13
  • •Javascript templates at LinkedIn•LinkedIn applications using Dust JS•Measuring Web-Performance at LinkedIn•Deep dive : A mile long page•Lessons learnt and Next stepsOutline3Wednesday, June 19, 13
  • •Javascript templates at LinkedIn•LinkedIn applications using Dust JS•Measuring Web-Performance at LinkedIn•Deep dive : A mile long page•Lessons learnt and Next stepsOutline4Wednesday, June 19, 13
  • What is the story ofDustatLinkedIn ?5Wednesday, June 19, 13
  • Web - experiencefull-page-refreshlack-of one-click actionscomplex-navigation-flowsVisually boringdis-engaging6Wednesday, June 19, 13
  • Web - infrastructureNo Sharing UI across pagesDo the same thing over and overRapid UI prototyping is hardNo single web-technologylegacy/custom web technologiesLI-JSPJRubyGrailsDWR YUIHow to build for mobile?7Wednesday, June 19, 13
  • Our answer to thisproblem8Wednesday, June 19, 13
  • 1. Unify by enablingthe web-applicationsto serve JSONJSONbrowsergrails jruby java9Wednesday, June 19, 13
  • 2. Build a high-performingweb-proxy layerto do common things10Wednesday, June 19, 13
  • Since browser understands HTML,we needed {something}that transformed JSON ==> HTMLJSON + {something}browsergrails jruby javaHTML11Wednesday, June 19, 13
  • Another interesting changewas happening across theweb-community12Wednesday, June 19, 13
  • single-page-appsclient-templatesclient-MVCjson modelsbackbone.jsunderscore.js13Wednesday, June 19, 13
  • Our intent was not to buildclient-MVC apps yet, but...14Wednesday, June 19, 13
  • A common theme wenoticed,JSONandclient-templates15Wednesday, June 19, 13
  • {client-templates} === {js-templates}16Wednesday, June 19, 13
  • JSON + {js-template} ==> HTMLJSONbrowserjruby javaJS-templateCDN17Wednesday, June 19, 13
  • We chose Dustjsopen-sourcejavascript template library18Wednesday, June 19, 13
  • •high-performance with modern browsers•pre-compiled to JS at build-time•CDN cached with 365d expires•< 4KB compressed•logic-less, but extensible with helpers(function() {dust.register("demo", body_0);function body_0(chk, ctx) {return chk.write("Hello World!");}return body_0;})()The Good Parts19Wednesday, June 19, 13
  • The Good Partsops : operations per secondhttp://linkedin.github.io/dustjs/benchmark/index.html20Wednesday, June 19, 13
  • The Good Parts...The same {dust}template can berenderedeither on the browseror on the server21Wednesday, June 19, 13
  • The Good Parts...On the server we have many options22Wednesday, June 19, 13
  • We use enginein the web-proxybrowserjruby java TemplatesHTMLJSONV8 JS engineJSON Dust23Wednesday, June 19, 13
  • Lets look at some code!24Wednesday, June 19, 13
  • HTML SkeletonJSONembeddedin theskeleton<html><head><script type=”text/javascript”src=”dust.js”/><script type=”text/javascript”src=”tl/profile/view.dst”/></head><body>dust.render(‘{“project” : {“name” : {“The New LinkedIn Profile?”}}’, ‘tl/profile/view’, ...);</body></html>APP125Wednesday, June 19, 13
  • CDNDusttemplatepre-compiledto JSfunction body_0(chk,ctx) {returnchk.write("<div>Do youhave a URL forproject").reference(ctx.getPath(false,["project", "name"]),ctx, "h").write("?</div>");}return body_0226Wednesday, June 19, 13
  • JSON<html><head><script src=”dust.js”/><script type=”text/javascript”src=”tl/profile/view”/></head><body>dust.render (‘{“project” : {“name” : {“The New LinkedIn Profile?”}}’, ‘tl/profile/view’, ...);</body></html>APP1CDNJStemplatefunction body_0(chk, ctx){returnchk.write("<div>Do youhave a URL forproject").reference(ctx.getPath(false, ["project","name"]), ctx,"h").write("?</div>");}return body_02browserCDN27Wednesday, June 19, 13
  • JSON<html><head><script src=”dust.js”/><script type=”text/javascript”src=”tl/profile/view”/></head><body>dust.render (‘{“project” : {“name” : {“The New LinkedIn Profile?”}}’, ‘tl/profile/view’, ...);</body></html>APP1CDNJStemplatefunction body_0(chk, ctx){returnchk.write("<div>Do youhave a URL forproject").reference(ctx.getPath(false, ["project","name"]), ctx,"h").write("?</div>");}return body_02browserCDN3<html><head><script type=”text/javascript”src=”dust.js”/><script type=”text/javascript”src=”tl/profile/view”/></head><body> <div>Do you have a URL for project“The New LinkedIn Profile?”</div></body></html>JS Enginedust.js28Wednesday, June 19, 13
  • The Delightful Parts...29Wednesday, June 19, 13
  • Developer VelocityUnificationJSON30Wednesday, June 19, 13
  • Open-sourcePortablebrowser andserverPerformanceUnificationJSONDustDeveloper Velocity31Wednesday, June 19, 13
  • Rapid-iterationwithMockJSON andJSOpen-sourcePortablebrowser andserverPerformanceUnificationJSONJSON + DustDustDeveloper Velocity32Wednesday, June 19, 13
  • •Javascript templates at LinkedIn•LinkedIn applications using Dust JS•Measuring Web-Performance at LinkedIn•Deep dive : A mile long page•Lessons learnt and Next stepsOutline33Wednesday, June 19, 13
  • People You May Know34Wednesday, June 19, 13
  • 35Wednesday, June 19, 13
  • The new Profile36Wednesday, June 19, 13
  • 37Wednesday, June 19, 13
  • Profile Inline Edit38Wednesday, June 19, 13
  • The Influencers39Wednesday, June 19, 13
  • 40Wednesday, June 19, 13
  • 41Wednesday, June 19, 13
  • The Channels42Wednesday, June 19, 13
  • 43Wednesday, June 19, 13
  • Who Viewed My Profile44Wednesday, June 19, 13
  • 45Wednesday, June 19, 13
  • The Unified Search46Wednesday, June 19, 13
  • 47Wednesday, June 19, 13
  • Emails48Wednesday, June 19, 13
  • > 50% of the site traffic now servingJSON + {dust}49Wednesday, June 19, 13
  • one-click actions2013 web-experienceSimplified designVisually richengaging50InsightfulJS heavymore unique visitorsWednesday, June 19, 13
  • •Javascript templates at LinkedIn•LinkedIn applications using Dust JS•Measuring Web-Performance at LinkedIn•Deep dive : A mile long page•Lessons learnt and Next stepsOutline51Wednesday, June 19, 13
  • Web-Performance depends onWhat we measure ?52metrics such aspage on-load, TTFB,page-size, start-renderWednesday, June 19, 13
  • Web-Performance depends onHow we measure ?53sampling %, use casesWednesday, June 19, 13
  • Web-Performance depends onWhere we measure ?54across geo, differentbrowsersWednesday, June 19, 13
  • Web-Performance depends onWhom do we measure ?55real users, keynote, gomezWednesday, June 19, 13
  • We measure real-time using RUMfor real-users100% of requeststop pagesacross continentsknown browsers.56Wednesday, June 19, 13
  • What is the story ofDustandweb-performance then ?57Wednesday, June 19, 13
  • 58without {dust} with {dust} & client-renderingWho Viewed My ProfileWednesday, June 19, 13
  • Performance of client-renderingcomparable to server-side renderingfor PYMK except for IE7 !59Wednesday, June 19, 13
  • 60without {dust}Wednesday, June 19, 13
  • with {dust} &client-rendering61without {dust}client-render = (onload – first byte time)TTFB and Time to PaintWednesday, June 19, 13
  • •Javascript templates at LinkedIn•LinkedIn applications using Dust JS•Measuring Web-Performance at LinkedIn•Deep dive : A mile long page•Lessons learnt and Next stepsOutline62Wednesday, June 19, 13
  • http://blog.linkedin.com/wp-content/uploads/2012/10/profile20.png63Wednesday, June 19, 13
  • Symptoms we saw withClient-side rendering withtraditional metrics64Wednesday, June 19, 13
  • Certainbrowsers andgeo, on-loadtime miserable• Too many {dust} templates, slow parsing,blocking• Slow JSON parsing on the IE browsers• Sub-optimal Dust JS helpers65Wednesday, June 19, 13
  • JSON payloadsize high• Heavy JSON payloads from long key namesand repetitions in the JSON• Easy to send more data than what thetemplate needs66{“i18n_text_plain_0_renders_the_connection_count : “Your are connected to 4 users”,“first” : “Alfred”,“last” : “Willis”,“fullName” : “ Alfred Willis”}Hello {fullName}{i18n_text_plain_0_renders_the_connection_count}Long JSON keysWednesday, June 19, 13
  • More{dust}means morehttp-requests• Dust supports dynamic, async templateloading, does not scale• Slow CDN combined with high browsercache-miss across different geo,particularly bad in Asia-pacific , India67Wednesday, June 19, 13
  • SolutionOptimize for the above the fold&Use server-side JS engine for slowbrowsers and geo68Wednesday, June 19, 13
  • 69#1 Split the Monolithic page to Embeds12345Wednesday, June 19, 13
  • 70But wait…there’s more!But wait, there is more to it...Wednesday, June 19, 13
  • 71Deferred RenderingORDeferred Fetch#2 Defer below the fold embedsWednesday, June 19, 13
  • Reduce latency• # 1 Embeds instead of monolithic, flush early• # 2 Defer rendering below the fold content• # 3 Server-side render for slow user-agentsand geo regions72Reduce JSON size• # 1 Defer fetching below the fold JSON• # 2 Pre-prod payload lint tooling• # 3 Localized strings served via CDN cacheReduce http-requests,increase caching• # 1 Build-time dependency list instead ofdynamic, async loading on above the fold• # 2 Early flush the templates for above thefoldWednesday, June 19, 13
  • 73Deferredrendering &`fetchDeferredImageJSON payloadreductionWednesday, June 19, 13
  • •Javascript templates at LinkedIn•LinkedIn applications using Dust JS•Measuring Web-Performance at LinkedIn•Deep dive : A mile long page•Lessons learnt and Next stepsOutline74Wednesday, June 19, 13
  • Rapid-iterationwithMock JSON andJSOpen-sourcePortablebrowser andserverPerformanceUnificationJSONJSON + DustDustDeveloper Velocity75Wednesday, June 19, 13
  • ßRapid-iterationwithMock JSON andJSOpen-sourcePortablebrowser andserverPerformanceUnificationJSONJSON + DustDustSite Speed76Site-SpeedLean payloadserver JS-engineMeasure forengagementImprove dust.jsWednesday, June 19, 13
  • Performance is also User Perception andEngagement.How fast can they see anything on the page?How early can they engage ?Is the user-experience consistent?Simplify the design.Wednesday, June 19, 13
  • Next Steps78•Invest more in open-source for improvingperformance, dust.js and V8•Enforce leaner JSON payload size•Prefetching resources for certain use casessuch as search•Evolve with the new web-standards•Move to faster CDNs across geo•Invest in intelligent ways to co-relateWednesday, June 19, 13
  • The Core Team @ LinkedIn79Questions!!http://linkedin.github.io/dustjs/Meet the teamOffice Hours next@ Exhibit Hall (Table 2)Veena Basavaraj Eran Leshem Baq Haidri Brian Geffon John BernadoWednesday, June 19, 13