the curious case of dustjs

The Curious case of Dustjs &

web-performance

1

Wednesday, June 19, 13

Across 15 countries supporting 19 languages &

growing2


•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-flows

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 technologiesLI-JSP

JRubyGrails

DWR YUI

How to build for mobile?

7


Our answer to this problem

8


1. Unify by enabling the web-applications

to serve JSON

JSONbrowser

grails jruby java

9


2. Build a high-performingweb-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-appsclient-templates

client-MVC

json modelsbackbone.jsunderscore.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”/><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


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


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


2

browser

CDN

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>

APP

1

CDN

JS

template


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


The Delightful Parts...

29


Developer Velocity

Unification

JSON

30


Open-source

Portable browser and server

Performance

Unification

JSON

Dust

Developer Velocity

31


Rapid-iterationwithMock JSON and JS

Open-source


Performance

Unification

JSON

JSON + Dust

Dust

Developer Velocity

32







Outline

33


People You May Know

34


35


The new Profile

36


37


Profile Inline Edit

38


The Influencers

39


40


41


The Channels

42


43


Who Viewed My Profile

44


45


The Unified Search

46


47


Emails

48


> 50% of the site traffic now serving JSON + {dust}

49


one-click actions

2013 web-experience

Simplified design

Visually rich

engaging

50

InsightfulJS 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 Profile


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/profile20.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”,“first” : “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-pacific , 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, 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


73

Deferred rendering &`

fetch

Deferred Image

JSON payload reduction







Outline

74



Open-source


Performance

Unification

JSON

JSON + Dust

Dust

Developer Velocity

75


ß


Open-source


Performance

Unification

JSON

JSON + Dust

Dust

Site Speed

76

Site-Speed

Lean payload

server JS-engineMeasure 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 Office Hours next

@ Exhibit Hall (Table 2)

Veena Basavaraj Eran Leshem Baq Haidri Brian Geffon John Bernado


http://linkedin.github.io/dustjs/

http://linkedin.github.io/dustjs/

the curious case of dustjs

Documents