Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Client_Side_Rendering_Is_Not_So_Easy.pdf
Search
nuria_ruiz
July 08, 2012
Technology
3
850
Client_Side_Rendering_Is_Not_So_Easy.pdf
nuria_ruiz
July 08, 2012
Tweet
Share
More Decks by nuria_ruiz
See All by nuria_ruiz
Wikipedia's Lean Data Diet and Lessons Learned
nuria_ruiz
0
170
Wikipedia and The Lean Data Diet
nuria_ruiz
1
67
Other Decks in Technology
See All in Technology
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
350
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
はじめてのOSS開発からみえたGo言語の強み
shibukazu
3
980
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
650
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
590
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
Apache Spark もくもく会
taka_aki
0
140
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
750
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
A better future with KSS
kneath
239
17k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Bash Introduction
62gerente
615
210k
Designing for Performance
lara
610
69k
Building an army of robots
kneath
306
46k
Code Review Best Practice
trishagee
71
19k
Transcript
from 2010 to now... Client Side Rendering is Not So
Easy
Nuria Ruiz @pantojacoder
What is client side rendering? A fine idea...
None
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{value}}} </div> </div> { "title":
"Pretty title", "value": 10000, }
To move rendering to the client you need two things:
1. Template Engine 2. Templates Loads of Javascript in the client.
None
Couple of things about About 1 billion page requests every
day. 10% on IE7, 0.5% on IE6.
We have 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
<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.
We needed to do ajax to retrieve templates, which are
HTML docs (cannot use <script>). AND Loads of walking the DOM to insert data.
None
Faster on IE7 than Chrome. We tried a "new" templating
technology to solve the DOM issue.
XSLT
XSLT was faster but had many problems. Browser Implementation is
1.0. It does not support dynamic subtemplating. Adding translations was a major pain.
STEP BACK
With as much Javascript we had in the client nothing
is going to go fast. Fact #1 We need to load Javascript lazily.
None
How does the YUI lazy loading work?
None
<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')
None
We can remove the loading bar.
Fact #2 We need to start from scratch on the
template engine.
None
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: Compilation:
$ npm install handlebars $ /usr/bin/handlebars sample_template.js Builds a grammar based on HTML that compiles to Javascript.
(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; }); })()
DOM manipulation.
Why Handlebars? If/else constructors. Handlebars is actively worked on. Compilation
available.
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>
YUI walks the dependency tree.
None
Translations client side. {{{translate "Photos" "%(photo_save_title) Save"}}} We hope to
open source our I18N for Handlebars.
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.
What's next? Server Side.
Last Thoughts.
Do not think about problems in isolation.
Use the right tool for the job.
Measure Everything.
5 times faster
Questions?