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
840
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
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
320
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
270
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
An introduction to Claude Code SDK
choplin
2
1.1k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Done Done
chrislema
184
16k
Statistics for Hackers
jakevdp
799
220k
Raft: Consensus for Rubyists
vanstee
140
7k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
A Tale of Four Properties
chriscoyier
160
23k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
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?