HTML Templates that Fly

Template Engines and System Scalability

Nguyen, H.
IBM Research, Tokyo Research Laboratory
ABSTRACT from the business logic and objects. This is a mantra for
Web applications often use HTML templates to separate the experienced Web application developers conforming to that
webpage presentation from its underlying business logic and architecture [20, 4]. It has become a de facto standard
objects. This is now the de facto standard programming model programming model for Web application development [10, 5].
for Web application development. This paper proposes a novel This paper proposes a novel implementation of server-side
implementation for existing server-side template engines, template engines that exploits the nature of the templatebased
FlyingTemplate, for (a) reduced bandwidth consumption in programming model to enhance existing Web applications to
Web application servers, and (b) off-loading HTML generation boost their server throughput. Instead of producing fully-
tasks to Web clients. Instead of producing a fully-generated rendered HTML pages, the proposed template engine
HTML page, the proposed template engine produces a skeletal produces skeletal scripts that run on a Web browser on the
script which includes only the dynamic values of the template client side. This bootstrap code includes only the template
parameters and the bootstrap code that runs on a Web browser parameter values, which change with each request, and then
at the client side. It retrieves a client-side template engine and retrieves the template data and the client-side template engine
the payload templates separately. With the goals of efficiency, separately. This allows Web browsers to cache the template
implementation transparency, security, and standards data, which is relatively static. Other skeletal scripts for the
compliance in mind, we developed FlyingTemplate with two dynamic pages based on the same template can then share the
design principles: effective browser cache usage, and cached template.
reasonable compromises which restrict the template usage This architecture contributes to the reduction of serverside
patterns and relax the security policies slightly but in a load since a server usually needs only to provide the skeletal
controllable way. This approach allows typical template-based scripts even though the dynamic data changes for each
Web applications to run effectively with FlyingTemplate. As an request. The improved server needs only to serve a client-side
experiment, we tested the SPECweb2005 banking application template engine for each new user and then a payload
using FlyingTemplate without any other modifications and saw template for each newly visited type of page using the same
throughput improvements from 1.6x to 2.0x in its best mode. In template. These transmissions may also happen when a client-
addition, FlyingTemplate can enforce compliance with a simple side cache is either stale or has a cache miss (because the
security policy, thus addressing the security problems of client- website has evolved, or because files have been flushed out of
server partitioning in the Web environment. the cache). Advantageously, the template engines and
templates are reduced to static files on the server’s file system,
which makes it easier for a Web server to serve them
Categories and Subject Descriptors compared to dynamically generating large and complex pages.
C.2.5 [Local and Wide-Area Networks]: Internet; D.2.3 The differences in the implementations are almost
[Software Engineering]: Coding Tools and Techniques; D.3.2 transparent and most typical Web applications should run
[Programming Languages]: Specialized Application without any modifications except for replacement of the
Languages template engine. In fact, we made our prototype emulate the
application programming interface of the Smarty template
General Terms engine library [19] for the PHP language [21, 25], so it can
replace the original Smarty libraries used in the SPECweb2005
Design Languages Performance Security
application that we used for our performance tests. This
simple method also works for at least some other Web
Keywords applications such as SugarCRM.
Template engines, Client-server partitioning, Web applications While naive automatic client-server partitioning exposes
security vulnerabilities, our implementation addresses these
Copyright is held by the International World Wide Web Conference problems by using secure loading to the clients. This involves
Committee (IW3C2). Distribution of these papers is limited to classroom the automatic enforcement of a simple security policy
use, and personal use by others.
controlled by the administrator of the Web application.
WWW 2009, April 20–24, 2009, Madrid, Spain.
Security is always of concern in publicly available Web
ACM 978-1-60558-487-4/09/04.
applications [29]. Typical automated client-server partitioning
1. INTRODUCTION technologies such as Hilda [28] have ignored the security
Web applications often implement the advantageous problems caused by porting some parts of the server-side logic
modelview-controller architecture [20, 11] by using HTML of a Web application to the untrusted clients. The
templates, often seeking to separate the webpage presentation contributions of the paper are: • a proposal for an template

951
engine approach to an automated client-server partitioning
system compatible with the existing Web architecture • a
design and implementation with efficient cache usage and
security
• experimental results for the proposed template engine
with an application in SPECweb2005, which is an
industry standard benchmark

• potential promotion of template-based Web application

development with the additional advantage of automatic
performance gains from using the proposed template
engine
The rest of the paper is organized as follows: In Section 2 we
motivate our proposal by discussing the programming model
and implementation of a reference template engine, used as a check_login();
representative of current template engines. Section 3 $smarty=new SmartyBank;
introduces FlyingTemplate, our proposal for the design of a
$summary=backend_get($_SESSION['userid']);
novel server-side template engine. In Sections 4 and 5, we
discuss the important implementation issues affecting $smarty->assign('userid', $_SESSION['userid']);
efficiency and security. We report on our experimental results $smarty->assign('summary', $summary);
in Section 6. After discussing related work in Section 7, we $smarty->display('account_summary.tpl');
conclude the paper in Section 8.
Figure 1: A final end-user view and a simplified PHP script
2. TEMPLATE-BASED PROGRAMMING using a template engine.
Template-based Web programming is popular mainly
because it separates the page representation, the“views”, from
the business logic and data of a program, the “controls and In this paper, we use the Smarty template engine library [19]
models”. Such templates are available as software libraries [20, for the PHP language [21, 25] as the reference implementation
11], as programming or modeling language features [5, 2] or as of a template engine. This library is used in many production-
Web application frameworks [10, 4]. The benefits include quality open source Web applications such as XOOPS and
encapsulating the look and feel of a website, clearly described SugarCRM. It is even used in SPECweb2005 [22, 26], the
views, a better division of labor between graphics designers and industry-standard Web server benchmark kit, with available
coders, component reuse for view designs, unified control over implementations for both PHP and Java. We used the release
the evolution of the appearance, better maintainability of the version 2.6.7 of Smarty, which is distributed with the
runtime, interchangeable view artifacts for different SPECweb2005 environment that we used for our experiments.
development projects, and security compatible with end-user Figure 1 includes a simple PHP script written using Smarty,
customizability [20]. extracted from SPECweb2005 and greatly simplified for this
explanation. This code first authenticates and authorizes the
2.1 Template Usage user by calling a user function check_login(). Then it instantiates
In general, there are three steps in using a template engine: a template engine object (from the class SmartyBank) and
assigns that reference to the variable $smarty. Next it calls the
• Specifying a template to use, user function backend_get() to access the backend database for
the required user data. The $_SESSION is a globally accessible
• Assigning values to the parameters as the actual content, associative array variable that holds the session data for the
user. Here, the userid is a key associated with a user identifier
and
number. The resulting data is stored into the variable
• Filling in the template with the assigned values to obtain $summary. Finally, it renders the output result based for the
user ID with the data obtained from the backend using the
the HTML results. template. The PHP runtime passes the output result to the
Though the application programming interfaces may vary for frontend Web server to be included in its HTTP response.
each template engine, they are essentially built around these In this example, the usage process of the Smarty template
steps. engine essentially consists of the calls to two methods, assign()
and display(). The assign() method is called to assign new values
to the parameters, while the display() method is called both to
specify a template and to fill it with the assigned values. For
the example in Figure 1, the template parameter ’userid’ is
bound to the user ID while the other parameter ’summary’ is
bound to the results constructed from the data obtained from
the backend database.

952
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ..> assigning each element to a new local variable $acct. Since the
<html>
<head><title>SPECweb2005: Account Summary</title></head> <body variable $acct still holds each element of the account
bgcolor="white">
information as an associative array value, its array elements are
<table summary="SPECweb2005_User_Id"> accessed through the form of $acct[n], where n is an associative
<tr><th>User ID</th></tr>
<tr><td>{$userid}</td></tr> key. This template also uses the selection language constructs if
</table>
and elseif while computing Boolean values using the equality
<table summary="SPECweb2005_Acct_Summary" cellpadding=3 border=1> test operator eq.
<tr><th>Account</th><th>Type</th><th>Current Balance</th>…</tr>
{foreach item=acct from=$summary}
<tr>
<td>{$acct[0]}</td>
<td>{if $acct[1] eq "1"} Checking 3. FLYING TEMPLATE
{elseif $acct[1] eq "2"}
Saving
FlyingTemplate is a server-side template engine. It looks
{else} much like a regular server-side engine that does the
Other
{/if}</td> templatefilling work on the server side, but actually lets the
<td>{$acct[2]}</td> clients do that work. In this paper, we use Smarty as a
…… parameterized burdens for other columns …… </tr>
{/foreach} reference template engine and PHP as the underlying
</table>
…… other burdens ……
programming language, but the design of FlyingTemplate itself
</body> should be applicable to other template engines and
programming languages.
</html>

Figure 2: An example template taking two parameters 3.1 Goals & Design Principles
$userid and $summary. The major design goals of FlyingTemplate are:

Efficiency – FlyingTemplate should perform better than

The name of the template file ’account_summary.tpl’ is specified existing template engines, at least in typical
when generating the final result. circumstances.

2.2 Expressive Power of a Template Standards compliance – The implementation should conform
to Web standards.
Language
The syntax used in templates is usually not limited to Implementation Transparency – Existing applications
language constructs for creating“holes”in an HTML document should run correctly without modifications.
with simple expressions to embed references to parameter
values. The syntax available to describe a typical template is Server Security – Introducing FlyingTemplate should not
much richer. It may include iterators over array values, create unexpected security vulnerabilities.
selections based on parameters, and references to other
templates. In addition, there are often language constructs for The first goal, efficiency, is essential since FlyingTemplate
calculations based on one or more parameter values and literal makes sense only if it can improve the Web application
constant values, and usage of template local parameters for compared to its original template engine. FlyingTemplate
storing intermediate results. should not change the visible functionality of a Web
While a template language is just a programming language, application, but enhance the server throughput, which is the
templates make sense only if they are used for the sake of primary reason to use FlyingTemplate. The other three goals
simplicity that would be negated by complicated embedded are for adapting existing Web applications to work without
logic. For example, even PHP can be regarded as a template modification in the same environments, and to allow
language from a certain perspective, since the programmer programmers to work with existing template-based
embeds PHP code in an HTML document. In fact, in practice programming models. Compromising on the later goals may
most of the template engines such as Smarty offer Turing- make sense for FlyingTemplate, but would limit its
complete languages, and they can easily lose their advantages applications.
when they are used without regard for certain rules about the Therefore, for FlyingTemplate to have a broad appeal, the
separation of concerns [20, 4]. last three goals are also important. FlyingTemplate needs to
Complex but still modest usage of language constructs conform to the standards in order to handle most of the
appears in SPECweb2005. Figure 2 is a Smarty template used for current Web architectures and existing Web applications that
the account summary page of the SPECweb2005 banking depending on the standards. That includes formal standards
application (also greatly simplified from the original for this such as the HTTP protocol and de facto standards such as the
explanation). The parts in bold are embedded “programming” major browser implementations. It is best if we can apply
and the other parts are HTML text that will be copied out just as FlyingTemplate to existing applications without changing
it appears. The embedded directive {$userid} refers to the their code since that work would involve extra coding work
template parameter $userid to dump a parameter value into that and possibly create bugs, and might sometimes be impossible
position. for inaccessible application code. Finally, security is important
The directive {foreach ..}, paired with {/foreach}, indicates when considering publicly accessible applications in the Web
iterating over the elements of the array value of the template environment, where we cannot trust the client platforms.
parameter $summary. It generates an HTML page fragment from To achieve the goals, we developed FlyingTemplate with
the other template between the markers for each element, while these design principles:

953
Effective cache usage – Leveraging the browsers’ caches is between the Web application server with a traditional
the best way to reduce the load carried by the server for template engine and its clients. The bootstrap code fetches and
the clients. loads template engine scripts using DHTML, by dynamically
<script src=“/lib/filler.js"></script> adding new <script> tags with src attributes specifying the URL
<script>
fill_template("account_summary.tpl", of the engine scripts. It also retrieves
[["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>

Figure 3: A skeletal result including bootstrap JavaScript

code.

Reasonable compromise in transparency – Instead of

making the implementation completely transparent, we
focus on the typical uses of templates and rely on simple
security policies that are acceptable for most Web
applications.
In the rest of this section, we will describe the basic ideas of
the design and architecture of FlyingTemplate. The
discussions of cache use and security appear in Section 4 and
Section 5.

3.2 Skeletal Results

FlyingTemplate generates tiny pieces of client-side scripts
instead of generating fully rendered HTML documents. An
example of such code is shown in Figure 3, which is JavaScript
code within HTML. This bootstrap code has two components:
FlyingTemplate
• a client-side template engine loader
Figure 4: Interaction sequences with a normal template
• a template engine invocation with a template ID and engine (top) and the FlyingTemplate template engine
template parameter values embedded in the code (bottom).

In the example, filler.js is a JavaScript supplied by the original

function display($template_id) {
server, and the expression fill_template() calls a function for the
$js_template = “\“{$template_id}\””;
template application. The first argument“account $js_params = json_encode($this->params); echo ‘<script
summary.tpl”is a template ID as a string literal, while the second src=“/lib/filler.js”></script>’; // template engine echo
argument is a literal construction for an associative array which “<script>fill_template({$js_template},{$js_params});</script>”;
maps each parameter name to its value. }
The client-side template engine uses two functionalities,
XMLHttpRequest (XHR) and Dynamic HTML (DHTML), Figure 5: Server-side code fragments.
which are available for scripts running on recent Web browsers.
These functionalities are known as the basis for Ajax-style
programming [12] and are widely available in popular browser
a template by using XHR. Finally the loaded template engine
implementations such as Mozilla Firefox, Microsoft Internet
generates an HTML document object according to the template
Explorer, Opera, Apple Safari, and Google Chrome. XHR allows
and parameter values, inserting the results into the HTML
client-side scripts to asynchronously access the original server
content rendered in the browser’s graphical user interface.
via an HTTP connection [27]. DHTML allows scripting
languages to change the HTML constructs in a webpage, which
in turn affects the look and function of the otherwise-static 3.3 Server-Side Template Engine
HTML content, after or as the page is loaded [13]. The server-side implementation of FlyingTemplate
The bootstrap code retrieves the template data, in addition emulates the original template engine of the Web application.
to the client-side template engine. As illustrated in Figure 4, a It provides the same usability for the template engine as
client needs additional interactions with the original server in discussed in the section 2.1. For Smarty [19], we needed to
the new architecture, compared to the original interactions

954
provide the application programming interfaces for assign() header, which was introduced in HTTP/1.1, also allows use of
and display(), as shown in Figure 1. the “max-age” directive. We can specify one year as the term,
The core implementation of the logic is the generation of which is the maximum time allowed by the specification and
client-side code as shown in Figure 5. We omit the sufficiently long for our purposes.
implementation of assign() since this is just the code for storing In addition, we could potentially leverage heuristic
the given key-value pair in a table in the template engine freshness, in which a client can guess a cache entry’s plausible
instance. This implementation is unchanged from the original validity from its last modified time and last accessed time. It is
Smarty. allowed by the HTTP specification to assume a cache entry is
The code generation algorithm is also fairly simple. In order fresh if the elapsed time since the last access is less than some
to generate the bootstrap code shown in Figure 3, the engine ratio, say up to 10%, of the elapsed time since the last modified
first provides an embedded representation of the template ID time. Since the computation of the expiration period is based
and parameter values. In PHP, there is a utility function on the age of the content, we could set the last modified time
json_encode() for converting PHP objects into JavaScript literal of the content to be much earlier to make the expiration time
representations in the JSON format [16]. The code generator longer.
then emits the <script> tags and template invocation code
supplied filled in with the values provided with the template ID 4.2 Stale Template Notification
and parameter values. It is not a good idea for a server to try to track the states of
While it is omitted in Figure 5, there could be a test and branch the cached templates on numerous clients. Theoretically, it
in the body of display(). The test is for examine whether the would be possible for a server to remember the versions of the
template is written using a limited set of expressions that the templates served to each client. In this approach, the server
template engine can safely and efficiently replace with skeletal could notify each client about any template changes when
results. The set of expressions and the method of analysis can returning a skeletal result with a template ID. However, this
vary for each implementation, but that topic is beyond the scope approach would require the server to maintain a significant
of this paper. However, such an implementation could cache the amount of client state data, which would have a negative
analytic results to greatly reduce the costs of testing. impact on server scalability.
The server should, instead, simply include the version
4. PRECISE CACHE INVALIDATION information of the specified template when returning the
skeletal result. The version information of each template is
The templates are static content most of the time, so we would
available from the cache. It can be basic information appended
like to cache them on the client-side whenever possible.
to the original template, but we recommend leveraging the
However, we should not assume that they never change as their
Last-Modified field of the cached HTTP response for the
Web application evolves. At the same time, effectively exploiting
template. XHR offers a programming interface,
caching is crucial to realize the benefits of FlyingTemplate.
getResponseHeader() [27], for handling the HTTP headers of
Unless the templates are cached at the client’s side, the Web
responses, even if they are being retrieved from the cache.
browser would always fetch the templates from the server as
Since the date and time in the field was originally specified by
well as the skeletal results, which would increase the amount of
the server, that information is known when sending skeletal
transfers over the original reference template engine. While
results.
there could remain the advantage of offloading HTML document
An alternative to using the Last-Modified header would be
generation task, the benefit of reducing the network bandwidth
to use the ETag header available in the HTTP protocol. An
consumption would completely disappear.
HTTP client may use the ETag response header field for
Browser caches and their cache validation mechanisms using
comparison with other entities from the same resource. The
the HTTP If-Modified-Since request-header can partially
server can compute the ETag field value, which is usually
address this problem. The If-Modified-Since request-header
based on the file name and modification time. The use of the
field makes the response conditional: if the requested variant
ETag header field values has a potential advantage over the use
has not been modified since the date of the cached data retrieval,
of the Last-Modified header since this header is provided
no actual content but a 304 (not modified) response will be
specifically for such purposes. We will discuss this again in
returned [15] to reduce the size of the response message.
Section 4.4.
However, pairs of request and response are still required with
It is possible for the server to compute these values with
this mechanism, even for cache entries that are quite fresh.
limited CPU resources. In general, constructing the
In order to reduce the extra requests and responses for fresh
LastModified or ETag field values is not free since it requires
cache entries, we should first suppress cache validation, and then
retrieving, formatting, and encoding the modification time of a
trigger revalidation on demand by using the client scripts to
file into a serialized form of the value. However, the
control the state of the cache. The rest of this section discusses
computation result can easily be cached at the server side,
how to implement them based on the HTTP protocol.
similarly to the logic of caching the compiled templates at the
server side in a traditional template engine such as Smarty
4.1 Suppressing Cache Validation [19]. The heavy computation is only required when a newly
We can suppress cache validation by specifying“never modified template is first accessed on the server.
expires” as the term of validity for the content returned from a
server. Methods for specifying the term of content validity are
available in the HTTP protocol. The Expires response header has
been available since HTTP/1.0 and the Cache-Control response

955
4.3 Validation on Demand caches for XHR is immature and sometimes lacks the features
A client script first needs to determine whether or not a required to implement this revalidation process. Table 1
cached entry is fresh, based on a template ID and its version summarizes the current implementation status of popular
information such as a Last-Modified field value or an ETag field Web browsers in terms of efficient XHR cache
value, which it received as a part of a skeletal result from the implementations with HTTP/1.1 conformance 1 . We tested
server. To retrieve the cached entry, it should just issue an XHR the latest stable releases of five popular Web browsers on
call for the specified template on the server. The response for Windows XP SP2, as of October, 2008: Mozilla Firefox 3.0.3,
this request is obtained from the cache, since the expiration Microsoft Internet Explorer 6.0 SP2, Opera Web Browser
time is“never expires”, as already mentioned. Then the client 9.61, Apple Safari 3.1.2, and Google Chrome 0.2.1.49.
script can obtain the Last-Modified field or the ETag field from All of the tested browsers except Opera supported HTTP
the cached template response using getResponseHeader() to response caching for XHR. Opera is very conservative (marked
compare it with the value given in the skeletal result. “cons.” in the table) in conforming to the HTTP specification,
Then, the client may request an end-to-end reload or an but inefficient since caching is never used. The other 4
end-to-end revalidation according to these specifications browsers cache effectively, while sometimes failing to conform
[15], which are defined as: to the HTTP specification (marked“fail”in the table). Since we
cannot do anything with Opera as regards caching, we will only
End-to-end reload. The request includes a ”no- consider the other browsers for the rest of this section. In
cache”cachecontrol directive or, for compatibility with other words, FlyingTemplate will not work effectively when
HTTP/1.0 clients, a ”Pragma: no-cache”. The server MUST the tested version of the Opera Web Browser is used for
NOT use a cached copy when responding to such a browsing a Web application.
request. Fortunately, the other 4 browsers properly consider the
value of the Expires response-header field and the
Specific or unspecified end-to-end revalidation. The request CacheControl max-age directive when processing XHRs using
includes a ”max-age=0” cache-control directive, which their caches. While not of much concern in this paper, it is
forces each cache along the path to the origin server to known that there are differences in how and when the cached
revalidate its own entry, if any, with the next cache or data is revalidated when a human user indirectly requests
server. The revalidation is specific if the initial request revalidation, according to the cache testing website we used.
includes a cache-validating conditional with the client’s Firefox revalidates the cached response every time the page is
current validator, otherwise called unspecified. refreshed, issuing an ”If-Modified-Since”header with the value
set to the value of the ”Last-Modified”header of the cached
XHR offers a programming interface setRequestHeader() to add response. Internet Explorer does so only if the cached
to the HTTP headers of requests. response is expired. The performance of the FlyingTemplate
approach suffers from users frequently refreshing the page, as
4.4 Consolidated Invalidation by hitting the “reload” button.
The combination of the ETag response header and the If- However the revalidation of cached entries with“never
None-Match request headers can simplify the validation expires”seemed problematic. First, none of the browsers
process. While the original process still requires the two handled the most convenient If-None-Match header
steps of examining the freshness of the cache and effectively. They all tried to load from the original content
revalidation of a stale cache, we can consolidate the whenever the If-None-Match header was used. In addition,
examination step with the revalidation step by specifying an some of these browsers do not respect the no-cache or max-
ETag field value in the If-None-Match field. age=0 directives, which are used for forcing revalidations of
According to the HTTP specification [15], the ETag unexpired cache entries that a client script knows to be stale.
responseheader field provides the current value of the entity tag A workaround for these problems is to use the If-NoneMatch
for the requested variant. A server and its clients may use the header for refreshing the stale cache entries. The script should
entity tag for comparison with other entities from the same first examine the cache’s freshness and then force stale cache
resource. Then a client may use the If-None-Match data to be refreshed using the implementation side effects of
requestheader field to make the method like GET act the caching behavior for If-None-Match requests.
conditionally. A client that has one or more entities previously
obtained from the resource can verify that none of those entities
is current by including a list of their associated entity tags in the
If-None-Match header field. The purpose of this feature is to
5. SECURITY
allow efficient updates of cached information with a minimum In general, running some parts of a Web application which
amount of transaction overhead. has been developed to run on server side on the client side
creates security vulnerabilities. There are especially severe
risks for the server as regards the confidentiality of the server
4.5 Ajax Caveat in Practice data, the integrity of the inputs for server data, and the
Despite the useful features of HTTP/1.1, as is often the case accessibility authentication. The Web application of Figure 1
with Ajax technologies, the browser implementation of

1The browser cache tests in this paper are conducted based on

http://www.mnot.net/javascript/xmlhttprequest/cache.html
while we added some of missing tests for our purpose.

956
described in Section 2 offers an example. Running the logic of Cache) enabled to eliminate the parsing overhead. To measure
the original PHP code from the server side on the clients could the server throughput, we used Apache JMeter 2.3.2. We tuned
allow an altered Web browser to access the backend DB up the environment carefully based on our prior experience
directly through backend_get() as an arbitrary user, thus [26].
skipping the check_login() (an authentication problem). Even
for an authenticated user, this vulnerability might allow 6.2 Performance with SPECweb2005
accessing the backend DB directly to obtain the data that was To show the validity of our approach, we used SPECweb2005,
originally filtered out (a confidentiality problem) or altering which is a standard Web application benchmark defined by
the data (an integrity problem). SPEC. The three-tier architecture used for SPECweb2005
While it is an interesting research theme as how to retain the consists of a Web server, a PHP runtime, and a BESIM simulator
semantics of the original Web application including its which simulates database behavior. The banking scenario
security, we slightly compromised the security for represents an online banking Web application, characterized as
FlyingTemplate. Instead, we are focusing on achieving both an a secure Web application with SSL communication, such as
efficient implementation of the Web applications and checking account information, transferring money to different
acceptable security with a simple security policy that accounts, and so forth. The scenario is comprised of 12 different
developpers can easily understand and specify. The security web pages, and Table 2 shows comparisons of the average data
policy is simply that:
Table 1: Browser cache tests for XHR calls.
Tests Firefox MSIE Opera Safari Chrome Annotation
3.0.3 6.0SP2 9.61 3.1.2 0.2.149
Request Header Pass-Through Cache-Control: no-cache honored fail fail cons. fail success cons. (Not cached), fail (Cache-Control: no-cache not honored)
CacheControl
Cache-Control: max-age=0 honored fail fail cons. success success cons. (Not cached), fail (Cache-Control: max-age=0 not honored) cons.
Cache-Control: only-if-cached honored fail fail cons. fail fail (Not cached), fail (Cache-Control: only-if-cached not honored) cons.
Pragma: no-cache honored fail fail cons. fail success (Not cached), fail (Pragma: no-cache not honored)
Automatic Cache-Control Cache-Control not automatically appended success success success success success fail (Request cache-control header sent)

Validation Conditional Headers If-Modified-Since request header used success success fail success success fail (Header not sent)
If-None-Match request header used cons. cons. fail cons. cons. cons. (Fresh representation not used), fail (Header not sent)
Freshness 304 Not Modified Handling 304 status code automatically handled success success fail success success fail (304 not handled)
Basic Freshness Heuristic freshness success success cons. success success cons. (Freshness heuristics not used)

Cache-Control max-age response freshness success success cons. success success cons. (Fresh representation not used) cons.
Expires response freshness success success cons. success success (Fresh representation not used)
Query Freshness Heuristic freshness w/ "?" fail fail success fail fail fail (Stale representation used) cons.
Cache-Control max-age response freshness w/ "?" success success cons. success success (Fresh representation not used) cons.
Expires response freshness w/ "?" success success cons. success success (Fresh representation not used)
Private Caches Private responses cached success success cons. success success cons. (Not cached)

Variant Caching Arbitrary Negotiated response caching cons. fail fail cons. cons. cons. (Fresh representation not used), fail (Not used) fail
Arbitrary Negotiated response differentiation success success success fail success (Negotiated response used when it shouldn't have been)

• Template data cannot be confidential. size for each webpage in the banking scenario for the original
approach and for our Table 2: Average data size transferred
We believe this security policy is reasonably acceptable for for each page.
most Web applications because of the nature of templatebased (bytes) Original FlyingTemplate
programming for the separation of views from models and account summary 18195 361
logic. The designer of the view of a page should not be check detail html 12731 271
concerned about the server-side security of the Web profile 34295 327
application. In fact, we found many Web applications using change profile 24566 289
Smarty do place the template data at publicly accessible transfer 30393 255
locations with file names that can easily be guessed from the post transfer 15067 283
original URLs of the dynamically generated pages using those place check order 26438 288
templates. order check 25678 312
bill pay status output 23584 378
quick pay 17821 294
6. PERFORMANCE EVALUATION bill pay 35400 270
This section evaluates our approach by running a standard post payee 20136 208
Web benchmark application, the Banking scenario of add payee 17781 327
SPECweb2005, and also gives a detailed analysis of the
performance results.

6.1 Experimental Environment r

We use Lighttpd 1.4.19 as the server, running on an IBM r

IntelliStation M Pro with a single 3.4 GHz Xeon processor and

r
#
2 GB of RAM running Fedora Core 7 (kernel 2.6.23). Lighttpd
was configured to use 1 parent process and 2 worker
processes, and 8 FastCGI processes. For the client machines,
we use an IBM IntelliStation M Pro with a single 2.0 GHz
processor machine connected to the server via a 1GB Ethernet
Figure 7: Throughput with varying number of client
LAN. The network latency was 0.12 ms, and the actual network
threads.
throughput measured by netperf was 941 Mbit per second. For
the PHP runtime, we used PHP 5.2.6 with APC (Alternative PHP

957
approach. The table clearly shows that the data size to be 6.3 Profiling Result
transferred is greatly reduced. Figure 8 shows the relative CPU usage in processing a single
Figure 6 illustrates the performance results of the original request for the account summary page in the SPECweb2005
and our proposed runtime configuration. The vertical axis Banking scenario. As shown in this figure, the sharing of CPU
shows the throughput as the average number of requests per usage required for each component is similar between the two
second for each webpage indicated on the horizontal axis. The configurations. The JSON component, which is an additional
graph compares different loads with varying number of component required for FlyingTemplate, consumes only a small
clients, 1, 2, and 4 clients. Each client, corresponding to one fraction of the CPU time. In addition, the figure shows that our
JMeter load generator process, invokes 24 simultaneous approach reduces the CPU usage for SSL processing
requests with Java threads. As shown in the graph, our (libcrypto.so in the graph). This result was measured by the
approach outperforms the original configuration by at least profiling tool called oprofile, and is normalized by the relative
59% in the post transfer page, and by a maximum of 104% in throughput results provided by the previous experiment.
the profile page when compared with 1 client.
Figure 7 illustrates the throughput with varying numbers of
simultaneous requests from 10 to 30 from each client. This
6.4 Cache Effect
Our approach assumes that all of the template engine
experiment was performed in order to understand the
appropriate numbers of requests to achieve the best operations are performed on the browser side and that the
related files are cached most of the time. The two kinds of files,

Figure 6: Throughput for a SPECweb2005 Banking scenario.

throughput, since the previous experimental results were all

obtained Figure 8: Relative CPU usage for processing a
single request.

with the limited configuration of 24, 48 and 96 simultaneous

requests. The figure demonstrates that there is not much
difference in throughput for various numbers of client threads
with the moderately high loads from 20 to 30 threads, for each
template engine configuration. With moderately high load, the
CPU usage is close to 100%. Under lower loads, the response
times of the two configurations are at their best, but the
performance differences are below the noticeable levels for
human users, and thus do not matter.

958
 the template engine cache hit ratio of 0 shows a 61%
performance reduction compared to the ideal case where the
cache hit ratio is 1. The throughput was worse than the original
template engine configuration when the cache hit ratio was
lower than 0.6, which we believe unlikely to occur for typical
Web application scenarios. The significant degradation is due
to the large size of the client-side template engine scripts. The
client-side template engine for the experimented
FlyingTemplate implementation consists of three main
JavaScript files (about 33 kB in total), with one or more small
JavaScript files (less than 1 kB) depending on the template
engine functions required for each page.
The bottom graph of Figure 9 shows modest throughput
degradation as the template cache misses increase. The
situation is far better than the case for template engine cache
misses. In fact, the throughput is not as bad as the original
template engine configuration even when the template cache
misses every time. This occured because the separate
downloading of files avoids copying and processing large
template files in the PHP engine. The sizes of the transferred
templates are similar to the transferred data sizes for the
original configuration in Table 2. For example, the total size of
a template and a file called dynamic padding included for the
template in the account summary page of SPECweb2005 is
Figure 9: Throughput for various virtual cache hit ratios of
about 18 kB.
client-side template engine (top) and templates (bottom).

7. RELATED WORK
the client-side template engine files and the templates, are In the context of the distributed computing research, we can
designed to have different characteristics for their cache hit regard FlyingTemplate as one of the automatic partitioning
ratios. On the one hand, a single template engine can usually systems for a Web environment similar to Hilda [28].
be shared among any pages within a Web application or a However, fully automated partitioning of a normal program
website. The cache misses for the client-side template engine originally written assuming to work at server side poses
always occur when the user of the Web application first visits security problems in the Web environment as we discussed in
the website, or may occur when the cache is cleared at the Section 5.
client side or when the Web application changes the template
engine being used. In contrast, the templates usually differ for Security
each type of dynamically generated page. For example, the As far as the authors know, Swift [6] is the only work proposing
template for the account summary pages in the SPECweb2005 an automatic client-server partitioning system in a Web
Banking scenario is different from the templates for other environment with strong consideration of security. By forcing
pages such as profile pages in the same scenario. Therefore the programmers to write security annotations, it automatically
cache misses for a template are likely to be more frequent than partitions the programs written in a special but uniform
misses on the template engine and may also occur for the same language to run as client-side JavaScript and serverside Java.
kinds of reasons of client-side cache clearance or Web According to the security annotations, securitycritical code and
application change. data are always held on the server. The efficiency of the
To understand the effects of the cache, we compared the partitioned system depends on the complex analysis of the
server throughput with the varying virtual cache ratios shown entire program, which may not always be precisely optimal.
in Figure 9. This experiment assumes variations in cache hit The approach of FlyingTemplate can be regarded as greatly
probability for the template engine and templates. First, we easing this kind of security annotation task and giving
used various virtual cache hit ratios for the client-side template heuristics for efficient partitioning according to the convention
engine, P(E) (E: event of template engine cache hit), while of the template-based programming model.
holding the ratio for templates, P(T|E) = 1 and
Function Shipping
: event of template cache
Automated partitioning means the partitioning should be
hit), as shown in the top graph. Then we used various virtual transparent to the application programs and application
cache hit ratios for the templates, P(T|E), while holding the programmers. This transparency characteristic differentiates
ratio for the template engine, P(E) = 1, as shown in the bottom it from Web-based mobile agents [9], since that approach
requires programmers to write code according to their
graph.
frameworks and programming models.
The top graph of Figure 9 shows significant throughput The idea of transparently moving some functions in existing
degradation because of the frequent misses for the template software to the hosts suitable for their execution has been
engine cache. In the experimental results, the worst case with studied and examined for several decades. Significant amounts

959
of work have been done, especially on the requirements of the server-side template engine in a SPECweb2005 application with
host computers [7] and clusters [1]. More recent studies have from 1.6x to 2.0x improvement of the server throughput at peak.
explored techniques for automatically partitioning legacy While there are limitations in the programming style of
applications to multiple hosts for functional distribution templates when taking advantage of our FlyingTemplate, we
according to given policies [23, 24]. Generally applying these believe such limitations are acceptable when using templates
techniques in a Web environment needs to solve the same, for separation of views from controls and models in a Web
efficiency and security issues, and those problems are still application. Our prototype and experimental results also imply
open. a potential, additional benefit of template-based Web
Leff et al., used a model-driven approach in applying the application development. As an Ajax application, it also
model/view/controller design patterns to Web applications in anticipates reasonable demands for the standardization of Web
a partition-independent manner [18]. The applications were browser cache behavior and implementation conformance.
developed and tested in a single address-space but his
approach allows deploying them to various client/server
architectures without changing the applications’ source code. 9. ACKNOWLEDGMENTS
Since the partitioning decisions can be changed without Members of the Dynamic Scripting Language group in IBM
modifying the application, a designer can treat security policy Tokyo Research Laboratory, to which the authors belong,
as a partitioning decision. It is, however, difficult to link worked togather on PHP runtime research as a team, and thus
partitions to their security vulnerabilities. have influenced over the work presented in the paper from
various perspectives. Especially, Scott Trent worked very hard
Client-side Templates on experimental environment set-up which we also used in our
Style sheets and XSLT can be regarded as templates for HTML experiments in the paper. We also thank Akihiko Tozawa and
and XML documents. In particular, XSLT offers a great Tamiya Onodera for joining in early discussions which
expressiveness, allowing a translator to produce complex motivated the idea of FlyingTemplate.
HTML documents from dynamically generated XML elements.
While this approach requires mastering two quite different 10. REFERENCES
languages, programmers with the ability to write both the [1] K. Amiri, D. Petrou, G. R. Ganger, and G. A. Gibson. Dynamic function
server-side generator of the XML elements and the placement for data-intensive cluster computing. In Proceedings of the
appropriate XSLT templates can automatically benefit from General Track: 2000 USENIX Annual Technical Conference, June 18-23, 2000,
San Diego, CA, USA, pages 307–322. USENIX, 2000.
the client-server partitioning. Actually, we implemented
[2] J. Arnoldus, J. Bijpost, and M. van den Brand. Repleo: a syntax-safe template
another version of FlyingTemplate that generated XML engine. In Proceedings of GPCE 2007, 6th International Conference,
documents associated with XSLT style files as skeletal code. Generative Programming and Component Engineering, Salzburg, Austria,
We were able to generate these XSLT files from the original October 1-3, 2007, pages 25–32. ACM, 2007.
[3] Ashley IT Services Inc. RSLite demo. http://www.ashleyit.com/rs/rslite/.
templates, but it was very difficult to write XSLT translators
[4] H. Bottger, A. Møller, and M. I. Schwartzbach. Contracts for¨ cooperation
generating ill-formed HTML documents. This happened quite between Web service programmers and HTML designers. Journal of Web
often with existing Web applications, including SPECweb2005. Engineering, 5(1):65–89, 2006.
Our current implementation of FlyingTemplate is highly [5] S. Ceri, P. Fraternali, and A. Bongio. Web Modeling Language (WebML): a
dependent on the implementation of the client browsers, and modeling language for designing web sites. Computer Networks: The
International Journal of Computer and Telecommunication Networking,
the specific techniques and technologies known as Ajax. The 33(1-6):137–157, 2000.
essential part of the client-side capabilities are client-side [6] S. Chong, J. Liu, A. C. Myers, X. Qi, K. Vikram, L. Zheng, and X. Zheng. Secure
scripting capabilities that can communicate with the original web application via automatic partitioning. In Proceedings of SOSP 2007,
server and dynamically change the structure of their HTML the 21st ACM Symposium on Operating Systems Principles 2007, Stevenson,
Washington, USA, October 14-17, 2007, pages 31–44. ACM, 2007.
documents as rendered on the browser [14, 8]. [7] D. W. Cornell, D. M. Dias, and P. S. Yu. On multisystem coupling through
XMLHttpRequest [27] is one of the most famous function request shipping. IEEE Transaction on Software Engineering,
communication methods, and implements an interface 12(10):1006–1017, 1986.
exposed by a scripting engine that allows scripts to perform [8] Document Object Model (DOM) level 3 core specification version 1.0. W3C
Recommendation 07 April 2004, http://www.w3.org/TR/2004/REC-
HTTP client functions, such as submitting form data or loading DOM-Level-3-Core20040407/.
data from a server. Other alternatives are available, but with [9] P. Domel, A. Lingnau, and O. Drobnik. Mobile agent¨ interaction in
various benefits and drawbacks, such as iFrame calls [17], heterogeneous environments. In Proceedings of MA’97, First International
imagecookie calls [3], etc. Workshop on Mobile Agents, Berlin, Germany, April 7-8, 1997, LNCS 1219,
pages 136–148. Springer, 1997.
8. CONCLUDING REMARKS [10] P. Fraternali. Tools and approaches for developing data-intensive web
In this paper we proposed FlyingTemplate, which is a server- applications: A survey. ACM Comput. Surv., 31(3):227–263, 1999.
side template engine that automatically transfers more of the [11] F. J. Garc´ıa, R. I. Castanedo, and A. A. J. Fuente. A double-model approach to
achieve effective model-view separation in template based web
task of generating HTML documents to the client browsers. applications. In Proceedings of ICWE 2007, 7th International Conference on
Instead of producing a fully-generated HTML page, the Web Engineering, Como, Italy, July 16-20, 2007, LNCS 4607, pages 442–456.
proposed template engine produces a skeletal script which Springer, 2007.
includes only the dynamic values of the template parameters [12] J. J. Garrett. Ajax: A new approach to web applications, February 2005.
http://adaptivepath.com/ideas/essays/archives/000385.php.
and the bootstrap code that runs on a Web browser at the client
[13] D. Goodman. Dynamic HTML: The Definitive Reference. O’Reilly, December
side. We designed the architecture of the clientserver 2006.
partitioning for effective browser cache use with the [14] A vocabulary and associated APIs for HTML and XHTML, 2008. W3C
enforcement of a simple server security policy. A prototype Working Draft 10 June 2008, http://www.w3.org/TR/2008/WD-html5-
20080610/.
implementation can successfully be substituted for an existing

960
[15] Hypertext Transfer Protocol – HTTP/1.1, 1999. RFC 2616.
[16] The application/json media type for JavaScript object notation (JSON), July
19992006. RFC 4627.
[17] F. D. Keukelaere, S. Bhola, M. Steiner, S. Chari, and S. Yoshihama. Smash:
secure component model for cross-domain mashups on unmodified
browsers. In Proceedings of WWW 2008, the 17th International Conference
on World Wide Web, Beijing, China, April 21-25, 2008, pages 535–544. ACM,
2008.
[18] A. Leff and J. T. Rayfield. Web-application development using the
model/view/controller design pattern. In Proceedings of EDOC 2001, 5th
International Enterprise Distributed Object Computing Conference,
September 4-7, 2001, Seattle, WA, USA, pages 118–127. IEEE Computer
Society, 2001.
[19] New Digital Group, Inc. Smarty: Template engine.
http://www.smarty.net/.
[20] T. J. Parr. Enforcing strict model-view separation in template engines. In
Proceedings of WWW 2004, the 13th international conference on World
Wide Web, New York, NY, USA, May 17-20, 2004, pages 224–233. ACM, 2004.
[21] PHP: Hypertext preprocessor. http://php.net/.
[22] Standard Performance Evaluation Corporation.
SPECWeb2005, 2005. http://www.spec.org/web2005/.
[23] M. Tatsubori, T. Sasaki, S. Chiba, and K. Itano. A bytecode translator for
distributed execution of “legacy”Java software.
In L. Knudsen, editor, ECOOP 2001 - Object Oriented Programming, LNCS
2072, pages 236–255, Budapest, Hungary, June 2001. Springer-Verlag.
[24] E. Tilevich and Y. Smaragdakis. J-Ohrchestra: Automatic Java application
partitioning. In B. Magnusson, editor, ECOOP 2002 - Object Oriented
Programming, LNCS 2374, pages 178–204, Malaga, Spain, June 2002.
Springer-Verlag.
[25] A. Tozawa, M. Tatsubori, T. Onodera, and Y. Minamide.
Copy-on-write in the PHP language. In Proceedings of POPL
2009, the 36th ACM SIGPLAN-SIGACT Symposium on
Principles of Programming Languages, Savannah, Georgia, USA, January 21-
23, 2009, pages 200–212. ACM, 2009.
[26] S. Trent, M. Tatsubori, T. Suzumura, A. Tozawa, and T. Onodera.
Performance comparison of PHP and JSP as server-side scripting
languages. In Proceedings of Middleware 2008, ACM/IFIP/USENIX 9th
International Middleware Conference, Leuven, Belgium, December 1-5, 2008,
pages 164–182. Springer, 2008.
[27] The XMLHttpRequest object. W3C Working Draft 15 April 2008,
http://www.w3.org/TR/2008/WD-XMLHttpRequest20080415/.
[28] F. Yang, N. Gupta, N. Gerner, X. Qi, A. J. Demers, J. Gehrke, and J.
Shanmugasundaram. A unified platform for data driven web applications
with automatic client-server partitioning. In Proceedings of WWW 2007, the
16th International Conference on World Wide Web, Banff, Alberta, Canada,
May 8-12, 2007, pages 341–350. ACM, 2007.
[29] D. Yu, A. Chander, H. Inamura, and I. Serikov. Better abstractions for secure
server-side scripting. In Proceedings of
WWW 2008, the 17th International Conference on World Wide Web, Beijing,
China, April 21-25, 2008, pages 507–516.
ACM, 2008.

961