Leaving jsps in the dust

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