The Curious case of Dustjs &
web-performance
1
Wednesday, June 19, 13
Across 15 countries supporting 19 languages &
growing2
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
•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
4
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-flows
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 technologiesLI-JSP
JRubyGrails
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
JSONbrowser
grails jruby java
9
Wednesday, June 19, 13
2. Build a high-performingweb-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-appsclient-templates
client-MVC
json modelsbackbone.jsunderscore.js
13
Wednesday, June 19, 13
Our intent was not to build client-MVC apps yet, but...
14
Wednesday, June 19, 13
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
Wednesday, June 19, 13
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
22
Wednesday, June 19, 13
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(ctx.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.getPath(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.getPath(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
Unification
JSON
30
Wednesday, June 19, 13
Open-source
Portable browser and server
Performance
Unification
JSON
Dust
Developer Velocity
31
Wednesday, June 19, 13
Rapid-iterationwithMock JSON and JS
Open-source
Portable browser and server
Performance
Unification
JSON
JSON + Dust
Dust
Developer Velocity
32
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
33
Wednesday, June 19, 13
People You May Know
34
Wednesday, June 19, 13
35
Wednesday, June 19, 13
The new Profile
36
Wednesday, June 19, 13
37
Wednesday, June 19, 13
Profile Inline Edit
38
Wednesday, June 19, 13
The Influencers
39
Wednesday, June 19, 13
40
Wednesday, June 19, 13
41
Wednesday, June 19, 13
The Channels
42
Wednesday, June 19, 13
43
Wednesday, June 19, 13
Who Viewed My Profile
44
Wednesday, June 19, 13
45
Wednesday, June 19, 13
The Unified Search
46
Wednesday, June 19, 13
47
Wednesday, June 19, 13
Emails
48
Wednesday, June 19, 13
> 50% of the site traffic now serving JSON + {dust}
49
Wednesday, June 19, 13
one-click actions
2013 web-experience
Simplified design
Visually rich
engaging
50
InsightfulJS heavy
more unique visitors
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
51
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 ?
57
Wednesday, June 19, 13
58
without {dust} with {dust} & client-rendering
Who Viewed My Profile
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
•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
62
Wednesday, June 19, 13
http://blog.linkedin.com/wp-content/uploads/2012/10/profile20.png
63
Wednesday, June 19, 13
Symptoms we saw with Client-side rendering with
traditional metrics
64
Wednesday, June 19, 13
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”,“first” : “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-pacific , 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, flush 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 flush the templates for above the fold
Wednesday, June 19, 13
73
Deferred rendering &`
fetch
Deferred Image
JSON payload reduction
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
74
Wednesday, June 19, 13
Rapid-iterationwithMock JSON and JS
Open-source
Portable browser and server
Performance
Unification
JSON
JSON + Dust
Dust
Developer Velocity
75
Wednesday, June 19, 13
ß
Rapid-iterationwithMock JSON and JS
Open-source
Portable browser and server
Performance
Unification
JSON
JSON + Dust
Dust
Site Speed
76
Site-Speed
Lean payload
server JS-engineMeasure forengagement
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 Office Hours next
@ Exhibit Hall (Table 2)
Veena Basavaraj Eran Leshem Baq Haidri Brian Geffon John Bernado
Wednesday, June 19, 13