doT.py is a python implementation of a famous micro javascript template engine doT.js. It is tiny, fast and support all features for doT.js via precompile template on python based server side.

1. DOT.PY
a python implementation of famous javascript template engine
Monday, 27 May, 13

2. Template
Name: <h1>{{name}}</h1>
Msg: <h2>{{msg}}</h2>
Representation/Template
ResultTemplate Engine
Content / Data
Monday, 27 May, 13

3. Template
Name: <h1>{{name}}</h1>
Msg: <h2>{{msg}}</h2>
Representation/Template
name: David
msg: I love python!
ResultTemplate Engine
Content / Data
Monday, 27 May, 13

4. Template
Name: <h1>{{name}}</h1>
Msg: <h2>{{msg}}</h2>
Representation/Template
name: David
msg: I love python!
Name: <h1>David</h1>
Msg: <h2>I love python!</h2>
ResultTemplate Engine
Content / Data
Monday, 27 May, 13

5. Template
Name: <h1>{{name}}</h1>
Msg: <h2>{{msg}}</h2>
Representation/Template
name: David
msg: I love python!
Name: <h1>David</h1>
Msg: <h2>I love python!</h2>
ResultTemplate Engine
name: Mary
msg: I hate php!
Content / Data
Monday, 27 May, 13

6. Template
Name: <h1>{{name}}</h1>
Msg: <h2>{{msg}}</h2>
Representation/Template
name: David
msg: I love python!
Name: <h1>David</h1>
Msg: <h2>I love python!</h2>
ResultTemplate Engine
name: Mary
msg: I hate php!
Name: <h1>Mary</h1>
Msg: <h2>I hate php!</h2>
Content / Data
Monday, 27 May, 13

7. Template
function 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: David
msg: I love python!
Name: <h1>David</h1>
Msg: <h2>I love python!</h2>
ResultTemplate Engine
name: Mary
msg: I hate php!
Name: <h1>Mary</h1>
Msg: <h2>I hate php!</h2>
Content / Data
Monday, 27 May, 13

8. Template
function 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: David
msg: I love python!
Name: <h1>David</h1>
Msg: <h2>I love python!</h2>
ResultTemplate Engine
name: Mary
msg: 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

9. Template
Name: <h1>{{name}}</h1>
Msg: <h2>{{msg}}</h2>
Representation/Template
name: David
msg: I love python!
Name: <h1>David</h1>
Msg: <h2>I love python!</h2>
ResultTemplate Engine
name: Mary
msg: 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

10. A lot of template Engine exists
http://garann.github.io/template-chooser/
Monday, 27 May, 13

11. 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

12. doT.py
doT.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

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

14. 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

15. 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

16. Usage
function 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

17. Usage
function 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

18. Usage
function 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

19. Server Side Template Engine
Server
Client
(browser)
1. No dependency on client side
2. Fast initial load
3. Control over user experience
Template
Data
Template Engine
Result
Result
Request
Response
Monday, 27 May, 13

20. Client Side Template Engine
1. Save bandwidth (Json vs. Html)
2. Reduce server load
3. Single endpoint (flexible)
Server
Client
(browser)
Template Data
Template Engine
Result Data
Monday, 27 May, 13

21. doT.py
Server
Client
(browser)
Data
preomplied template
Result Data
A python implementation of doT.js, compile template to pure
javascript function
1. No template and template engine in runtime
2. Template engine only execute once while deploy
Template
preomplied template
doT.py
Monday, 27 May, 13

22. “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

23. 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