CuriousCaseOfDust.pdf

Transcript

1. The Curious Case of Dust @vybs Wednesday, 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 proof Wednesday, July 11, 12
3. Let’ start Wednesday, 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. _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
9. Tell me more! Wednesday, July 11, 12
10. Hello {name}! You have {count} messages from {#people} {name}, {/people} 1. Dust Keys references in JSON 2. Dust Sections create a block for enumeration, transformations Wednesday, July 11, 12
11. Wait, is that it? Wednesday, July 11, 12
12. Curious case of logic-less dust Wednesday, July 11, 12
13. Is logic-less working? Wednesday, July 11, 12
14. Let’s consider a LI use case Wednesday, July 11, 12
15. Use case Profile Connections Search Results People You May Know ICON/BADGE Member Photo Wednesday, July 11, 12
16. It is just a badge! Wednesday, July 11, 12
17. BADGE localized ENGLISH TURKEY PORTUGUESE JAPANESE Wednesday, 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 @ notation Wednesday, July 11, 12
20. {#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 = @fmt localized text = @i18n Wednesday, July 11, 12
21. Helper code https://raw.github.com/linkedin/dustjs/master/lib/dust- helpers.js Wednesday, 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 proof Wednesday, 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 dynamic Wednesday, July 11, 12
25. {@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
26. “Partial” as a Helper @partial, @jsControl Wednesday, July 11, 12
27. 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
28. https://gist.github.com/3083847 Helper code Wednesday, July 11, 12
29. {#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
30. QUESTIONS? Wednesday, July 11, 12
31. data layer JSON JSON Browser UI /JSON Aggregator V8 Page apps Embed Embed JSON CDN caching content delivery Static Assets static content js, css, templates linkedin.com Apps with Dust Partials Wednesday, July 11, 12
32. Profile Page Wednesday, July 11, 12
33. Anatomy of a LI Page • Page has a Layout • Layout & Page have one or more Embeds Wednesday, July 11, 12
34. Profile Page with Embeds HEADER Activity Feed embed WVYP embed Ads embed Wednesday, 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 error Wednesday, 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 proof Wednesday, July 11, 12
38. Curious case of client-rendered dust Wednesday, July 11, 12
39. I meant client-rendering and not client-mvc Wednesday, 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 JSON Wednesday, 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 V8 Wednesday, 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 proof Wednesday, 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/deletes Wednesday, July 11, 12
54. • 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
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/pymk Wednesday, July 11, 12
57. • 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
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/dustjs Wednesday, July 11, 12