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

HTML Templates that Fly– A Template Engine Approach to Automated Offloading from Server to Client Michiaki Tatsubori and Toyotaro Suzumura IBM Research, Tokyo Research Laboratory

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

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)

Template = Final Result (Document) with “Holes” Template HTMLwith“Holes” Result hole hole ActualHTML TemplateEngine hole param1 param2 Parameters param3 param1 param2 param3 For PHP, Smarty, StringTemplate, XTemplate, etc

Common usage among various template engines for Web application development: Specify a template Specify parameters Indicate generation of results The Manner of Template Programming Rendered page: PHP code fragment using a Smarty template engine: check_login(); $smarty=new SmartyBank; $summary=backend_get($_SESSION['userid']); $smarty->assign('userid', $_SESSION['userid']); $smarty->assign('summary', $summary); $smarty->display('account_summary.tpl');

An Example Template A template in SPECweb <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> … Parameters Iterations Arrays Conditional Branches

Conventional Template Engines Generate HTMLat Server Side Client: Server: <HTML><HEAD>…</HEAD><BODY> ….…. <TABLE> ….</BODY></HTML> Loads Here

<HTML><HEAD>…</HEAD><BODY> ….…. <TABLE> ….</BODY></HTML> FlyingTemplate’s Template Engines GenerateSkeletal Scripts (Instead of Final HTML) Final, full HTML Bootstrap JavaScript code <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.)

Templates are Sent Separately with FlyingTemplateto Let Clients Do the Job Flying Template: A skeletal script at client sidedoes the job instead, usingXMLHttpRequest (XHR) andDynamicHTML (DHTML) Normal Template Engine: Client-sideTemplate Engine Scripts Templates

Browser Caches are Now Leveraged Client-sideTemplate Engine Scripts Templates

The Server-side Implementation $smarty->assign('userid', $_SESSION['userid']); $smarty->assign('summary', $summary); $smarty->display('account_summary.tpl'); 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>”; } Original code for generating final HTML document assign() remains same as the original

2x Server Throughput • Results with the SPECweb 2005 Banking Application Original (Smarty) FlyingTemplate Higher is better SUT: PHP 5.2.6 w/APC, Lighttpd 1.4.18 FastCGI, Linux FC7 / 3.4GHz Xeon 3GB 1.6 – 2.0x improvement of server throughputwith no human-visible client-side latency change

CPU Usage for Each Component Reduced Relative CPU Usage for providing a single page Web Server WebServer Shorter is better PHP Runtime PHPRuntime Parameter encoding cost in Flying Template is small(Just a line in the picture)

Cache Miss Effect are Acceptable Effect of Template cache miss Effect of Client-side template engine cache miss Higher is better Higher is better Case: new pages (new templates) Case: 1 new user per 2 pages

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

Security Concerns in Automatic Client-Server Partitioning • Known problems: • Authentication (for access) • Confidentiality (of backend data) • Integrity (of backend data) Access controlsshould not be done onuntrusted clients check_login(); $smarty=new SmartyBank; $summary=backend_get($_SESSION['userid']); $smarty->assign('userid', $_SESSION['userid']); $smarty->assign('summary', $summary); $smarty->display('account_summary.tpl'); Direct DB accessesshould not be allowed foruntrusted clients

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

Standardization of XHR Caching Implementationin Web Browsers Desired

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

Gracias!Questions?

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