Leaving jsps in the dust

3,960 views

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,960
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
37
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \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

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

    ×