curious case of dust
TRANSCRIPT
![Page 1: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/1.jpg)
The Curious Case of Dust
@vybs
Wednesday, July 11, 12
![Page 2: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/2.jpg)
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
![Page 3: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/3.jpg)
Let’ start
Wednesday, July 11, 12
![Page 4: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/4.jpg)
How to Dust?
Wednesday, July 11, 12
![Page 5: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/5.jpg)
• “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
![Page 6: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/6.jpg)
Ok whatever!
Wednesday, July 11, 12
![Page 7: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/7.jpg)
Really, tell me how it works?
Wednesday, July 11, 12
![Page 8: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/8.jpg)
_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
Wednesday, July 11, 12
![Page 9: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/9.jpg)
Tell me more!
Wednesday, July 11, 12
![Page 10: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/10.jpg)
Hello {name}!You have {count} messages from {#people} {name}, {/people}
1. Dust Keysreferences in JSON
2. Dust Sectionscreate a block for enumeration,
transformations
Wednesday, July 11, 12
![Page 11: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/11.jpg)
Wait, is that it?
Wednesday, July 11, 12
![Page 12: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/12.jpg)
Curious case of logic-less dust
Wednesday, July 11, 12
![Page 13: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/13.jpg)
Is logic-less working?
Wednesday, July 11, 12
![Page 14: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/14.jpg)
Let’s consider a LI use case
Wednesday, July 11, 12
![Page 15: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/15.jpg)
Use caseProfile Connections Search Results
People You May Know
ICON/BADGE
Member Photo
Wednesday, July 11, 12
![Page 16: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/16.jpg)
It is just a badge!
Wednesday, July 11, 12
![Page 17: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/17.jpg)
BADGE localized
ENGLISH
TURKEY
PORTUGUESE
JAPANESE
Wednesday, July 11, 12
![Page 18: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/18.jpg)
How do we solve this simple use case?
Wednesday, July 11, 12
![Page 19: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/19.jpg)
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
![Page 20: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/20.jpg)
{#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
Wednesday, July 11, 12
![Page 21: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/21.jpg)
Helper code
https://raw.github.com/linkedin/dustjs/master/lib/dust-helpers.js
Wednesday, July 11, 12
![Page 22: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/22.jpg)
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
![Page 23: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/23.jpg)
Lets solve the badge differently!
Wednesday, July 11, 12
![Page 24: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/24.jpg)
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
![Page 25: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/25.jpg)
{@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
Wednesday, July 11, 12
![Page 26: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/26.jpg)
“Partial” as a Helper@partial, @jsControl
Wednesday, July 11, 12
![Page 27: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/27.jpg)
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
Wednesday, July 11, 12
![Page 28: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/28.jpg)
https://gist.github.com/3083847
Helper code
Wednesday, July 11, 12
![Page 29: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/29.jpg)
{#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
Wednesday, July 11, 12
![Page 30: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/30.jpg)
QUESTIONS?
Wednesday, July 11, 12
![Page 31: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/31.jpg)
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
Wednesday, July 11, 12
![Page 32: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/32.jpg)
Profile Page
Wednesday, July 11, 12
![Page 33: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/33.jpg)
Anatomy of a LI Page
• Page has a Layout
• Layout & Page have one or more Embeds
Wednesday, July 11, 12
![Page 34: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/34.jpg)
Profile Page with EmbedsHEADER
Activity Feed
embed
WVYP embed
Ads embed
Wednesday, July 11, 12
![Page 35: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/35.jpg)
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
![Page 36: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/36.jpg)
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
![Page 37: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/37.jpg)
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
![Page 38: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/38.jpg)
Curious case of client-rendered dust
Wednesday, July 11, 12
![Page 39: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/39.jpg)
I meant client-rendering and not client-mvc
Wednesday, July 11, 12
![Page 40: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/40.jpg)
How much not on the client?
Wednesday, July 11, 12
![Page 41: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/41.jpg)
! 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
![Page 42: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/42.jpg)
! on client• Server side processed helper tags
• auto-generate template dependencies
{#people} {“>tl/shared/badge_{distance}”/}{/people}
Wednesday, July 11, 12
![Page 43: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/43.jpg)
! 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
![Page 44: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/44.jpg)
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
![Page 45: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/45.jpg)
Wednesday, July 11, 12
![Page 46: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/46.jpg)
! on client
• No javascript, SEO pages
• Seamless rendering of dust on the server using V8
Wednesday, July 11, 12
![Page 47: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/47.jpg)
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
![Page 48: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/48.jpg)
Is it more than just a blog post?
Wednesday, July 11, 12
![Page 49: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/49.jpg)
We even forked it!
Wednesday, July 11, 12
![Page 50: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/50.jpg)
Is it more than just a blog post?
Wednesday, July 11, 12
![Page 51: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/51.jpg)
We will be open about how we extend and
how we use it.
Wednesday, July 11, 12
![Page 52: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/52.jpg)
Seriously, tell me how it is helping us build
features?
Wednesday, July 11, 12
![Page 53: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/53.jpg)
Features
• Data-driven product, 60%-65% of features we do are displays
• remaining 30-35%
• flows, ajaxy interactions
• writes/deletes
Wednesday, July 11, 12
![Page 54: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/54.jpg)
• 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
Wednesday, July 11, 12
![Page 55: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/55.jpg)
Ok, tell me which LI pages are in dust!
Wednesday, July 11, 12
![Page 56: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/56.jpg)
•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
Wednesday, July 11, 12
![Page 57: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/57.jpg)
• 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...
Wednesday, July 11, 12
![Page 58: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/58.jpg)
If you watch this presentation backwards, it’s should be about a normal web-
developers’s life!
Wednesday, July 11, 12
![Page 59: Curious case of Dust](https://reader034.vdocument.in/reader034/viewer/2022050906/55591ac6d8b42a88038b4e64/html5/thumbnails/59.jpg)
we dust!https://github.com/linkedin/dustjs
Wednesday, July 11, 12