DOT.PYa python implementation of famous javascript template engineMonday, 27 May, 13
TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/TemplateResultTemplate EngineContent / DataMonday, 27 M...
TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!ResultTemplate En...
TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</...
TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</...
TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</...
Templatefunction anonymous(it) { varout=Name:<h1>+(it.name)+</h1>Msg:<h2>+(it.msg)+</h2>;return out; }Name: <h1>{{name}}</...
Templatefunction anonymous(it) { varout=Name:<h1>+(it.name)+</h1>Msg:<h2>+(it.msg)+</h2>;return out; }Name: <h1>{{name}}</...
TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</...
A lot of template Engine existshttp://garann.github.io/template-chooser/Monday, 27 May, 13
RequirementFor Internet Ads, we askBe the fastest template engineBe the smallest template engineDon’t need complex functio...
doT.pydoT.js is the fastest javascript template enginedoT.py is its python implementationv.s. mustache1. Performance: > 20...
UsagePre-Compiled to javascript (Convert)<script type=”text/javascript”>var pagefn = {{ js_template("templates/ad/layout/l...
UsagePre-Compiled to javascript (Convert)Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2><script type=”text/javascript”>var pa...
UsagePre-Compiled to javascript (Convert)Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2><script type=”text/javascript”>var pa...
Usagefunction anonymous(it) { varout=Name:<h1>+(it.name)+</h1>Msg:<h2>+(it.msg)+</h2>;return out; }Pre-Compiled to javascr...
Usagefunction anonymous(it) { varout=Name:<h1>+(it.name)+</h1>Msg:<h2>+(it.msg)+</h2>;return out; }Pre-Compiled to javascr...
Usagefunction anonymous(it) { varout=Name:<h1>+(it.name)+</h1>Msg:<h2>+(it.msg)+</h2>;return out; }Pre-Compiled to javascr...
Server Side Template EngineServerClient(browser)1. No dependency on client side2. Fast initial load3. Control over user ex...
Client Side Template Engine1. Save bandwidth (Json vs. Html)2. Reduce server load3. Single endpoint (flexible)ServerClient...
doT.pyServerClient(browser)Datapreomplied templateResult DataA python implementation of doT.js, compile template to pureja...
“to be super fast, super light-weight client side template”pre-compiledsuper fast (only execute one pure javascript functi...
What’s next?Client side template is HOT, butTweet decided move back to server side because performanceissue. more importan...
Upcoming SlideShare
Loading in …5
×

doT.py - a python template engine.

2,630 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,630
On SlideShare
0
From Embeds
0
Number of Embeds
486
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

doT.py - a python template engine.

  1. 1. DOT.PYa python implementation of famous javascript template engineMonday, 27 May, 13
  2. 2. TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/TemplateResultTemplate EngineContent / DataMonday, 27 May, 13
  3. 3. TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!ResultTemplate EngineContent / DataMonday, 27 May, 13
  4. 4. TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</h1>Msg: <h2>I love python!</h2>ResultTemplate EngineContent / DataMonday, 27 May, 13
  5. 5. TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</h1>Msg: <h2>I love python!</h2>ResultTemplate Enginename: Marymsg: I hate php!Content / DataMonday, 27 May, 13
  6. 6. TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</h1>Msg: <h2>I love python!</h2>ResultTemplate Enginename: Marymsg: I hate php!Name: <h1>Mary</h1>Msg: <h2>I hate php!</h2>Content / DataMonday, 27 May, 13
  7. 7. Templatefunction anonymous(it) { varout=Name:<h1>+(it.name)+</h1>Msg:<h2>+(it.msg)+</h2>;return out; }Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</h1>Msg: <h2>I love python!</h2>ResultTemplate Enginename: Marymsg: I hate php!Name: <h1>Mary</h1>Msg: <h2>I hate php!</h2>Content / DataMonday, 27 May, 13
  8. 8. Templatefunction anonymous(it) { varout=Name:<h1>+(it.name)+</h1>Msg:<h2>+(it.msg)+</h2>;return out; }Name: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</h1>Msg: <h2>I love python!</h2>ResultTemplate Enginename: 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 dont have a name?{{?}}Monday, 27 May, 13
  9. 9. TemplateName: <h1>{{name}}</h1>Msg: <h2>{{msg}}</h2>Representation/Templatename: Davidmsg: I love python!Name: <h1>David</h1>Msg: <h2>I love python!</h2>ResultTemplate Enginename: 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 dont have a name?{{?}}Monday, 27 May, 13
  10. 10. A lot of template Engine existshttp://garann.github.io/template-chooser/Monday, 27 May, 13
  11. 11. RequirementFor Internet Ads, we askBe the fastest template engineBe the smallest template engineDon’t need complex functionSupport both logic and logiclessMonday, 27 May, 13
  12. 12. doT.pydoT.js is the fastest javascript template enginedoT.py is its python implementationv.s. mustache1. Performance: > 200x2. Size: < 1/103. Support both logic and logicless usagehttps://github.com/lucemia/doTMonday, 27 May, 13
  13. 13. UsagePre-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.pyMonday, 27 May, 13
  14. 14. UsagePre-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.pyMonday, 27 May, 13
  15. 15. UsagePre-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.pyMonday, 27 May, 13
  16. 16. Usagefunction anonymous(it) { varout=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.pyMonday, 27 May, 13
  17. 17. Usagefunction anonymous(it) { varout=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.pyMonday, 27 May, 13
  18. 18. Usagefunction anonymous(it) { varout=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 RuntimeDoT.pyMonday, 27 May, 13
  19. 19. Server Side Template EngineServerClient(browser)1. No dependency on client side2. Fast initial load3. Control over user experienceTemplateDataTemplate EngineResultResultRequestResponseMonday, 27 May, 13
  20. 20. Client Side Template Engine1. Save bandwidth (Json vs. Html)2. Reduce server load3. Single endpoint (flexible)ServerClient(browser)Template DataTemplate EngineResult DataMonday, 27 May, 13
  21. 21. doT.pyServerClient(browser)Datapreomplied templateResult DataA python implementation of doT.js, compile template to purejavascript function1. No template and template engine in runtime2. Template engine only execute once while deployTemplatepreomplied templatedoT.pyMonday, 27 May, 13
  22. 22. “to be super fast, super light-weight client side template”pre-compiledsuper 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. 23. What’s next?Client side template is HOT, butTweet decided move back to server side because performanceissue. more important, usability.“To improve the twitter.com experience for everyone, wevebeen working to take back control of our front-endperformance by moving the rendering to the server. This hasallowed us to drop our initial page load times to 1/5th of whatthey were previously and reduce differences in performanceacross browsers.”http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.htmlMonday, 27 May, 13

×