• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Leaving jsps in the dust
 

Leaving jsps in the dust

on

  • 2,998 views

 

Statistics

Views

Total Views
2,998
Views on SlideShare
2,947
Embed Views
51

Actions

Likes
2
Downloads
26
Comments
0

2 Embeds 51

http://www.linkedin.com 47
https://www.linkedin.com 4

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Leaving jsps in the dust Leaving jsps in the dust Presentation Transcript

  • Leavingjsps in the dust @vybs
  • We are pi@linkedIn
  • front-endinfrastructure
  • Goal(s)
  • Site-Scale + Site-SpeedIn the beginning...
  • What is the Problem?
  • Site-Scale Developer Velocity Site-Speed But...
  • Simple things should be dead easy
  • Build Quick, Iterate More
  • front-end infrastructure now became....
  • Grails Jruby Node.jsStatic Vs Dynamic
  • Anyone notice a bad pattern?
  • Do once, Do the same twice, Do the same thrice...!
  • How does this workeffectively in mobile?
  • Still building heavy pages not apps
  • We created a few more problems indeed!
  • How did we solve them?
  • Unification• Javascript Templates, CDN caching • Write once• JSON for data • One Standard• Event-ed Server as JSON Aggregator + JS V8 engine • Scale once
  • 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
  • _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);! }! Hello James! You have 2 new messages from Jim, Eran!
  • Dust - *less logic• Simple, DRY • loops, conditionals, partials, inheritance {#people} {>”/path/degree_icon_{distance}”/} {/people}
  • 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}
  • ! on client• Server side precompiled to JS • Rendering times on client snappy
  • ! on client• Server side processed helper tags • auto-generate template dependencies{#people} {“>degree_icon”/}{/people}
  • ! on client• Dust Preprocessed helper tags • leverage JVM based i18n, formatting and A/B testing • creates template driven, context based JSON Server Source template {#people} {@ss.fmt key=”fmt_name” type=“name” value=”{name}”/} {/people} “people” : [{ “name” : “Joe Jada”, Client template/ js “fmt_name” : “Joe J”, {#people} uses “distance” : “2” },{ “name”: ”Jade Pink” {fmt_name} “fmt_name” : “Jade P”, {/people} “distance” : “1”} ] }
  • ! on client• No javascript, SEO pages• Seamless rendering of dust on the server using V8
  • Browser CDN caching content deliverylinkedin.com UI /JSON Aggregator Static Assets static content V8 js, css, templates apps Page Module Module data layer JSON JSON JSON
  • linkedin.com/people/pymk
  • we dust!https://github.com/linkedin/dustjs https://github.com/linkedin/Luhttps://github.com/linkedin/inject