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
800
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
140
Wikipedia and The Lean Data Diet
nuria_ruiz
1
60
Other Decks in Technology
See All in Technology
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
500
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
120
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
460
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
160
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
260
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
160
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Rails Girls Zürich Keynote
gr2m
93
13k
Optimizing for Happiness
mojombo
376
69k
Building Your Own Lightsaber
phodgson
102
6k
Scaling GitHub
holman
458
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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?