Curious case of Dust

The Curious Case of
Dust
@vybs

Wednesday, July 11, 12

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


Let’ start


How to Dust?


• “Dust is a JavaScript templating
engine designed to provide a clean
separation between presentation and
logic without sacriﬁcing ease of use”

• “A pure JavaScript library, Dust runs
in both browser-side and server-side
environments.”


Ok whatever!


Really, tell me how
it works?


1. Dust for markup 2. JSON for data
_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);!
}! 3. JAVASCRIPT for render

Hello James! You have 2 new
messages from Jim, Eran! 4. HTML


Tell me more!


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


Wait, is that it?


Curious case of logic-less dust

Is logic-less working?


Let’s consider a LI
use case


Use case
Proﬁle Connections Search Results

People You May Know
Member Photo

ICON/BADGE


It is just a badge!


BADGE localized

ENGLISH

TURKEY

PORTUGUESE

JAPANESE


How do we solve this simple use
case?


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


“icon” : {
“distance” : “1”,
“first” : “Bill”,
“last” : “Scott”
{#icon name="Bill Scott"} }
{@if cond="{distance} == 0"}
<span class="network-degree you">
{@i18n key="YOU" text="YOU"/}
</span>
{:else}
{@if cond="{distance} == 1"}
<span class="network-degree one">
{@i18n key="FIRST" text="{name} is your connection"/}
</span>
{:else}
...
{/if}
{/if}
{/if}
logic = @if
{/icon} formatted name = @fmt
localized text = @i18n


Helper code

https://raw.github.com/linkedin/dustjs/master/lib/dust-
helpers.js


Curious about?

• Are we DRY?
• Really? is it more than just a blog post?
show me the proof


Lets solve the badge
differently!


Dust Partials

• Nested templates, have access to the
scope of the parent template
• Takes params and uses the “>” notation
• Partial names can be dynamic


{
"name": ”James",
"count": 2,
“people” : [{ “name” : “Jim”,

badge.tl “distance” : “2”
},{ “name”: ”Eran”
“distance” : “1”}
{#people}
]
<li>
{>”tl/shared/badge_{distance}”/} }
</li>
{/people}

badge_1.tl logic = dynamic
{@i18n text=“first degree”/}
partials
badge_2.tl
{@i18n text=“second degree”/}
localized text =
@i18n


“Partial” as a Helper
@partial, @jsControl


{#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


Helper code

https://gist.github.com/3083847


Partial as a helper
{#Education}
{#educations}
{#educations}
<div id="education-{educationId}" class="editable-item">
<div id="education-{educationId}-view">
{>"tl/apps/profile/v2/embed/education_view"/}
</div>
{#formData}
<div id="education-{educationId}-edit" class="edit-form">
{>"tl/apps/profile/v2/embed/education_edit"/}
</div>
{/formData}
</div>
{@jsControl name="Sortable.Section"}
Dust key
{
existingDragHandlePath: '.edit-order',
serverValue: '{educationId}',
group: 'educations',
additionalProxyClass:'subsection-drag-proxy'
}
{/jsControl}
{/educations}
{/educations}
{/Education}


QUESTIONS?


Apps with Dust
Browser CDN caching
content delivery

linkedin.com

UI /JSON Aggregator
Static Assets static content
V8 js, css, templates

apps Page Embed Embed
Partials

data layer JSON JSON JSON


Proﬁle Page


Anatomy of a LI Page

• Page has a Layout
• Layout & Page have one or more Embeds


Proﬁle Page with Embeds
HEADER

Ads embed

WVYP embed

Activity
Feed
embed


Anatomy of a Embed

• Embeds have
• Re-usable Dust Helpers
• Re-usable Dust Partials
• Pages degrade gracefully with embeds
that timeout or error


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}


Curious case of client-rendered dust


I meant client-rendering
and not client-mvc


How much not on the
client?


! 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;})();


! on client
• Server side processed helper tags
• auto-generate template dependencies
{#people}
{“>tl/shared/badge_{distance}”/}
{/people}


! on client

• Dust Preprocessed helper tags
• leverage JVM based i18n, formatting and A/B
testing
• creates template driven, context based JSON


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}


! on client

• No javascript, SEO pages
• Seamless rendering of dust on the server using
V8


Curious about?

• Are we DRY?
• Really? is it more than just a blog
post? show me the proof


Is it more than just a
blog post?


We even forked it!


We will be open about
how we extend and
how we use it.


Seriously, tell me how
it is helping us build
features?


Features
• Data-driven product, 60%-65% of features
we do are displays
• remaining 30-35%
• ﬂows, ajaxy interactions
• writes/deletes


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


Ok, tell me which LI
pages are in dust!


•Search App
• https://www.linkedin.com/search-fe/group_search?

•Proﬁle

•College Alumni Pages
• https://www.linkedin.com/college/alumni

•PYMK
• https://www.linkedin.com/people/pymk


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


If you watch this presentation backwards,
it’s should be about a normal web-
developers’s life!


we dust!
https://github.com/linkedin/dustjs


Curious case of Dust

Recommended

Recommended

More Related Content

Similar to Curious case of Dust

Similar to Curious case of Dust (20)

Recently uploaded

Recently uploaded (20)

Curious case of Dust