You can see the video of this talk here: http://www.youtube.com/watch?v=PuNh2kp8Zt8 Our early attempts at doing client side rendering in tuenti.com 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.

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

2. Nuria Ruiz
@pantojacoder

3. What is client side
rendering?

5. To move
rendering to the
client you
need two things.

6. A Template Engine
Templates

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&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')

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;
});
})()

34. No More
DOM manipulation

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&amp;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.

46. Measure
Everything.

47. 5 times faster

48. Questions?