Dust and web-performance at LinkedIn

The Curious case of Dustjs & web-performance 1 Wednesday, June
19, 13

Across 15 countries supporting 19 languages & growing 2 Wednesday,
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 steps Outline 3 Wednesday, June 19, 13

What is the story of Dust at LinkedIn ? 5
Wednesday, June 19, 13

Web - experience full-page-refresh lack-of one-click actions complex-navigation-ﬂows Visually boring
dis-engaging 6 Wednesday, June 19, 13

Web - infrastructure No Sharing UI across pages Do the
same thing over and over Rapid UI prototyping is hard No single web-technology legacy/custom web technologies LI-JSP JRuby Grails DWR YUI How to build for mobile? 7 Wednesday, June 19, 13

Our answer to this problem 8 Wednesday, June 19, 13

1. Unify by enabling the web-applications to serve JSON JSON
browser grails jruby java 9 Wednesday, June 19, 13

2. Build a high-performing web-proxy layer to do common things
10 Wednesday, June 19, 13

Since browser understands HTML, we needed {something} that transformed JSON
==> HTML JSON + {something} browser grails jruby java HTML 11 Wednesday, June 19, 13

Another interesting change was happening across the web-community 12 Wednesday,
June 19, 13

single-page-apps client-templates client-MVC json models backbone.js underscore.js 13 Wednesday, June
19, 13

Our intent was not to build client-MVC apps yet, but...

A common theme we noticed, JSON and client-templates 15 Wednesday,
June 19, 13

{client-templates} === {js-templates} 16 Wednesday, June 19, 13

JSON + {js-template} ==> HTML JSON browser jruby java JS-template
CDN 17 Wednesday, June 19, 13

We chose Dustjs open-source javascript template library 18 Wednesday, 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 Parts 19 Wednesday, June 19, 13

The Good Parts ops : operations per second http://linkedin.github.io/dustjs/benchmark/index.html 20

The Good Parts... The same {dust}template can be rendered either
on the browser or on the server 21 Wednesday, June 19, 13

The Good Parts... On the server we have many options

We use engine in the web-proxy browser jruby java Templates
HTML JSON V8 JS engine JSON Dust 23 Wednesday, June 19, 13

Lets look at some code! 24 Wednesday, June 19, 13

HTML Skeleton JSON embedded in the skeleton <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> APP 1 25 Wednesday, June 19, 13

CDN Dust template pre-compiled to JS function body_0(chk, ctx) {return
chk.write("<div>Do you have a URL for project").reference(ct x.getPath(false, ["project", "name"]), ctx, "h").write("?</ div>");}return body_0 2 26 Wednesday, 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> APP 1 CDN JS template function body_0(chk, ctx) {return chk.write("<div>Do you have a URL for project").reference(ctx.g etPath(false, ["project", "name"]), ctx, "h").write("?</div>");} return body_0 2 browser CDN 27 Wednesday, 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> APP 1 CDN JS template function body_0(chk, ctx) {return chk.write("<div>Do you have a URL for project").reference(ctx.g etPath(false, ["project", "name"]), ctx, "h").write("?</div>");} return body_0 2 browser CDN 3 <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 Engine dust.js 28 Wednesday, June 19, 13

The Delightful Parts... 29 Wednesday, June 19, 13

Developer Velocity Uniﬁcation JSON 30 Wednesday, June 19, 13

Open-source Portable browser and server Performance Uniﬁcation JSON Dust Developer
Velocity 31 Wednesday, June 19, 13

Rapid- iteration with Mock JSON and JS Open-source Portable browser
and server Performance Uniﬁcation JSON JSON + Dust Dust Developer Velocity 32 Wednesday, June 19, 13

People You May Know 34 Wednesday, June 19, 13

The new Proﬁle 36 Wednesday, June 19, 13

Proﬁle Inline Edit 38 Wednesday, June 19, 13

The Inﬂuencers 39 Wednesday, June 19, 13

The Channels 42 Wednesday, June 19, 13

Who Viewed My Proﬁle 44 Wednesday, June 19, 13

The Uniﬁed Search 46 Wednesday, June 19, 13

Emails 48 Wednesday, June 19, 13

> 50% of the site trafﬁc now serving JSON +
{dust} 49 Wednesday, June 19, 13

one-click actions 2013 web-experience Simpliﬁed design Visually rich engaging 50
Insightful JS heavy more unique visitors Wednesday, June 19, 13

Web-Performance depends on What we measure ? 52 metrics such
as page on-load, TTFB, page-size, start-render Wednesday, June 19, 13

Web-Performance depends on How we measure ? 53 sampling %,
use cases Wednesday, June 19, 13

Web-Performance depends on Where we measure ? 54 across geo,
different browsers Wednesday, June 19, 13

Web-Performance depends on Whom do we measure ? 55 real
users, keynote, gomez Wednesday, June 19, 13

We measure real-time using RUM for real-users 100% of requests
top pages across continents known browsers. 56 Wednesday, June 19, 13

What is the story of Dust and web-performance then ?

58 without {dust} with {dust} & client-rendering Who Viewed My
Proﬁle Wednesday, June 19, 13

Performance of client-rendering comparable to server-side rendering for PYMK except
for IE7 ! 59 Wednesday, June 19, 13

60 without {dust} Wednesday, June 19, 13

with {dust} & client-rendering 61 without {dust} client-render = (onload
– first byte time) TTFB and Time to Paint Wednesday, June 19, 13

http://blog.linkedin.com/wp-content/uploads/ 2012/10/proﬁle20.png 63 Wednesday, June 19, 13

Symptoms we saw with Client-side rendering with traditional metrics 64

Certain browsers and geo, on-load time miserable • Too many
{dust} templates, slow parsing, blocking • Slow JSON parsing on the IE browsers • Sub-optimal Dust JS helpers 65 Wednesday, June 19, 13

JSON payload size high • Heavy JSON payloads from long
key names and repetitions in the JSON • Easy to send more data than what the template needs 66 { “i18n_text_plain_0_renders_the_connection_count : “Your are connected to 4 users”, “ﬁrst” : “Alfred”, “last” : “Willis”, “fullName” : “ Alfred Willis” } Hello {fullName} {i18n_text_plain_0_renders_the_connection_count} Long JSON keys Wednesday, June 19, 13

More {dust} means more http-requests • Dust supports dynamic, async
template loading, does not scale • Slow CDN combined with high browser cache-miss across different geo, particularly bad in Asia-paciﬁc , India 67 Wednesday, June 19, 13

Solution Optimize for the above the fold & Use server-side
JS engine for slow browsers and geo 68 Wednesday, June 19, 13

69 #1 Split the Monolithic page to Embeds 1 2
3 4 5 Wednesday, June 19, 13

70 But wait…there’s more! But wait, there is more to
it... Wednesday, June 19, 13

71 Deferred Rendering OR Deferred Fetch #2 Defer below the
fold embeds Wednesday, June 19, 13

Reduce latency • # 1 Embeds instead of monolithic, ﬂush
early • # 2 Defer rendering below the fold content • # 3 Server-side render for slow user-agents and geo regions 72 Reduce JSON size • # 1 Defer fetching below the fold JSON • # 2 Pre-prod payload lint tooling • # 3 Localized strings served via CDN cache Reduce http-requests, increase caching • # 1 Build-time dependency list instead of dynamic, async loading on above the fold • # 2 Early ﬂush the templates for above the fold Wednesday, June 19, 13

73 Deferred rendering &` fetch Deferred Image JSON payload reduction

Rapid-iteration with Mock JSON and JS Open-source Portable browser and
server Performance Uniﬁcation JSON JSON + Dust Dust Developer Velocity 75 Wednesday, June 19, 13

ß Rapid-iteration with Mock JSON and JS Open-source Portable browser
and server Performance Uniﬁcation JSON JSON + Dust Dust Site Speed 76 Site-Speed Lean payload server JS-engine Measure for engagement Improve dust.js Wednesday, June 19, 13

Performance is also User Perception and Engagement. 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 Steps 78 •Invest more in open-source for improving performance,
dust.js and V8 •Enforce leaner JSON payload size •Prefetching resources for certain use cases such as search •Evolve with the new web-standards •Move to faster CDNs across geo •Invest in intelligent ways to co-relate Wednesday, June 19, 13

The Core Team @ LinkedIn 79 Questions!! http://linkedin.github.io/dustjs/ Meet the
team Ofﬁce Hours next @ Exhibit Hall (Table 2) Veena Basavaraj Eran Leshem Baq Haidri Brian Geffon John Bernado Wednesday, June 19, 13

Dust and web-performance at LinkedIn

Dust and web-performance at LinkedIn

More Decks by Veena Basavaraj

Other Decks in Technology

Featured

Transcript