doT.py - a python template engine

DOT.PY a python implementation of famous javascript template engine

Monday, 27 May, 13

Template

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

Representation/Template

ResultTemplate Engine

Content / Data

Monday, 27 May, 13

Template

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

Representation/Template

name: Davidmsg: I love python!

ResultTemplate Engine

Content / Data

Monday, 27 May, 13

Template

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

Representation/Template

name: Davidmsg: I love python!

Name: <h1>David</h1>Msg: <h2>I love python!</h2>

ResultTemplate Engine

Content / Data

Monday, 27 May, 13

Template

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

Representation/Template

name: Davidmsg: I love python!

Name: <h1>David</h1>Msg: <h2>I love python!</h2>

ResultTemplate Engine

name: Marymsg: I hate php!

Content / Data

Monday, 27 May, 13

Template

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

Representation/Template

name: Davidmsg: I love python!

Name: <h1>David</h1>Msg: <h2>I love python!</h2>

ResultTemplate Engine

name: Marymsg: I hate php!

Name: <h1>Mary</h1>Msg: <h2>I hate php!</h2>

Content / Data

Monday, 27 May, 13

Templatefunction anonymous(it) { var out='Name:<h1>'+(it.name)+'</h1>Msg:<h2>'+(it.msg)+'</h2>';return out; }

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

Representation/Template

name: Davidmsg: I love python!

Name: <h1>David</h1>Msg: <h2>I love python!</h2>

ResultTemplate Engine

name: Marymsg: I hate php!

Name: <h1>Mary</h1>Msg: <h2>I hate php!</h2>

Content / Data

Monday, 27 May, 13

Templatefunction anonymous(it) { var out='Name:<h1>'+(it.name)+'</h1>Msg:<h2>'+(it.msg)+'</h2>';return out; }

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

Representation/Template

name: Davidmsg: I love python!

Name: <h1>David</h1>Msg: <h2>I love python!</h2>

ResultTemplate Engine

name: Marymsg: I hate php!

Name: <h1>Mary</h1>Msg: <h2>I hate php!</h2>

Content / Data{{? it.name }}<div>Oh, I love your name, {{=it.name}}!</div>{{?? it.age === 0}}<div>Guess nobody named you yet!</div>{{??}}You are {{=it.age}} and still don't have a name?{{?}}

Monday, 27 May, 13

Template

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

Representation/Template

name: Davidmsg: I love python!

Name: <h1>David</h1>Msg: <h2>I love python!</h2>

ResultTemplate Engine

name: Marymsg: I hate php!

Name: <h1>Mary</h1>Msg: <h2>I hate php!</h2>

Content / Data{{? it.name }}<div>Oh, I love your name, {{=it.name}}!</div>{{?? it.age === 0}}<div>Guess nobody named you yet!</div>{{??}}You are {{=it.age}} and still don't have a name?{{?}}

Monday, 27 May, 13

A lot of template Engine exists

http://garann.github.io/template-chooser/

Monday, 27 May, 13

Requirement

For Internet Ads, we ask

Be the fastest template engine

Be the smallest template engine

Don’t need complex function

Support both logic and logicless

Monday, 27 May, 13

doT.pydoT.js is the fastest javascript template engine

doT.py is its python implementation

v.s. mustache

1. Performance: > 200x 2. Size: < 1/10 3. Support both logic and logicless usage

https://github.com/lucemia/doT

Monday, 27 May, 13

Usage

Pre-Compiled to javascript (Convert)<script type=”text/javascript”> var pagefn = {{ js_template("templates/ad/layout/layout_h_org.html") }}; var result = pagefn(data);</script>

DoT.py

Monday, 27 May, 13

Usage

Pre-Compiled to javascript (Convert)

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

<script type=”text/javascript”> var pagefn = {{ js_template("templates/ad/layout/layout_h_org.html") }}; var result = pagefn(data);</script>

DoT.py

Monday, 27 May, 13

Usage

Pre-Compiled to javascript (Convert)

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

<script type=”text/javascript”> var pagefn = {{ js_template("templates/ad/layout/layout_h_org.html") }}; var result = pagefn(data);</script>

DoT.py

Monday, 27 May, 13

Usagefunction anonymous(it) { var out='Name:<h1>'+(it.name)+'</h1>Msg:<h2>'+(it.msg)+'</h2>';return out; }

Pre-Compiled to javascript (Convert)

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

<script type=”text/javascript”> var pagefn = {{ js_template("templates/ad/layout/layout_h_org.html") }}; var result = pagefn(data);</script>

DoT.py

Monday, 27 May, 13

Usagefunction anonymous(it) { var out='Name:<h1>'+(it.name)+'</h1>Msg:<h2>'+(it.msg)+'</h2>';return out; }

Pre-Compiled to javascript (Convert)

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

<script type=”text/javascript”> var pagefn = {{ js_template("templates/ad/layout/layout_h_org.html") }}; var result = pagefn(data);</script>

DoT.py

Monday, 27 May, 13

Usagefunction anonymous(it) { var out='Name:<h1>'+(it.name)+'</h1>Msg:<h2>'+(it.msg)+'</h2>';return out; }

Pre-Compiled to javascript (Convert)

Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>

<script type=”text/javascript”> var pagefn = {{ js_template("templates/ad/layout/layout_h_org.html") }}; var result = pagefn(data);</script>

No Template Engine in Runtime

DoT.py

Monday, 27 May, 13

Server Side Template Engine

ServerClient

(browser)

1. No dependency on client side 2. Fast initial load3. Control over user experience

Template

Data

Template Engine

ResultResult

Request

Response

Monday, 27 May, 13

Client Side Template Engine1. Save bandwidth (Json vs. Html)2. Reduce server load3. Single endpoint (flexible)

ServerClient

(browser)

Template DataTemplate Engine

Result Data

Monday, 27 May, 13

doT.py

ServerClient

(browser)

Datapreomplied template

Result Data

A python implementation of doT.js, compile template to pure javascript function1. No template and template engine in runtime2. Template engine only execute once while deploy

Template

preomplied template

doT.py

Monday, 27 May, 13

“to be super fast, super light-weight client side template”

pre-compiled

super fast (only execute one pure javascript function)

super lightweight (no dependency, no template engine)

super useful (logic or logicless, as you wish!)

Monday, 27 May, 13

What’s next?Client side template is HOT, but

Tweet decided move back to server side because performance issue. more important, usability.

“To improve the twitter.com experience for everyone, we've been working to take back control of our front-end performance by moving the rendering to the server. This has allowed us to drop our initial page load times to 1/5th of what they were previously and reduce differences in performance across browsers.”

http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html

Monday, 27 May, 13