Velocity dust

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

Across 15 countries
supporting 19 languages &
growing
2

•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

Outline
4

What is the story of
Dust
at
LinkedIn ?
5

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

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

Our answer to this
problem
8

1. Unify by enabling
the web-applications
to serve JSON
JSON
browser
grails jruby java
9

2. Build a high-performing
web-proxy layer
to do common things
10

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

Another interesting change
was happening across the
web-community
12

single-page-apps
client-templates
client-MVC
json models
backbone.js
underscore.js
13

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

A common theme we
noticed,
JSON
and
client-templates
15

{client-templates} === {js-templates}
16

JSON + {js-template} ==> HTML
JSON
browser
jruby java
JS-template
CDN
17

We chose Dustjs
open-source
javascript template library
18

•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

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

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

We use engine
in the web-proxy
browser
jruby java Templates
HTML
JSON
V8 JS engine
JSON Dust
23

Lets look at some code!
24

HTML Skeleton
JSON
embedded
in the
skeleton
<html>
<head>
<script type=”text/javascript”
src=”dust.js”/>
src=”tl/profile/view.dst”/>
</head>
<body>
dust.render(‘{
“project” : {
“name” : {
“The New LinkedIn Profile?”
}
}’, ‘tl/profile/view’, ...);
</body>
</html>
APP
1
25

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

JSON
<html>
<head>
<script src=”dust.js”/>
src=”tl/profile/view”/>
</head>
<body>
dust.render (‘{
“project” : {
“name” : {
}
</body>
</html>
APP
1
CDN
JS
template
function body_0(chk, ctx)
{return
have a URL for
project").reference(ctx.g
etPath(false, ["project",
"name"]), ctx,
"h").write("?</div>");}
return body_0
2
browser
CDN
27

JSON
<html>
<head>
<script src=”dust.js”/>
</head>
<body>
dust.render (‘{
“project” : {
“name” : {
}
</body>
</html>
APP
1
CDN
JS
template
function body_0(chk, ctx)
{return
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>
src=”dust.js”/>
</head>
<body> <div>
Do you have a URL for project
</div>
</body>
</html>
JS Engine
dust.js
28

The Delightful Parts...
29

Developer Velocity
Uniﬁcation
JSON
30

Open-source
Portable
browser and
server
Performance
Uniﬁcation
JSON
Dust
Developer Velocity
31

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

Outline
33

People You May Know
34

The new Proﬁle
36

Proﬁle Inline Edit
38

The Inﬂuencers
39

The Channels
42

Who Viewed My Proﬁle
44

The Uniﬁed Search
46

Emails
48

> 50% of the site trafﬁc now serving
JSON + {dust}
49

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

Outline
51

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

How we measure ?
53
sampling %, use cases

Where we measure ?
54
across geo, different
browsers

Whom do we measure ?
55
real users, keynote, gomez

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

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

58
without {dust} with {dust} & client-rendering
Who Viewed My Proﬁle

Performance of client-rendering
comparable to server-side rendering
for PYMK except for IE7 !
59

60
without {dust}

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

Outline
62

http://blog.linkedin.com/wp-content/uploads/
2012/10/proﬁle20.png
63

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

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

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

Solution
Optimize for the above the fold
&
Use server-side JS engine for slow
browsers and geo
68

69
#1 Split the Monolithic page to Embeds
1
2
3
4
5

70
But wait…there’s more!
But wait, there is more to it...

71
Deferred Rendering
OR
Deferred Fetch
#2 Defer below the fold embeds

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

73
Deferred
rendering &`
fetch
Deferred
Image
JSON payload
reduction

Outline
74

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

ß
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 forengagement
Improve dust.js

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.

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

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

Velocity dust

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Velocity dust

Ähnlich wie Velocity dust (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Velocity dust