Tokyo Research Laboratory
WWW 2009, Madrid, Spain, April 20-24, 2009 © 2009 IBM Corporation
HTML Templates that Fly– A Template Engine Approach to Automated Offloading from Server to Client
Michiaki Tatsubori and Toyotaro SuzumuraIBM Research, Tokyo Research Laboratory
2
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
FlyingTemplate
A mechanism for automatically offloading certain server-side tasks of a Web application to client-side
– Applicable to Web applications developed using HTML template engines
– Leverages the convention behind the “template-based programming model”
Goals
– Improved Web application server throughput
– Transparent implementation
• Conforming to the Web architecture and standards
• Not requiring code modification in existing applications
• Preserving server security in Web environment
3
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Agenda
The template-based programming modelfor Web application development
The mechanism of FlyingTemplate Server throughput experiments
Rest of the talk is for Web geeks Security in automated client-server partitioning Caching in Web browser scripting (or Ajax)
4
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Agenda
The template-based programming modelfor Web application development
The mechanism of FlyingTemplate Server throughput experiments
Rest of the talk is for Web geeks Security in automated client-server partitioning Caching in Web browser scripting (or Ajax)
5
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Template = Final Result (Document) with “Holes”
TemplateEngine
TemplateEngine
param3param2
param1
hole
hole
hole
HTMLwith
“Holes”
param1
param3
param2ActualHTML
Template
Result
Parameters
For PHP, Smarty, StringTemplate, XTemplate, etc
6
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
The Manner of Template Programming
Common usage among various template engines for Web application development:
–Specify a template
–Specify parameters
–Indicate generation of results
check_login();$smarty=new SmartyBank;
$summary=backend_get($_SESSION['userid']);
$smarty->assign('userid', $_SESSION['userid']);$smarty->assign('summary', $summary);$smarty->display('account_summary.tpl');
PHP code fragment using a Smarty template engine:
Rendered page:
7
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
<table ...> <tr><th>User ID</th></tr> <tr><td>{$userid}</td></tr> </table> <table ..> <tr>…</tr> {foreach item=acct from=$summary} <tr> <td>{$acct[0]}</td> <td>{if $acct[1] eq "1"} Checking {elseif $acct[1] eq "2"} Saving {else} Other {/if}</td> <td>{$acct[2]}</td> …
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head><title>SPECweb2005: Account Summary</title>
</head><body bgcolor="white"><!-- SPECweb2005 Dynamic Data Area --><table summary="SPECweb2005_User_Id">
<tr><th>User ID</th></tr><tr><td>{$userid}</td></tr>
</table><table summary="SPECweb2005_Acct_Summary" cellpadding=3 border=1>
<tr><th>Account</th><th>Type</th><th>Current Balance</th><th>Total Deposits</th><th>Average Deposit</th><th>Total Withdraws</th><th>Average Withdraws</th>
</tr>{foreach item=acct from=$summary}<tr><td>{$acct[0]}</td><td>{if $acct[1] eq "1"}
Checking{elseif $acct[1] eq "2"}
Saving{else}
Other{/if}</td>
<td>{$acct[2]}</td><td>{$acct[3]}</td><td>{$acct[4]}</td><td>{$acct[5]}</td><td>{$acct[6]}</td>
</tr>{/foreach}</table>
<!-- SPECweb2005 Displayable Page Title --><table>
<tr><td><b><font color="#9400d3">SPECweb2005: Account Summary</font></b></td>
</tr></table><!-- SPECweb2005 User Action Area -->{include file="menu.tpl"}<!-- SPECweb2005 Image References --><!-- SPECweb2005 Embedded Text -->
<pre> {include file=$PADDING_DIR|cat:"account_summary"}</pre>
</body></html>
An Example Template
Parameters
Iterations
Arrays
Conditional Branches
A template in SPECweb
8
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Conventional Template Engines Generate HTMLat Server Side
WebBrowser
App Server Application TemplateEngine
assign
display T
render
HTML
HTML
Client: Server:
<HTML><HEAD>…</HEAD><BODY> ….…. <TABLE> ….</BODY></HTML> Loads
Here
9
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
FlyingTemplate’s Template Engines GenerateSkeletal Scripts (Instead of Final HTML)
<script src=“/lib/filler.js"></script><script>fill_template("account_summary.tpl",[["userid", "6" ], ["summary", [["0000002006","00","7016.06","16.06","16.06","86.06","86.06"], ["0000002007","01","7016.06","116.06","16.06","136.06","86.06"], ["0000002008","02","7016.06","216.06","16.06","186.06","86.06"], ["0000002009","03","7016.06","316.06","16.06","236.06","86.06"], ["0000002010","04","7016.06","416.06","16.06","286.06","86.06"], ["0000002011","05","7016.06","516.06","16.06","336.06","86.06"], ["0000002012","06","7016.06","616.06","16.06","386.06","86.06"]]]]);</script>
(Template parameters are JSON-encoded in JavaScript code.)
<HTML><HEAD>…</HEAD><BODY> ….…. <TABLE> ….</BODY></HTML>
Final, full HTML
Bootstrap JavaScript code
10
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Agenda
The template-based programming modelfor Web application development
The mechanism of FlyingTemplate Server throughput experiments
Rest of the talk is for Web geeks Security in automated client-server partitioning Caching in Web browser scripting (or Ajax)
11
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
WebBrowser
App Server Application TemplateEngine
BrowserCache
assign
display T
render
Skeletal HTML
get template T
fill T with params
include scripts
T contentT content
Skeletal HTML(bootstrap codew/ params)
WebBrowser
App Server Application TemplateEngine
assign
display T
render
HTML
HTML
Templates are Sent Separately with FlyingTemplateto Let Clients Do the Job
Normal Template Engine:
Flying Template:
Client-sideTemplate Engine Scripts
Templates
A skeletal script at client sidedoes the job instead, usingXMLHttpRequest (XHR) andDynamicHTML (DHTML)
12
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
WebBrowser
App Server Application TemplateEngine
BrowserCache
assign
display T
render
Skeletal HTML
get template T
fill T with params
include scripts
T contentT content
Skeletal HTML(bootstrap codew/ params)
Browser Caches are Now Leveraged
Client-sideTemplate Engine Scripts
Templates
13
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
function display($template_id) { $js_template = “\“{$template_id}\””; $js_params = json_encode($this->params); echo ‘<script src=“/lib/filler.js”></script>’; // template engine echo “<script>fill_template({$js_template},{$js_params});</script>”;}
The Server-side Implementation
assign() remains same as the original
Original code for generating final HTML document
$smarty->assign('userid', $_SESSION['userid']);$smarty->assign('summary', $summary);$smarty->display('account_summary.tpl');
14
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Agenda
The template-based programming modelfor Web application development
The mechanism of FlyingTemplate Server throughput experiments
Rest of the talk is for Web geeks Security in automated client-server partitioning Caching in Web browser scripting (or Ajax)
15
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
0
100
200
300
400
500
600
700
800
acco
unt_s
ummar
y
chec
k_detail
_htm
l
profi
le
chan
ge_profile
trans
fer
post_tr
ansfe
r
add_p
ayee
post_pa
yee
bill_p
ay
quick
_pay
bill_p
ay_st
atus
_outpu
t
orde
r_che
ck
place
_che
ck_order
Thr
ough
put
(# /
sec
)
OriginalMovablet FlyingTemplate
Original (Smarty)
1.6 – 2.0x improvement of server throughputwith no human-visible client-side latency change
2x Server Throughput
Results with the SPECweb 2005 Banking Application
SUT: PHP 5.2.6 w/APC, Lighttpd 1.4.18 FastCGI, Linux FC7 / 3.4GHz Xeon 3GB
Hig
he
r is
be
tte
r
16
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
0
10
20
30
40
50
60
70
80
90
100
Original FlyingTemplate
Rel
ativ
e C
PU
Usa
ge
(%)
Other Processes
others
mod_fastcgi.so
libssl.so
e1000
lighttpd
libc-2.6.so
libcrypto.so
others
json.so
e1000
libpcre.so
apc.so
libc-2.6.so
php-cgi
PHPRuntime
WebServer
PHP Runtime
Web Server
CPU Usage for Each Component Reduced
Parameter encoding cost in Flying Template is small(Just a line in the picture)
Sh
ort
er
is b
ett
er
Relative CPU Usage for providing a single page
17
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Cache Miss Effect are Acceptable
0
100
200
300
400
500
600
700
1 0.9 0.8 0.7 0.6 0.5 0.4 0.3 0.2 0.1 0
Cache Hit Ratio of Templates
Thr
ough
put (#
of r
eque
sts)
Original
0
100
200
300
400
500
600
700
1 0.9 0.8 0.7 0.6 0.5 0.4 0.3 0.2 0.1 0
Cache Hit Ratio of Client- side Template Engine
Thr
ough
put (#
of r
eque
sts)
Original
Case: 1 new user per 2 pages Case: new pages (new templates)
Effect of Client-side template engine cache miss Effect of Template cache miss
Hig
he
r is
be
tte
r
Hig
he
r is
be
tte
r
18
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Agenda
The template-based programming modelfor Web application development
The mechanism of FlyingTemplate Server throughput experiments
Rest of the talk is for Web geeks Security in automated client-server partitioning Caching in Web browser scripting (or Ajax)
19
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Naïve Automatic Client-Server Partitioning Has Security Problems in the Web Environment
Lots of existing techniques for automatic client-server partitioning ignore security issues
– Hilda lets programmers to write Web applications in a special language and to generate client-side JavaScript and server-side Java code. [Yang, WWW 2007]
Ignoring security makes them impractical in the Web environment
Allowing secure partitioning requires programmers’ efforts– JOrchestra accepts some programmer-specified policies for distributin
g functional components of existing applications to specified places. [Tilevich, ECOOP 2002]
– Swift lets programmers to write a program with a special security annotation to partition the program security among client and server. [Chong, SOSP 2007]
Writing secure code is not easy
20
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Security Concerns in Automatic Client-Server Partitioning
Known problems:– Authentication (for access)
– Confidentiality (of backend data)
– Integrity (of backend data)
check_login();$smarty=new SmartyBank;
$summary=backend_get($_SESSION['userid']);
$smarty->assign('userid', $_SESSION['userid']);$smarty->assign('summary', $summary);$smarty->display('account_summary.tpl');
Access controlsshould not be done on
untrusted clients
Direct DB accessesshould not be allowed for
untrusted clients
21
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Template’s Role = Separation of “View”
Templates are popular mainly for separation of “view” from “model and logic” [Parr, WWW2004]
– Most Web applications use template mechanisms.
– The Model-View-Controller architecture pattern is perceived well.
In other words, putting complex logic in a template spoils the benefit
– It is allowed by template languages in practice but is a well-known anti-pattern
23
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Agenda
The template-based programming modelfor Web application development
The mechanism of FlyingTemplate Server throughput experiments
Rest of the talk is for Web geeks Security in automated client-server partitioning Caching in Web browser scripting (or Ajax)
24
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Standardization of XHR Caching Implementationin Web Browsers Desired
Cache XHR? Invalidation?
Mozzila Firefox Need work around
MS IE Need work around
Opera No
Apple Safari Need work around
Google Chrome Need work around
25
Tokyo Research Laboratory
Michiaki Tatsubori, HTML Templates that Fly, at WWW 2009, Spain, Madrid, April 23, 2009 © 2009 IBM Corporation
Concluding Remarks
An interesting variation of server-side template engine implementation
– Having ability to replace existing application’s template engine component
– Taking caching and security in the Web environment into account
A good motivator for XHR implementation standardization A potential supporter of template-based programming
– Enabling efficient and secure automatic client-server partitioning by smart heuristics exploiting the convention
– Desiring well-mannered template usage
Tokyo Research Laboratory
WWW 2009, Madrid, Spain, April 20-24, 2009 © 2009 IBM Corporation
Gracias!
Questions?