velocity dust

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

Upload: veena-basavaraj

Post on 28-Jan-2015

147 views

Category:

Technology


2 download

DESCRIPTION

Our experience of using dust at scale.

TRANSCRIPT

Page 1: Velocity dust

The Curious case of Dustjs &

web-performance

1

Wednesday, June 19, 13

Page 2: Velocity dust

Across 15 countries supporting 19 languages &

growing2

Wednesday, June 19, 13

Page 3: Velocity dust

•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

Page 4: Velocity dust

•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

Page 5: Velocity dust

What is the story of Dust

at LinkedIn ?

5

Wednesday, June 19, 13

Page 6: Velocity dust

Web - experience

full-page-refresh

lack-of one-click actions

complex-navigation-flows

Visually boring

dis-engaging

6

Wednesday, June 19, 13

Page 7: Velocity dust

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

Page 8: Velocity dust

Our answer to this problem

8

Wednesday, June 19, 13

Page 9: Velocity dust

1. Unify by enabling the web-applications

to serve JSON

JSONbrowser

grails jruby java

9

Wednesday, June 19, 13

Page 10: Velocity dust

2. Build a high-performingweb-proxy layer

to do common things

10

Wednesday, June 19, 13

Page 11: Velocity dust

Since browser understands HTML, we needed {something}

that transformed JSON ==> HTML

JSON + {something}

browser

grails jruby java

HTML

11

Wednesday, June 19, 13

Page 12: Velocity dust

Another interesting change was happening across the

web-community

12

Wednesday, June 19, 13

Page 13: Velocity dust

single-page-appsclient-templates

client-MVC

json modelsbackbone.jsunderscore.js

13

Wednesday, June 19, 13

Page 14: Velocity dust

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

14

Wednesday, June 19, 13

Page 15: Velocity dust

A common theme we noticed, JSON

and client-templates

15

Wednesday, June 19, 13

Page 16: Velocity dust

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

16

Wednesday, June 19, 13

Page 17: Velocity dust

JSON + {js-template} ==> HTML

JSON

browser

jruby java

JS-template

CDN

17

Wednesday, June 19, 13

Page 18: Velocity dust

We chose Dustjs

open-source javascript template library

18

Wednesday, June 19, 13

Page 19: Velocity dust

•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

Page 20: Velocity dust

The Good Parts

ops : operations per second

http://linkedin.github.io/dustjs/benchmark/index.html

20

Wednesday, June 19, 13

Page 21: Velocity dust

The Good Parts...

The same {dust}template can be rendered

either on the browser or on the server

21

Wednesday, June 19, 13

Page 22: Velocity dust

The Good Parts...

On the server we have many options

22

Wednesday, June 19, 13

Page 23: Velocity dust

We use engine in the web-proxy

browser

jruby java Templates

HTML

JSON

V8 JS engine

JSON Dust

23

Wednesday, June 19, 13

Page 24: Velocity dust

Lets look at some code!

24

Wednesday, June 19, 13

Page 25: Velocity dust

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

Page 26: Velocity dust

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

Page 27: Velocity dust

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

Page 28: Velocity dust

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

Page 29: Velocity dust

The Delightful Parts...

29

Wednesday, June 19, 13

Page 30: Velocity dust

Developer Velocity

Unification

JSON

30

Wednesday, June 19, 13

Page 31: Velocity dust

Open-source

Portable browser and server

Performance

Unification

JSON

Dust

Developer Velocity

31

Wednesday, June 19, 13

Page 32: Velocity dust

Rapid-iterationwithMock JSON and JS

Open-source

Portable browser and server

Performance

Unification

JSON

JSON + Dust

Dust

Developer Velocity

32

Wednesday, June 19, 13

Page 33: Velocity dust

•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

Page 34: Velocity dust

People You May Know

34

Wednesday, June 19, 13

Page 35: Velocity dust

35

Wednesday, June 19, 13

Page 36: Velocity dust

The new Profile

36

Wednesday, June 19, 13

Page 37: Velocity dust

37

Wednesday, June 19, 13

Page 38: Velocity dust

Profile Inline Edit

38

Wednesday, June 19, 13

Page 39: Velocity dust

The Influencers

39

Wednesday, June 19, 13

Page 40: Velocity dust

40

Wednesday, June 19, 13

Page 41: Velocity dust

41

Wednesday, June 19, 13

Page 42: Velocity dust

The Channels

42

Wednesday, June 19, 13

Page 43: Velocity dust

43

Wednesday, June 19, 13

Page 44: Velocity dust

Who Viewed My Profile

44

Wednesday, June 19, 13

Page 45: Velocity dust

45

Wednesday, June 19, 13

Page 46: Velocity dust

The Unified Search

46

Wednesday, June 19, 13

Page 47: Velocity dust

47

Wednesday, June 19, 13

Page 48: Velocity dust

Emails

48

Wednesday, June 19, 13

Page 49: Velocity dust

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

49

Wednesday, June 19, 13

Page 50: Velocity dust

one-click actions

2013 web-experience

Simplified design

Visually rich

engaging

50

InsightfulJS heavy

more unique visitors

Wednesday, June 19, 13

Page 51: Velocity dust

•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

Page 52: Velocity dust

Web-Performance depends on

What we measure ?

52

metrics such as page on-load, TTFB,

page-size, start-render

Wednesday, June 19, 13

Page 53: Velocity dust

Web-Performance depends on

How we measure ?

53

sampling %, use cases

Wednesday, June 19, 13

Page 54: Velocity dust

Web-Performance depends on

Where we measure ?

54

across geo, different browsers

Wednesday, June 19, 13

Page 55: Velocity dust

Web-Performance depends on

Whom do we measure ?

55

real users, keynote, gomez

Wednesday, June 19, 13

Page 56: Velocity dust

We measure real-time using RUM for real-users

100% of requests top pages

across continents known browsers.

56

Wednesday, June 19, 13

Page 57: Velocity dust

What is the story of Dust and

web-performance then ?

57

Wednesday, June 19, 13

Page 58: Velocity dust

58

without {dust} with {dust} & client-rendering

Who Viewed My Profile

Wednesday, June 19, 13

Page 59: Velocity dust

Performance of client-rendering comparable to server-side rendering

for PYMK except for IE7 !

59

Wednesday, June 19, 13

Page 60: Velocity dust

60

without {dust}

Wednesday, June 19, 13

Page 61: Velocity dust

with {dust} & client-rendering

61

without {dust}

client-render = (onload – first byte time)

TTFB and Time to Paint

Wednesday, June 19, 13

Page 62: Velocity dust

•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

Page 64: Velocity dust

Symptoms we saw with Client-side rendering with

traditional metrics

64

Wednesday, June 19, 13

Page 65: Velocity dust

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

Page 66: Velocity dust

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

Page 67: Velocity dust

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

Page 68: Velocity dust

Solution Optimize for the above the fold

&Use server-side JS engine for slow

browsers and geo

68

Wednesday, June 19, 13

Page 69: Velocity dust

69

#1 Split the Monolithic page to Embeds

1

2

3

4

5

Wednesday, June 19, 13

Page 70: Velocity dust

70

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

Wednesday, June 19, 13

Page 71: Velocity dust

71

Deferred Rendering

OR

Deferred Fetch

#2 Defer below the fold embeds

Wednesday, June 19, 13

Page 72: Velocity dust

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

Page 73: Velocity dust

73

Deferred rendering &`

fetch

Deferred Image

JSON payload reduction

Wednesday, June 19, 13

Page 74: Velocity dust

•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

Page 75: Velocity dust

Rapid-iterationwithMock JSON and JS

Open-source

Portable browser and server

Performance

Unification

JSON

JSON + Dust

Dust

Developer Velocity

75

Wednesday, June 19, 13

Page 76: Velocity dust

ß

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

Page 77: Velocity dust

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

Page 78: Velocity dust

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

Page 79: Velocity dust

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