Velocity dust

  • 4,428 views
Uploaded on

Our experience of using dust at scale.

Our experience of using dust at scale.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,428
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
52
Comments
0
Likes
4

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. The Curious case ofDustjs &web-performance1Wednesday, June 19, 13
  • 2. Across 15 countriessupporting 19 languages &growing2Wednesday, June 19, 13
  • 3. •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
  • 4. •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
  • 5. What is the story ofDustatLinkedIn ?5Wednesday, June 19, 13
  • 6. Web - experiencefull-page-refreshlack-of one-click actionscomplex-navigation-flowsVisually boringdis-engaging6Wednesday, June 19, 13
  • 7. 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
  • 8. Our answer to thisproblem8Wednesday, June 19, 13
  • 9. 1. Unify by enablingthe web-applicationsto serve JSONJSONbrowsergrails jruby java9Wednesday, June 19, 13
  • 10. 2. Build a high-performingweb-proxy layerto do common things10Wednesday, June 19, 13
  • 11. Since browser understands HTML,we needed {something}that transformed JSON ==> HTMLJSON + {something}browsergrails jruby javaHTML11Wednesday, June 19, 13
  • 12. Another interesting changewas happening across theweb-community12Wednesday, June 19, 13
  • 13. single-page-appsclient-templatesclient-MVCjson modelsbackbone.jsunderscore.js13Wednesday, June 19, 13
  • 14. Our intent was not to buildclient-MVC apps yet, but...14Wednesday, June 19, 13
  • 15. A common theme wenoticed,JSONandclient-templates15Wednesday, June 19, 13
  • 16. {client-templates} === {js-templates}16Wednesday, June 19, 13
  • 17. JSON + {js-template} ==> HTMLJSONbrowserjruby javaJS-templateCDN17Wednesday, June 19, 13
  • 18. We chose Dustjsopen-sourcejavascript template library18Wednesday, June 19, 13
  • 19. •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
  • 20. The Good Partsops : operations per secondhttp://linkedin.github.io/dustjs/benchmark/index.html20Wednesday, June 19, 13
  • 21. The Good Parts...The same {dust}template can berenderedeither on the browseror on the server21Wednesday, June 19, 13
  • 22. The Good Parts...On the server we have many options22Wednesday, June 19, 13
  • 23. We use enginein the web-proxybrowserjruby java TemplatesHTMLJSONV8 JS engineJSON Dust23Wednesday, June 19, 13
  • 24. Lets look at some code!24Wednesday, June 19, 13
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. The Delightful Parts...29Wednesday, June 19, 13
  • 30. Developer VelocityUnificationJSON30Wednesday, June 19, 13
  • 31. Open-sourcePortablebrowser andserverPerformanceUnificationJSONDustDeveloper Velocity31Wednesday, June 19, 13
  • 32. Rapid-iterationwithMockJSON andJSOpen-sourcePortablebrowser andserverPerformanceUnificationJSONJSON + DustDustDeveloper Velocity32Wednesday, June 19, 13
  • 33. •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
  • 34. People You May Know34Wednesday, June 19, 13
  • 35. 35Wednesday, June 19, 13
  • 36. The new Profile36Wednesday, June 19, 13
  • 37. 37Wednesday, June 19, 13
  • 38. Profile Inline Edit38Wednesday, June 19, 13
  • 39. The Influencers39Wednesday, June 19, 13
  • 40. 40Wednesday, June 19, 13
  • 41. 41Wednesday, June 19, 13
  • 42. The Channels42Wednesday, June 19, 13
  • 43. 43Wednesday, June 19, 13
  • 44. Who Viewed My Profile44Wednesday, June 19, 13
  • 45. 45Wednesday, June 19, 13
  • 46. The Unified Search46Wednesday, June 19, 13
  • 47. 47Wednesday, June 19, 13
  • 48. Emails48Wednesday, June 19, 13
  • 49. > 50% of the site traffic now servingJSON + {dust}49Wednesday, June 19, 13
  • 50. one-click actions2013 web-experienceSimplified designVisually richengaging50InsightfulJS heavymore unique visitorsWednesday, June 19, 13
  • 51. •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
  • 52. Web-Performance depends onWhat we measure ?52metrics such aspage on-load, TTFB,page-size, start-renderWednesday, June 19, 13
  • 53. Web-Performance depends onHow we measure ?53sampling %, use casesWednesday, June 19, 13
  • 54. Web-Performance depends onWhere we measure ?54across geo, differentbrowsersWednesday, June 19, 13
  • 55. Web-Performance depends onWhom do we measure ?55real users, keynote, gomezWednesday, June 19, 13
  • 56. We measure real-time using RUMfor real-users100% of requeststop pagesacross continentsknown browsers.56Wednesday, June 19, 13
  • 57. What is the story ofDustandweb-performance then ?57Wednesday, June 19, 13
  • 58. 58without {dust} with {dust} & client-renderingWho Viewed My ProfileWednesday, June 19, 13
  • 59. Performance of client-renderingcomparable to server-side renderingfor PYMK except for IE7 !59Wednesday, June 19, 13
  • 60. 60without {dust}Wednesday, June 19, 13
  • 61. with {dust} &client-rendering61without {dust}client-render = (onload – first byte time)TTFB and Time to PaintWednesday, June 19, 13
  • 62. •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
  • 63. http://blog.linkedin.com/wp-content/uploads/2012/10/profile20.png63Wednesday, June 19, 13
  • 64. Symptoms we saw withClient-side rendering withtraditional metrics64Wednesday, June 19, 13
  • 65. 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
  • 66. 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
  • 67. 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
  • 68. SolutionOptimize for the above the fold&Use server-side JS engine for slowbrowsers and geo68Wednesday, June 19, 13
  • 69. 69#1 Split the Monolithic page to Embeds12345Wednesday, June 19, 13
  • 70. 70But wait…there’s more!But wait, there is more to it...Wednesday, June 19, 13
  • 71. 71Deferred RenderingORDeferred Fetch#2 Defer below the fold embedsWednesday, June 19, 13
  • 72. 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
  • 73. 73Deferredrendering &`fetchDeferredImageJSON payloadreductionWednesday, June 19, 13
  • 74. •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
  • 75. Rapid-iterationwithMock JSON andJSOpen-sourcePortablebrowser andserverPerformanceUnificationJSONJSON + DustDustDeveloper Velocity75Wednesday, June 19, 13
  • 76. ßRapid-iterationwithMock JSON andJSOpen-sourcePortablebrowser andserverPerformanceUnificationJSONJSON + DustDustSite Speed76Site-SpeedLean payloadserver JS-engineMeasure forengagementImprove dust.jsWednesday, June 19, 13
  • 77. 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
  • 78. 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
  • 79. 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