2. Curious about?
• Is logic-less working for us?
• Are we DRY?
• How much on the client?
• Really? is it more than just a blog post?
Show me the proof
Wednesday, July 11, 12
5. • “Dust is a JavaScript templating
engine designed to provide a clean
separation between presentation and
logic without sacrificing ease of use”
• “A pure JavaScript library, Dust runs
in both browser-side and server-side
environments.”
Wednesday, July 11, 12
10. 1. Dust Keys
references in JSON
Hello {name}!
You have {count} messages
from
{#people}
{name},
{/people}
2. Dust Sections
create a block for enumeration,
transformations
Wednesday, July 11, 12
17. BADGE localized
ENGLISH
TURKEY
PORTUGUESE
JAPANESE
Wednesday, July 11, 12
18. How do we solve this simple use
case?
Wednesday, July 11, 12
19. Dust helpers
• Macro tags to the rescue, can be written
once, hence support DRY
• Takes params and executes in the context
they are declared
• uses the @ notation
Wednesday, July 11, 12
21. Helper code
https://raw.github.com/linkedin/dustjs/master/lib/dust-
helpers.js
Wednesday, July 11, 12
22. Curious about?
• Is logic-less working for us?
• Are we DRY?
• How much on the client?
• Really? is it more than just a blog post?
show me the proof
Wednesday, July 11, 12
23. Lets solve the badge
differently!
Wednesday, July 11, 12
24. Dust Partials
• Nested templates, have access to the
scope of the parent template
• Takes params and uses the “>” notation
• Partial names can be dynamic
Wednesday, July 11, 12
26. “Partial” as a Helper
@partial, @jsControl
Wednesday, July 11, 12
27. {#people}
Partial as a helper
{@partial altText=_memberFullName pictureId=primaryPictureID}
{>"tl/shared/member_photo"/}
{/partial} pymk.tl includes member_photo.tl
{/people}
{!
Renders Member's profile photo if pictureId is passed otherwise renders ghost image
@partial member_photo
@param pictureId {string} Id of photo
@param size (Integer) Photo Size (default 40) - Photos are always square, so height and width will be same
@param altText {String} Alt attribute for image
@param className {String} Optional css class name to be added to the image
!}
{@param key="size" defaultVal="40"/}
member_photo.tl
{?pictureId}
<img {?className}class="{className}"{/className} {?altText}alt="{altText}"{/altText}
width="{size}" height="{size}" src='{@pre.link alias="media" args="mediaID:
{pictureId},mprCommand:shrink_{size}_{size}"/}'>
{:else}
<img {?className}class="{className}"{/className} {?altText}alt="{altText}"{/altText}
• local context, expected
width="{size}" height="{size}" src='{@pre.img.link path="/img/icon/icon_no_photo_{size}
x{size}.png"/}'>
{/pictureId}
params, docs
Wednesday, July 11, 12
28. Helper code
https://gist.github.com/3083847
Wednesday, July 11, 12
33. Anatomy of a LI Page
• Page has a Layout
• Layout & Page have one or more Embeds
Wednesday, July 11, 12
34. Profile Page with Embeds
HEADER
Ads embed
WVYP embed
Activity
Feed
embed
Wednesday, July 11, 12
35. Anatomy of a Embed
• Embeds have
• Re-usable Dust Helpers
• Re-usable Dust Partials
• Pages degrade gracefully with embeds
that timeout or error
Wednesday, July 11, 12
36. Page code
{>"layout"/}
{<head}
page specific head {! this is optional !}
{@pre.scss path=”scss/a,scss/b”/}
{/head}
{<body}
page body
<script type="fs/embed" fs-uri="{url-to-embed-endpoint_1}">
</script>
<script type="fs/embed" fs-uri="{url-to-embed-endpoint_2}">
</script>
{/body}
{<foot}
page specific foot {! this is optional !}
{/foot}
Wednesday, July 11, 12
37. Curious about?
• Is logic-less working for us?
• Are we DRY?
• How much on the client?
• Really? is it more than just a blog post?
show me the proof
Wednesday, July 11, 12
40. How much not on the
client?
Wednesday, July 11, 12
41. ! on client
• Server side precompiled to JS
• Rendering times on client snappy
// CDN cached template to js
(function(){dust.register(null,body_0);function
body_0(chk,ctx){return
chk.section(ctx.get("people"),ctx,
{"block":body_1},null);}function body_1(chk,ctx)
{return chk.write("
").reference(ctx.get("label"),ctx,"h").write("
").reference(ctx.get("FMT_AUTO_NAME"),ctx,"h");}
return body_0;})();
Wednesday, July 11, 12
42. ! on client
• Server side processed helper tags
• auto-generate template dependencies
{#people}
{“>tl/shared/badge_{distance}”/}
{/people}
Wednesday, July 11, 12
43. ! on client
• Dust Preprocessed helper tags
• leverage JVM based i18n, formatting and A/B
testing
• creates template driven, context based JSON
Wednesday, July 11, 12
44. Server-side helpers
• Similar to client-helpers, takes params, but
server processed in the context they are
declared
{?pictureId}
<img {?className}class="{className}"{/className} {?altText}alt="{altText}"{/
altText} width="{size}" height="{size}" src='{@pre.link alias="media"
args="mediaID:{pictureId},mprCommand:shrink_{size}_{size}"/}'>
{:else}
<img {?className}class="{className}"{/className} {?altText}alt="{altText}"{/
altText} width="{size}" height="{size}" src='{@pre.img.link path="/img/icon/
icon_no_photo_{size}x{size}.png"/}'>
{/pictureId}
Wednesday, July 11, 12
46. ! on client
• No javascript, SEO pages
• Seamless rendering of dust on the server using
V8
Wednesday, July 11, 12
47. Curious about?
• Is logic-less working for us?
• Are we DRY?
• How much on the client?
• Really? is it more than just a blog
post? show me the proof
Wednesday, July 11, 12
48. Is it more than just a
blog post?
Wednesday, July 11, 12
50. Is it more than just a
blog post?
Wednesday, July 11, 12
51. We will be open about
how we extend and
how we use it.
Wednesday, July 11, 12
52. Seriously, tell me how
it is helping us build
features?
Wednesday, July 11, 12
53. Features
• Data-driven product, 60%-65% of features
we do are displays
• remaining 30-35%
• flows, ajaxy interactions
• writes/deletes
Wednesday, July 11, 12
54. Parallel
web-development
• Logic less templates, language of UX,
web-dev, front-end
• DRY, medium for quicker turn-around
• Mock JSON, language of front-end and
back-end
Wednesday, July 11, 12
55. Ok, tell me which LI
pages are in dust!
Wednesday, July 11, 12
57. We also are...
• Caching templates
• Unifying our stack with Javascript
• Developing for cross-device
• Moving as much as we need, to the client,
move as much as we can to JS
Wednesday, July 11, 12
58. If you watch this presentation backwards,
it’s should be about a normal web-
developers’s life!
Wednesday, July 11, 12
59. we dust!
https://github.com/linkedin/dustjs
Wednesday, July 11, 12