dot.py - a python template engine
DESCRIPTION
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.TRANSCRIPT
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