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 sacrificing 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?


_t = “Hello {name}! You have {count} new messages from {#people} {name}, {/people} ”;

json = { "name": ”James", "count": 2, “people” : [{ “name” : “Jim”, “distance” : “2” },{ “name”: ”Eran” “distance” : “1”} ] }

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

!dust.render(_t, json, function(error, data) {! $(“mydiv”).html(data);! }!

1. Dust for markup 2. JSON for data

3. JAVASCRIPT for render

4. HTML


Tell me more!


Hello {name}!You have {count} messages from {#people} {name}, {/people}

1. Dust Keysreferences in JSON

2. Dust Sectionscreate 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 caseProfile Connections Search Results

People You May Know

ICON/BADGE

Member Photo


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 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} {/icon}

“icon” : {“distance” : “1”,“first” : “Bill”,“last” : “Scott”}

logic = @if formatted name = @fmtlocalized 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


{@i18n text=“first degree”/}

{ "name": ”James", "count": 2, “people” : [{ “name” : “Jim”, “distance” : “2” },{ “name”: ”Eran” “distance” : “1”} ] }

logic = dynamic partials

localized text = @i18n

{#people}<li> {>”tl/shared/badge_{distance}”/}</li>{/people}

{@i18n text=“second degree”/}

badge.tl

badge_1.tl

badge_2.tl


“Partial” as a Helper@partial, @jsControl


Partial as a helper

• local context, expected params, docs

{#people} {@partial altText=_memberFullName pictureId=primaryPictureID} {>"tl/shared/member_photo"/} {/partial} {/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"/}

{?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}

pymk.tl includes member_photo.tl

member_photo.tl


https://gist.github.com/3083847

Helper code




{#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"} { existingDragHandlePath: '.edit-order', serverValue: '{educationId}', group: 'educations', additionalProxyClass:'subsection-drag-proxy' } {/jsControl} {/educations}{/educations}{/Education}

Partial as a helper

Dust key


QUESTIONS?


data layer JSON JSON

Browser

UI /JSON Aggregator

V8

Pageapps Embed Embed

JSON

CDN cachingcontent delivery

Static Assets static contentjs, css, templates

linkedin.com

Apps with Dust

Partials


Profile Page


Anatomy of a LI Page

• Page has a Layout

• Layout & Page have one or more Embeds


Profile Page with EmbedsHEADER

Activity Feed

embed

WVYP embed

Ads 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 about?


• Are we DRY?

•How much on the client?

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


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!


Is it more than just a blog post?


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%

• flows, ajaxy interactions

• writes/deletes


• 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

Parallel web-development


Ok, tell me which LI pages are in dust!


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

•Profile

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

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


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



https://www.linkedin.com/college/alumni

https://www.linkedin.com/college/alumni

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

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

• 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

We also are...


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

developers’s life!


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


https://github.com/linkedin/dustjs

https://github.com/linkedin/dustjs

Technology

Curious case of Dust