Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Leaving jsps in the dust

Leaving jsps in the dust

LinkedIn moving to client templates for the web

Veena Basavaraj

June 30, 2012
Tweet

More Decks by Veena Basavaraj

Other Decks in Technology

Transcript

  1. Unification • Javascript Templates, CDN caching • Write once •

    JSON for data • One Standard • Event-ed Server as JSON Aggregator + JS V8 engine • Scale once
  2. JavaScript templates • Evaluated tons, handlebars, dust, mustache • Good:

    Simple, less logic, 4KB, precompiled to javascript, performance is a feature • Bad: None are mature enough, i18n/ formatters not out of the box
  3. _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);! }!
  4. Dust - *less logic • Simple, DRY • loops, conditionals,

    partials, inheritance {#people} {>”/path/degree_icon_{distance}”/} {/people}
  5. Dust • Client Helpers for extensions, reusability • Rendering logic,

    math, i18n • @if, @select, @lte, @ceil, @i18n, @form {#people} <li class="card {@select key=“distance”} {@lte value=“1”/} {@i18n text=“first degree”/} {@gt value=“1”/} {@i18n text=“second degree”/} {/select} </li> {/people}
  6. ! on client • Server side precompiled to JS •

    Rendering times on client snappy
  7. ! on client • Server side processed helper tags •

    auto-generate template dependencies {#people} {“>degree_icon”/} {/people}
  8. ! on client • Dust Preprocessed helper tags • leverage

    JVM based i18n, formatting and A/B testing • creates template driven, context based JSON {#people} {@ss.fmt key=”fmt_name” type=“name” value=”{name}”/} {/people} {#people} {fmt_name} {/people} Client template/ js “people” : [{ “name” : “Joe Jada”, “fmt_name” : “Joe J”, “distance” : “2” },{ “name”: ”Jade Pink” “fmt_name” : “Jade P”, “distance” : “1”} ] } Server Source template uses
  9. ! on client • No javascript, SEO pages • Seamless

    rendering of dust on the server using V8
  10. data layer JSON JSON Browser UI /JSON Aggregator V8 Page

    apps Module Module JSON CDN caching content delivery Static Assets static content js, css, templates linkedin.com