Save 37% off PRO during our Black Friday Sale! »

Client_Side_Rendering_Is_Not_So_Easy.pdf

 Client_Side_Rendering_Is_Not_So_Easy.pdf

D90214eda8c2732ad073e1ba87f8e22b?s=128

nuria_ruiz

July 08, 2012
Tweet

Transcript

  1. from 2010 to now... Client Side Rendering is Not So

    Easy
  2. Nuria Ruiz @pantojacoder

  3. What is client side rendering? A fine idea...

  4. None
  5. <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{value}}} </div> </div> { "title":

    "Pretty title", "value": 10000, }
  6. To move rendering to the client you need two things:

    1. Template Engine 2. Templates Loads of Javascript in the client.
  7. None
  8. Couple of things about About 1 billion page requests every

    day. 10% on IE7, 0.5% on IE6.
  9. We have a loading bar.

  10. We have a thick Javascript client.

  11. We offer several languages: Spanish, English, Catalan...

  12. Back to loads of Javascript in the client... Remember that

    loading bar? 500 K compressed, 23 requests ~ 3300 K of Javascript !!!!
  13. Performance Problem #1 Eager loading of Javascript. Async !=Lazy

  14. <div class="footer"> <div> <a class="hide" href="%sectionLink%"> <fw:translate id="Video.video_view_more_link"> %(video_view_more_link)View more...

    </fw:translate> </a> </div> Performance Problem #2 and #3 Templates were plain HTML documents.
  15. We needed to do ajax to retrieve templates, which are

    HTML docs (cannot use <script>). AND Loads of walking the DOM to insert data.
  16. None
  17. Faster on IE7 than Chrome. We tried a "new" templating

    technology to solve the DOM issue.
  18. XSLT

  19. XSLT was faster but had many problems. Browser Implementation is

    1.0. It does not support dynamic subtemplating. Adding translations was a major pain.
  20. STEP BACK

  21. With as much Javascript we had in the client nothing

    is going to go fast. Fact #1 We need to load Javascript lazily.
  22. None
  23. How does the YUI lazy loading work?

  24. None
  25. <a href="#m=Albums&f=index" onclick=​"Bootloader('t-albums- showcase','Request.click','?m=Albums&f=index')​;​return false;​" title=​"My photo albums">​…​</a>​ Each link

    does an HTTP request to retrieve the Javascript needed. YUI().use('t-albums')
  26. None
  27. We can remove the loading bar.

  28. Fact #2 We need to start from scratch on the

    template engine.
  29. None
  30. works using a Lexical Parser. Based on Jison, a Javascript

    parser generator.
  31. <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{body}}} </div> </div> Template: Compilation:

    $ npm install handlebars $ /usr/bin/handlebars sample_template.js Builds a grammar based on HTML that compiles to Javascript.
  32. (function() { var template = Handlebars. template['sample_template.js'] =function (Handlebars,depth0,helpers,partials,data) {

    helpers = helpers || Handlebars.helpers; var self = this; buffer += "<div class=\"entry\">\n <h1>"; ..... } buffer += escapeExpression(stack1) + "</h1>\n <div class=\"body\">\n ” .... buffer += escapeExpression(stack1) + "\n </div>\n </div>\n"; return buffer; }); })()
  33. DOM manipulation.

  34. Why Handlebars? If/else constructors. Handlebars is actively worked on. Compilation

    available.
  35. How do we download templates? With YUI, just like anything

    else, templates now are Javascript. <a href="#m=Albums&f=index" onclick=​"Bootloader('t-photo','Request.click', '?m=Albums&f=index)​;​ return false;​" title=​"My photo albums">​…​</a>​
  36. YUI walks the dependency tree.

  37. None
  38. Translations client side. {{{translate "Photos" "%(photo_save_title) Save"}}} We hope to

    open source our I18N for Handlebars.
  39. Do we use Client Side Rendering for everything? No. 1.

    Features that exist only client side, like overlays, autocomplete, spinners, chat UI. 2. Features for which there are significant CPU savings to be done, e.g. high traffic pages like photos.
  40. What's next? Server Side.

  41. Last Thoughts.

  42. Do not think about problems in isolation.

  43. Use the right tool for the job.

  44. Measure Everything.

  45. 5 times faster

  46. Questions?