In 2011, LinkedIn adopted dust.js. This is the story of client side templating at massive scale.

1. { dust.js } at LinkedIn
Yevgeniy Brikman

2. 2011: LinkedIn adopted dust.js, a
client side templating language

3. This is the story of client side
templating at massive scale

4. Dust in the wild
Profile 2.0

5. Dust in the wild
People You May Know

6. Dust in the wild
Influencers

7. About me
Presentation Infrastructure Team
(also Hackdays, [in]cubator, Engineering Blog, Open Source)

8. Outline
1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future

9. Outline
1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future

10. LinkedIn in 2003
A single, monolithic webapp: servlets/JSPs

11. LinkedIn in 2010
New web frameworks to boost productivity:
Grails/GSPs, JRuby/ERBs, plus others

12. Fragmentation
● Each tech stack used a different templating
technology (JSP, GSP, ERB, etc)
● No easy way to share UI code for common
components (e.g. profile, the feed)
● The "global" nav had to be rewritten in
multiple languages/technologies. Updating it
was very time consuming.

13. We needed to unify the view layer

14. Outline
1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future

15. We began looking at client side
templating solutions

16. Traditional server side rendering
All page content is rendered as HTML and sent to the browser

17. Client side rendering (simplified)
Server sends JSON. The template is fetched from the CDN and
rendered in browser.

18. Client side rendering (full)
Server sends JSON embedded in an HTML skeleton. The skeleton
has JavaScript code that fetches and renders the template.

19. Client side MVC
Client side MVC makes client side rendering even more important.

20. Client side rendering (with MVC)
Once a page has loaded, the client side MVC takes over, fetching
JSON from the server and rendering it with client side templates

21. Client side rendering benefits
● DRY: works with any server side stack plus
client side
● Performance: bandwidth, latency, caching
● Productivity: fast iteration, mock JSON
● Rich apps: client side MVC

22. Outline
1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future

23. Decisions, decisions
We evaluated 26 different options. They tended to fall into one of
two groups: Embedded JavaScript and Logic Less.

24. Embedded JavaScript Templates
<ul>
<% for(var i = 0; i < supplies.length; i ++) { %>
<li><%= supplies[i] %> </li>
<% } %>
</ul>
Normal JavaScript code directly in the template.

25. Embedded JavaScript Templates
● underscore.js
● Jade
● haml-js
● jQote2
● doT
● Stencil
● Parrot
● Eco
● EJS
● jQuery templates
● node-asyncEJS

26. Logic-less Templates
<p>
Hello {name}! You have {count} new messages.
</p>
Custom template language that limits logic

27. Embedded JavaScript Templates
● mustache
● dust.js
● handlebars
● Google Closure Templates
● Nun
● Mu
● kite

28. The test
Render a simplified LinkedIn profile

29. The rules
● Produce this HTML output
● Use this profile JSON as input
● The same template should render on the server-side
and client-side
● Properly handle profile data display rules
● Format numbers and dates correctly

30. The criteria
● DRY
● i18n
● Hot reload
● Performance
● Ramp-up time
● Ramped-up productivity
● Server/client support
● Community
● Library agnostic
● Testable
● Debuggable
● Editor support
● Maturity
● Documentation
● Code documentation

31. Criteria are just guidelines;
not all are weighted equally.

32. The finalists

33. Google Closure Templates
Pros
● Templates are compiled into JavaScript for client-side and Java for server-
side.
● Good built-in functionality: loops, conditionals, partials, i18n.
● Documentation is enforced by the template.
Cons
● Very little usage outside of Google. No plans to push new versions or
accept new contributions.
● Some functionality is missing, such as being able to loop over maps.
● Not DRY: adding new functionality requires implementing plugins in both
Java and JavaScript.

34. Mustache
Pros
● Very popular choice with a large, active community.
● Server side support in many languages, including Java.
● Logic-less templates do a great job of forcing you to separate presentation
from logic.
● Clean syntax leads to templates that are easy to build, read, and maintain.
Cons
● A little too logic-less: basic tasks (e.g. label alternate rows with different
CSS classes) are difficult.
● View logic is often pushed back to the server or implemented as a
"lambda" (callable function).
● For lambdas to work on client and server, you must write them in
JavaScript.
● Slow, interpreted templates

35. Handlebars
Pros
● Logic-less templates do a great job of forcing you to separate presentation
from logic.
● Clean syntax leads to templates that are easy to build, read, and maintain.
● Compiled rather than interpreted templates.
● Better support for paths than mustache (ie, reaching deep into a context
object).
● Better support for global helpers than mustache.
Cons
● Requires server-side JavaScript to render on the server.

36. Dust.js
Pros
● Logic-less templates do a great job of forcing you to separate presentation
from logic.
● Clean syntax leads to templates that are easy to build, read, and maintain.
● Compiled rather than interpreted templates.
● Better support for paths than mustache (ie, reaching deep into a context
object).
● Better support for global helpers than mustache.
● Inline parameters.
● Blocks & inline partials.
● Overriding contexts.
● Support for asynchronous rendering and streaming.
● Composable templates.
Cons
● Requires server-side JavaScript to render on the server.
● Maintainer of github repo is not responsive.

37. Spoiler alert!

38. dust.js won

39. Takeaways
● Based on how we weighed our criteria, Dust
fit our needs the best
● Use real use cases and identify the most
important criteria to you
● For non-trivial views, no templating option
works on client and server, unless your
server executes JavaScript (v8, Rhino)

40. Outline
1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future

41. The LinkedIn Fork
● The original maintainer abandoned dust
● The LinkedIn fork is now the most active
● We've added bug fixes, perf improvements,
and helpers

42. Try it out
● Homepage:
http://linkedin.github.com/dustjs/
● Try it in the browser: http://linkedin.github.
com/dustjs/test/test.html
● Source code: https://github.
com/linkedin/dustjs

43. (demo)

44. Outline
1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future

45. How do you handle view logic?

46. Yes, there is such a thing as view logic
and it's separate from business logic

47. Complicated
Logic logic
Logic

48. Homework assignment: implement
this view with a truly logic-less
template (no helpers/lambdas!)

49. Helpers to the rescue: @eq, @ne
{@eq key="foo" value="foo"}The key and value are equal!{/ eq}
{@ne key="foo" value="bar"}The key and value are not equal!{/ ne}

50. Helpers to the rescue: @gt, @lt
{@gt key="22" value="3"}22 is greater than 3{/ gt}
{@lt key="0" value="500"}0 is less than 500{/ lt}

51. Helpers to the rescue: @select
{@select key=age}
{@eq value="1"}Baby{/eq}
{@lt value="10"}Child{/lt}
{@lt value="18"}Teen{/lt}
{@default}Adult{/default}
{/select}

52. Helpers to the rescue: @size, @math
You have {@ size key=list/} new messages
{@math key="16" method="add" operand="4"/}

53. Full library of helpers is available at:
https://github.com/linkedin/dustjs-helpers

54. How do we handled clients without
JavaScript? What about SEO?

55. SSR: Server Side Rendering
● Google V8 engine
● A plugin for Apache Traffic Server
● Executes arbitrary JavaScript server side,
including rendering dust templates
● Often nicknamed Unified Server Side
Rendering... aka, USSR

56. Client side rendering (full, SSR)
The HTML Skeleton is written in dust. SSR renders it as HTML.

57. SSR uses
● Render dust skeleton into HTML skeleton
● Render everything server side for:
○ Crawlers/bots/search engines
○ Clients without JavaScript
○ Slow clients (IE < 8)
● Logic less templates help ensure that
everything renders correctly server-side. No
DOM dependencies!

58. What about i18n? Formatting? URLs?

59. Server side templates
<p>
<a href="${url.link( 'home-page' }">$!{i18n('hello-world' )}</a>
</p>
In JSPs, Java libraries did i18n, text formatting, URL generation

60. Sending an entire i18n dictionary,
URL dictionary, and all formatting
code to the browser is expensive

61. Option #1: everything server side
Java controller
json.put("name", "Jim");
json.put("home-page-link" , Url.link("home-page" ));
json.put("hello-world-text" , I18n.get("hello-world" ));
render("profile-page" , json);
profile-page dust template
<p>
<a href="{home-page-link} ">{hello-world-text} </a>
</p>
All i18n, text formatting, and URL generation is done server side
and added to the JSON payload

62. Option #1: everything server side
Pros
● Simple, easy to understand
● Clean templates
Cons
● Controller code cluttered with view logic

63. Option #2: dynamic pre-processing
Original profile-page dust template
<p>
<a href="{@pre.link key="home-page"}
">{@pre.i18n key="hello-world"}
</a>
</p>
Pre-processed profile-page dust template
<p>
<a href="{link-123}">{i18n-456}</a>
</p>
Step 1: the @pre helper tags get replaced at build time with
references to unique keys in the JSON

64. Option #2: dynamic pre-processing
Java controller
json.put("name", "Jim");
render("profile-page" , json);
Pre-processed JSON
{
"name": "Jim",
"link-123" : "http://www.linkedin.com" ,
"i18n-456" : "Hello World"
}
Step 2: whenever profile-page is rendered, automatically
"enhance" the JSON with the requested i18n and URL values

65. Option #2: dynamic pre-processing
Pros
● All view logic is in the templates
● Clean server side code
Cons
● Complicated, hard to debug
● Tight coupling: need special server and build
logic to use templates
● Performance: increased JSON payload
and/or more server processing time

66. Option #3: static pre-processing
Original profile-page dust template
<p>
<a href="{home-page-link}">{@i18n}Hello World{/i18n}</a>
</p>
Pre-processed profile-page dust template (one per language)
<p>
<a href="{home-page-link}">Hello World</a>
</p>
<p>
<a href="{home-page-link}">Bonjour monde</a>
</p>
Generate one template per language with translated text already
filled in. Link generation and formatting still happen server-side.

67. Option #3: static pre-processing
Pros
● Hybrid approach: i18n is in the templates,
only formatting/link generation is in controller
● Simpler, easier to debug than dynamic pre-
processing
Cons
● Custom build process
● Increased template payload, but i18n strings
now cached with template

68. Outline
1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future

69. LinkedIn in 2013
We now many services using client side rendering and
many using server-side rendering

70. A full rewrite is too expensive

71. Fizzy: Composable UI

72. Fizzy
Fizzy is an ATS plugin that reads the HTML (skeleton or
full) returned by webapps

73. Fizzy
<html>
<body>
<h1>Composable UI </h1>
<script type="fs/embed" fs-uri="/news-feed/top" ></script>
<script type="fs/embed" fs-uri="/pymk"></script>
<script type="fs/embed" fs-uri="/ad"></script>
</body>
</html>
If Fizzy finds an fs/embed in the HTML, it calls the URI and injects
the response into the page.

74. Fizzy
HTML skeleton
Embed
Embed
Embed
A page now consists of a skeleton with a bunch of Fizzy-
processed embeds.

75. Deferred rendering

76. Typical page
HTML Skeleton
Dust
template
Dust template
Dust
template
Dust template Dust
template
Dust template

77. Typical page
HTML Skeleton
Dust
template
Dust template
Dust
The fold template
Dust template Dust
template
Dust template
On initial page load, the user doesn't see anything below the fold

78. Typical page
HTML Skeleton
Dust
template
Dust template
Dust
The fold template
Dust template Dust
template
No need
to render Dust template
No need to fetch
data or render

79. Deferred rendering
● Dramatically improve performance by not
rendering anything below the fold
● Improve it even further by not fetching the
data for things far out of view
● The challenge: the fold is at different
positions on different devices

80. Outline
1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future

81. Final thoughts
● Dust.js has improved developer productivity and code
sharing at LinkedIn
● Client side templating offers powerful new capabilities
and benefits
● It also introduces tough new challenges
● It's an evolving technology; now is a good time to get
involved

82. Questions?