Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Client Side rendering Not so Easy


Published on

You can see the video of this talk here:

Our early attempts at doing client side rendering in brought us many performance problems, not only for the usual offenders (IE6 and IE7) but also for fast browsers like Chrome. We tried to solve most of those using a technology to render client side that ended up being faster on IE7 than Chrome, but still, things were not working. We had to scrape most of our homegrown framework and start from the beginning. We realized that the first thing we needed to do to use Javascript successfully in our thick client was to have a Javascript dependency management system. YUI came to our rescue. We also learned that in our case we would not be able to work only with client-side rendering, having server-side rendering was a must. That brings the problem of what template engine to use and whether to render server side with PHP or rather use Javascript and node so you can truly share templates between server and client. We will talk about the mistakes we made early on so you can learn from those, but also about technologies and methodologies that have (and have not) worked for us.

Published in: Technology, Business
  • Be the first to comment

Client Side rendering Not so Easy

  1. 1. from 2010 to now... Client Side Rendering is Not So Easy
  2. 2. Nuria Ruiz @pantojacoder
  3. 3. What is client side rendering?
  4. 4. To move rendering to the client you need two things.
  5. 5. A Template Engine Templates
  6. 6. <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{value}}} </div> </div> { title : "Pretty Thing", value : "33" }
  7. 7. Loads of Javascript in the client.
  8. 8. WARNING !!!!
  9. 9. About 1 billion page requests every day. 10% on IE7 0.5% on IE6 Data from 2011
  10. 10. We had a loading bar.
  11. 11. We have a thick Javascript client.
  12. 12. We offer several languages: Spanish, English, Catalan...
  13. 13. Back to loads of Javascript in the client... Remember that loading bar?
  14. 14. 500 K compressed, 23 requests ~ 3300 K of Javascript !!!!
  15. 15. Performance Problem #1 Eager loading of Javascript. Async !=Lazy
  16. 16. Templates were plain HTML documents. Performance Problems #2 and #3
  17. 17. <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>
  18. 18. We needed to do ajax to retrieve templates, which were HTML docs (cannot use <script>). and Loads of walking the DOM to insert data.
  19. 19. Step BACK
  20. 20. With as much Javascript we had in the client nothing is going to go fast. Fact #1 We need to load Javascript lazily.
  21. 21. How does the YUI lazy loading work?
  22. 22. <a href="#m=Albums&amp;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')
  23. 23. We can remove the loading bar.
  24. 24. Fact #2 We need to start from scratch on the template engine.
  25. 25. Works using a Lexical Parser. Based on Jison, a Javascript parser generator.
  26. 26. <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:
  27. 27. (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; }); })()
  28. 28. No More DOM manipulation
  29. 29. Why Handlebars? If-Else constructors Precompilation Actively Worked on.
  30. 30. How do we download templates? With YUI, just like anything else, templates now are Javascript. <a href="#m=Photo&amp;func=index" onclick=​"Bootloader ('t-photo','Request('?m=Photo&func=index'))​;​return false;​" title=​"My photos">​…​</a>​
  31. 31. YUI walks the dependency tree.
  32. 32. Translations client-side {{{translate "Photos" "% (photo_save_title)Save"}}}
  33. 33. Do we use Client Side Rendering for everything?
  34. 34. No
  35. 35. 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.
  36. 36. Last Thoughts.
  37. 37. Do not think about problems in isolation.
  38. 38. Use the right tool for the job.
  39. 39. Measure Everything.
  40. 40. 5 times faster
  41. 41. Questions?