SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
Client Side rendering Not so Easy
-
Upload
nuriaruiz -
Category
Technology
-
view
3.524 -
download
2
description
Transcript of Client Side rendering Not so Easy
from 2010 to now...
Client Side Rendering is Not So Easy
Nuria Ruiz
@pantojacoder
What is client side rendering?
To move rendering to the client you need two things.
A Template Engine
Templates
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{value}}} </div></div>
{ title : "Pretty Thing",value : "33"
}
Loads of Javascript in the client.
WARNING !!!!
About 1 billion page requests every day.
10% on IE7
0.5% on IE6
Data from 2011
We had a loading bar.
We have a thick Javascript client.
We offer several languages: Spanish, English, Catalan...
Back to loads of Javascript in the client...
Remember that loading bar?
500 K compressed, 23 requests ~
3300 K of Javascript !!!!
Performance Problem #1
Eager loading of Javascript.
Async !=Lazy
Templates were plain HTML documents.
Performance Problems #2 and #3
<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>
We needed to do ajax to retrieve templates, which were HTML docs (cannot use <script>).
andLoads of walking the DOM to insert data.
StepBACK
With as much Javascript we had in the client nothing is going to go fast.
Fact #1
We need to load Javascript lazily.
How does the YUI lazy loading work?
<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')
We can remove the loading bar.
Fact #2
We need to start from scratch on the template engine.
Works using a Lexical Parser.
Based on Jison, a Javascript parser generator.
<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 HTMLthat compiles to Javascript.
Compilation:
(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;
});})()
No MoreDOM manipulation
Why Handlebars?
If-Else constructors Precompilation Actively Worked on.
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>
YUI walks the dependency tree.
Translations client-side
{{{translate "Photos" "%(photo_save_title)Save"}}}
Do we use Client Side Rendering for everything?
No
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.
Last Thoughts.
Do not think about problemsin isolation.
Use the right tool for the job.
Measure Everything.
5 times faster
Questions?