Your SlideShare is downloading. ×
Velocity dust
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Velocity dust

5,052
views

Published on

Our experience of using dust at scale.

Our experience of using dust at scale.

Published in: Technology, Business

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,052
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
56
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