The Curious case of Dustjs
Transcript of The Curious case of Dustjs
•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
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
1. Unify by enabling the web-applications
to serve JSON
JSONbrowser
grails jruby java
9
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
single-page-appsclient-templates
client-MVC
json modelsbackbone.jsunderscore.js
13
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
We use engine in the web-proxy
browser
jruby java Templates
HTML
JSON
V8 JS engine
JSON Dust
23
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
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
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
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
Performance of client-rendering comparable to server-side rendering
for PYMK except for IE7 !
59
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
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
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
•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