Client Side rendering Not so Easy
2 likes3,234 views
The document discusses the challenges and solutions related to client-side rendering, highlighting the importance of using a template engine and efficient JavaScript loading. It emphasizes issues like eager loading and DOM manipulation, suggesting the use of lazy loading techniques and a new template engine based on Handlebars for improved performance. The author concludes with advice on measuring performance and applying appropriate solutions for different tasks.
![(function() {
var template = Handlebars.template; templates
['sample_template.js'] = template(
function (Handlebars,depth0,helpers,partials,data) {
helpers = helpers || Handlebars.helpers;
var self = this;
buffer += "<div class="entry">n <h1>";
stack1 = helpers.title || depth0.title;
.....
}
buffer += escapeExpression(stack1) + "</h1>n <div
class="body">n ";
....
buffer += escapeExpression(stack1) + "n </div>n
</div>n";
return buffer;
});
})()](https://image.slidesharecdn.com/clientsiderenderingisnotsoeasy-120518064437-phpapp01/85/Client-Side-rendering-Not-so-Easy-33-320.jpg)
Client Side rendering Not so Easy
- 1. from 2010 to now... Client Side Rendering is Not So Easy
- 3. What is client side rendering?
- 5. To move rendering to the client you need two things.
- 7. <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{value}}} </div> </div> { title : "Pretty Thing", value : "33" }
- 8. Loads of Javascript in the client.
- 9. WARNING !!!!
- 10. About 1 billion page requests every day. 10% on IE7 0.5% on IE6 Data from 2011
- 11. We had a loading bar.
- 12. We have a thick Javascript client.
- 13. We offer several languages: Spanish, English, Catalan...
- 14. Back to loads of Javascript in the client... Remember that loading bar?
- 15. 500 K compressed, 23 requests ~ 3300 K of Javascript !!!!
- 16. Performance Problem #1 Eager loading of Javascript. Async !=Lazy
- 17. Templates were plain HTML documents. Performance Problems #2 and #3
- 18. <div class="footer"> <div> <a class="hide" href="%sectionLink%"> <fw:translate id="Video.video_view_more"> %(video_view_more_link)View more... </fw:translate> </a> </div> </div>
- 19. We needed to do ajax to retrieve templates, which were HTML docs (cannot use <script>). and Loads of walking the DOM to insert data.
- 21. Step BACK
- 22. With as much Javascript we had in the client nothing is going to go fast. Fact #1 We need to load Javascript lazily.
- 24. How does the YUI lazy loading work?
- 26. <a href="#m=Albums&func=index" onclick=" Bootloader('t-albums','Request('? m=Albums&func=index'));return false;" title="My photo albums">…</a> Each link does an HTTP request to retrieve the Javascript needed. YUI().use('t-albums')
- 28. We can remove the loading bar.
- 29. Fact #2 We need to start from scratch on the template engine.
- 31. Works using a Lexical Parser. Based on Jison, a Javascript parser generator.
- 32. <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{body}}} </div> </div> Template: $ npm install handlebars $ /usr/bin/handlebars sample_template.js Builds a grammar based on HTML that compiles to Javascript. Compilation:
- 33. (function() { var template = Handlebars.template; templates ['sample_template.js'] = template( function (Handlebars,depth0,helpers,partials,data) { helpers = helpers || Handlebars.helpers; var self = this; buffer += "<div class="entry">n <h1>"; stack1 = helpers.title || depth0.title; ..... } buffer += escapeExpression(stack1) + "</h1>n <div class="body">n "; .... buffer += escapeExpression(stack1) + "n </div>n </div>n"; return buffer; }); })()
- 35. Why Handlebars? If-Else constructors Precompilation Actively Worked on.
- 36. How do we download templates? With YUI, just like anything else, templates now are Javascript. <a href="#m=Photo&func=index" onclick="Bootloader ('t-photo','Request('?m=Photo&func=index'));return false;" title="My photos">…</a>
- 37. YUI walks the dependency tree.
- 39. Translations client-side {{{translate "Photos" "% (photo_save_title)Save"}}}
- 40. Do we use Client Side Rendering for everything?
- 41. No
- 42. Features that exist ONLY client side, like overlays, autocomplete, spinners, chat UI. Features for which there are significant CPU savings to be done, e.g. high traffic pages like photos.
- 43. Last Thoughts.
- 44. Do not think about problems in isolation.
- 45. Use the right tool for the job.
- 47. 5 times faster
- 48. Questions?