HTML Templates that Fly – A Template Engine Approach to Automated Offloading from Server to Client

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


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



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



Agenda




5



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



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



<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"><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>

<table>

<tr><td><b><font color="#9400d3">SPECweb2005: Account Summary</font></b></td>

</tr></table>{include file="menu.tpl"}

<pre> {include file=$PADDING_DIR|cat:"account_summary"}</pre>

</body></html>

An Example Template

Parameters

Iterations

Arrays

Conditional Branches

A template in SPECweb

8



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



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



Agenda




11



WebBrowser


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


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



WebBrowser


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



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


14



Agenda




15



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



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



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



Agenda




19



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



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']);


Access controlsshould not be done on

untrusted clients

Direct DB accessesshould not be allowed for

untrusted clients

21



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



Agenda




24



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



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


WWW 2009, Madrid, Spain, April 20-24, 2009 © 2009 IBM Corporation

Gracias!

Questions?

Documents

HTML Templates that Fly – A Template Engine Approach to Automated Offloading from Server to Client