Your SlideShare is downloading. ×
Curious case of Dust
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Curious case of Dust

3,984
views

Published on

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,984
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The Curious Case of Dust @vybsWednesday, July 11, 12
  • 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 proofWednesday, July 11, 12
  • 3. Let’ startWednesday, July 11, 12
  • 4. How to Dust?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
  • 6. Ok whatever!Wednesday, July 11, 12
  • 7. Really, tell me how it works?Wednesday, July 11, 12
  • 8. 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. HTMLWednesday, July 11, 12
  • 9. Tell me more!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, transformationsWednesday, July 11, 12
  • 11. Wait, is that it?Wednesday, July 11, 12
  • 12. Curious case of logic-less dustWednesday, July 11, 12
  • 13. Is logic-less working?Wednesday, July 11, 12
  • 14. Let’s consider a LI use caseWednesday, July 11, 12
  • 15. Use case Profile Connections Search Results People You May Know Member Photo ICON/BADGEWednesday, July 11, 12
  • 16. It is just a badge!Wednesday, July 11, 12
  • 17. BADGE localized ENGLISH TURKEY PORTUGUESE JAPANESEWednesday, 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 @ notationWednesday, July 11, 12
  • 20. “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 = @i18nWednesday, July 11, 12
  • 21. Helper code https://raw.github.com/linkedin/dustjs/master/lib/dust- helpers.jsWednesday, 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 proofWednesday, 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 dynamicWednesday, July 11, 12
  • 25. { "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 = @i18nWednesday, July 11, 12
  • 26. “Partial” as a Helper @partial, @jsControlWednesday, 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 Members 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, docsWednesday, July 11, 12
  • 28. Helper code https://gist.github.com/3083847Wednesday, July 11, 12
  • 29. 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}Wednesday, July 11, 12
  • 30. QUESTIONS?Wednesday, July 11, 12
  • 31. 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 JSONWednesday, July 11, 12
  • 32. Profile PageWednesday, July 11, 12
  • 33. Anatomy of a LI Page • Page has a Layout • Layout & Page have one or more EmbedsWednesday, July 11, 12
  • 34. Profile Page with Embeds HEADER Ads embed WVYP embed Activity Feed embedWednesday, 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 errorWednesday, 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 proofWednesday, July 11, 12
  • 38. Curious case of client-rendered dustWednesday, July 11, 12
  • 39. I meant client-rendering and not client-mvcWednesday, 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 JSONWednesday, 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
  • 45. Wednesday, July 11, 12
  • 46. ! on client • No javascript, SEO pages • Seamless rendering of dust on the server using V8Wednesday, 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 proofWednesday, July 11, 12
  • 48. Is it more than just a blog post?Wednesday, July 11, 12
  • 49. We even forked it!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/deletesWednesday, 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-endWednesday, July 11, 12
  • 55. Ok, tell me which LI pages are in dust!Wednesday, July 11, 12
  • 56. •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/pymkWednesday, 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 JSWednesday, 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/dustjsWednesday, July 11, 12

×