1. Leaving
jsps in the dust
@vybs

2. We are pi@linkedIn

3. front-end
infrastructure

4. Goal(s)

5. Site-Scale + Site-Speed
In the beginning...

6. What is the Problem?

7. Site-Scale Developer
Velocity
Site-Speed
But...

8. Simple things should be
dead easy

9. Build Quick, Iterate More

10. front-end infrastructure
now became....

11. Grails Jruby Node.js
Static Vs Dynamic

12. Anyone notice a bad
pattern?

13. Do once, Do the same
twice, Do the same
thrice...!

14. How does this work
effectively in mobile?

15. Still building heavy pages
not apps

16. We created a few more
problems indeed!

17. How did we solve them?

18. Unification
• Javascript Templates, CDN caching
• Write once
• JSON for data
• One Standard
• Event-ed Server as JSON Aggregator + JS
V8 engine
• Scale once

19. JavaScript templates
• Evaluated tons, handlebars, dust, mustache
• Good: Simple, less logic, 4KB, precompiled
to javascript, performance is a feature
• Bad: None are mature enough, i18n/
formatters not out of the box

20. _t = “Hello {name}! json = {
You have {count} new "name": ”James",
messages from "count": 2,
{#people} “people” : [{ “name” : “Jim”,
{name}, “distance” : “2”
{/people} },{ “name”: ”Eran”
”; “distance” : “1”}
]
}
!dust.render(_t, json, function(error, data) {!
$(“mydiv”).html(data);!
}!
Hello James! You have 2 new
messages from Jim, Eran!

21. Dust - *less logic
• Simple, DRY
• loops, conditionals, partials, inheritance
{#people}
{>”/path/degree_icon_{distance}”/}
{/people}

22. Dust
• Client Helpers for extensions, reusability
• Rendering logic, math, i18n
• @if, @select, @lte, @ceil, @i18n,
@form
{#people}
<li class="card
{@select key=“distance”}
{@lte value=“1”/} {@i18n text=“first degree”/}
{@gt value=“1”/} {@i18n text=“second degree”/}
{/select}
</li>
{/people}

23. ! on client
• Server side precompiled to JS
• Rendering times on client snappy

24. ! on client
• Server side processed helper tags
• auto-generate template dependencies
{#people}
{“>degree_icon”/}
{/people}

25. ! on client
• Dust Preprocessed helper tags
• leverage JVM based i18n, formatting and A/B
testing
• creates template driven, context based JSON
Server Source template
{#people}
{@ss.fmt key=”fmt_name” type=“name” value=”{name}”/}
{/people}
“people” : [{ “name” : “Joe Jada”,
Client template/ js “fmt_name” : “Joe J”,
{#people} uses “distance” : “2”
},{ “name”: ”Jade Pink”
{fmt_name} “fmt_name” : “Jade P”,
{/people} “distance” : “1”}
]
}

26. ! on client
• No javascript, SEO pages
• Seamless rendering of dust on the server using
V8

27. Browser CDN caching
content delivery
linkedin.com
UI /JSON Aggregator
Static Assets static content
V8 js, css, templates
apps Page Module Module
data layer JSON JSON JSON

28. linkedin.com/people/pymk

29. we dust!
https://github.com/linkedin/dustjs
https://github.com/linkedin/Lu
https://github.com/linkedin/inject