37. Render on client
function render($container, key) {
$.get(getMemeUrl(key)).done(function(memeData) {
$container.html(meme.hero.main({
meme: memeData
}));
initEvents($container);
...
38. Render on client + server
P2: Yes
Old products: If soy available
Connect: JVM server
39. Injecting Page Data
// Bad
<script>
var myData = “${getMyData}”;
</script>
// Why? Because it’s an XSS hole
<script>
var myData = “</script><script>alert(‘naughty’);””;
</script>
40. Injecting Page Data
// In action
public String getSelectData() {
return ImmutableMap.of(
“baseImages”, getAllBaseImages(),
“baseImagesJson”, marshalAsJson(getAllBaseImages())
);
}
41. Injecting Page Data
// In template
<div class="base-images-json"
data-base-images-json="{$baseImagesJson}">
</div>
42. Accessing Page Data
// From javascript
var myData = AJS.$(".base-images-json").
data("base-images-json");
53. “
Amazon: For every 100ms increase in load time
of Amazon.com decreased sales by 1%
Google: From 10 results in 0.4 seconds to to 30
results in 0.9 seconds decreased traffic and ad
revenues by 20%
Google: An extra 500ms in loading time
resulted in 20% drop in traffic.
Yahoo: 400ms slower page would see 5-9% more
people leave before the page finished loading.
”
