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
62
Other Decks in Technology
See All in Technology
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
260
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
910
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
680
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.3k
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
SSMRunbook作成の勘所_20241120
koichiotomo
3
160
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
550
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
49
11k
BBQ
matthewcrist
85
9.3k
Producing Creativity
orderedlist
PRO
341
39k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Happy Clients
brianwarren
98
6.7k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
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?