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

More Related Content

Similar to Curious case of Dust

Recently uploaded

Curious case of Dust