Leaving jsps in the dust

LinkedIn moving to client templates for the web

Transcript

1. Leaving jsps in the dust @vybs
2. We are pi@linkedIn
3. front-end infrastructure
4. Goal(s)
5. In the beginning... Site-Speed Site-Scale +
6. What is the Problem?
7. But... Site-Speed Site-Scale Developer Velocity
8. Simple things should be dead easy
9. Build Quick, Iterate More
10. front-end infrastructure now became....
11. Static Vs Dynamic Jruby Node.js Grails
12. Anyone notice a bad pattern?
13. Do once, Do the same twice, Do the same thrice...!
14. How does this work effectively in mobile?
15. Still building heavy pages not apps
16. We created a few more problems indeed!
17. How did we solve them?
18. Unification • Javascript Templates, CDN caching • Write once • JSON for data • One Standard • Event-ed Server as JSON Aggregator + JS V8 engine • Scale once
19. 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
20. _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);! }!
21. Dust - *less logic • Simple, DRY • loops, conditionals, partials, inheritance {#people} {>”/path/degree_icon_{distance}”/} {/people}
22. 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}
23. ! on client • Server side precompiled to JS • Rendering times on client snappy
24. ! on client • Server side processed helper tags • auto-generate template dependencies {#people} {“>degree_icon”/} {/people}
25. ! 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
26. ! on client • No javascript, SEO pages • Seamless rendering of dust on the server using V8
27. 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
28. linkedin.com/people/pymk
29. we dust! https://github.com/linkedin/dustjs https://github.com/linkedin/Lu https://github.com/linkedin/inject