Tag Archives: Tenjin

Template engine – Why it’s better to use two of them at once?

Template engine

In the following post I’ll try to show and explain how and why I am using two template engines in every application I’m working on. Also, why and how I am choosing my template engine(s) I’m working with.

 

Intro (about me)

Developing in: .NET / Python / Java / Go / PHP and more,

  • New exciting and better tools are important to me!
  • Performance (server & client) are very important to me!
  • The ability to arrange and split the code smartly exact as I want is very important to me!
  • The ability to comment as I like inside the code and the client not to receive it is very important to me! (especially in web HTML/JS)

Who using Template engine

Probably every web developer is using a template engine. You can find it as integral part of most decent modern web development frameworks and environments. Many exist standalone and not as part of any framework. although, Templates Engines are not sole exist for Web development and are used in large variety of tasks. This post is dedicated to web development Template Engines which are called specifically – “Web Template System”

If you’re a web developer and you don’t know or use any Template Engine: You better run some self-tests(!). If you don’t know what is template engine and how to use it, you better read before you continue…

Note about PHP. as I call PHP a bad language but a great Template engine by itself, so in many cases Template engine doesn’t needed or not used (although there are many PHP templates engines).

 

So, Why one template engine? Why not 2?

All configurations of template engine I saw are using one template engine per application. The scenario is simple; The web developer creates a template for an HTML page.. process it on the server and send the results to the browser. for example:

<html>
<head>
   <title>$title</title>
</head>
<body></body>
</html>

In the above example, the server will fill the $title variable as needed and result with the following to the client:

<html>
<head>
   <title>Using My Template Engine</title>
</head>
<body></body>
</html>

…..

Now.. for my suggestion.

I’ve changed the way I am using template engine in my development. I am using two separate template engines in the app. One for creating minified html files with embedded JS and CSS, the other for filling the variables and send to the client.

I call the first TE(Template Engine) – The ‘First layer’, and second ‘Second layer’.

 

Example of 2-Layers-TE

Maybe It’s the best to show an example of how I am using my Templates engines together.

In this example I am rendering at first HTML using Tenjin (Python) and the second template engine as the web server is the basic Golang Template engine.

First Template Engine

<!-- all comments will be removed at the minify process -->
<html>
<head>
   <style><?py include('index.css') ?></style>
   <script type="text/javascript"><?py include('index.js') ?></script>
   <title>{{ .Title }}</title>
</head>
<body></body>
</html>

In the above example with Tenjin, you can see it includes two files: index.css and index.js which I I’ll show below. Also note the {{ .Title }} annotation which is NOT tenjin syntax but it’s golang template engine syntax, which means the first template engine (Tenjin) will just output this into the final html result.

The Styles are saved in another file (index.css):

// All comments will be removed at the minify process
body { background-color: blue }

Actually, I am using SCSS (SASS) for my CSS development, and then I compile and minify them (in the same script as part of the whole website compile) into index.min.css file. then, the above Tenjin imports index.min.css and not index.css. Also, I’m adding one more global.css which is embedded into all htmls.

And the JS are saved in another file (index.js):

$(function () {
 // also, those comments will be removed on minify
});

As with the CSS, sometimes I use CoffeeScript or IcedCoffeeScript and then compile it into JS.
Also, as part of the compile process, I am minifying the JS to index.min.js and Tenjin imports the minified file and not the source. If I use JS (and not CS or ICS) I minifyjs it before too, and in the process doing a syntax check.

Then, Using script I made – I minify all the templates (with inline CSS and JS) onto:

<html><head><style>body{background-color:blue}</style><script type="text/javascript">$(function(){});</script><title>{{ .Title }}</title></head><body></body></html>

You can see that the {{ .Title }}, which is Golang template engine syntax is still here. The first template engine (which in our case is Tenjin) isn’t processing the variables and just minify them with everything else.

Now, its ready to use from the Golang environment Template Engine. comment-less, minified and as one document, even if it’s built from 10 CSS files, 10 JS files and hierarchical templating.

In this way the actual logic designing of the hierarchy of the templates are done in the first layer and the second layer is only responsible to fill in the variables and pass to the client.

How I choose the templates engines?

The equation I use is simple:

FOR THE FIRST LAYER I use for the strongest template engine I can find. I like features like inheritance, raw, import, widgets …… ! I need everything! Performance isn’t needed at all at the first layer. It’s compiled after work has done in the code and then that’s it!. I want to be able to arrange my website htmls into preety smart structure. To split the JS files into many logic files… same with CSS. After it will be rendered for the second layer it will be fully minified as one document. then the performance matters…

FOR THE SECOND LAYER I use the fastest template engine I can find. Caching of templates is a must feature! Here the performance matters!. The template engine could be Logic-Free or not, It’s design decision, but no need here for hierarchy or any other expert feature in the TE as it using the full minified htmls. only to read the html from file into memory and then fill it now and then with data and pass to client.

REMEMBER You need to choose two TE with different syntax(!). You can’t use two of them that has the same snytax (like {{ var }}). Tenjing is using <% %> and Golang is using {{ }}.

If you’ll later use client side TE you better take that into account. AngularJS is using {{}}. Angular Syntax must be changed or another TE must be chosen for the second layer.

 

So, Why it’s good for?

So, Why I am doing this complex structure? Those are the advantages of this method:

  • Performance – Golang caches into memory the minified html with css, js embedded. it’s better for server side and for client side performance!!. It’s PRO! and minification doesn’t need to be done in real time!
  • You can create a complex inheritance for your files in the first layer WHILE you preserve performance in the second layer. You get to write and split code (html, css and js) in many files as you like. you know it will be all be merged and minified later….
  • You can put comments wherever you want freely!! (in the html as well as in the css/js) and they will be removed later by the minify process.
  • You can use Placeholders as usual in the webserver template engine (second layer), as well in the first layer.  application name, for example will be suited for the first layer as It doesn’t supposed to be changed but user name can be filled as usually in the second layer.
  • JS files are verified in the process!!. you will know about bad syntax before you’ll even open the browser!
  • If you use SASS you’ll find it’s so sweet… at last! you can manage your CSS as you’ve always dreamed of!

Example

I made an example @ Github (https://github.com/ET-CS/2TE). I used Cheetah(Python) as the first layer, as it have lot more features then Tenjin, and I’ve used Golang as the webserver (second layer). although Golang is not the fastest TE I know, it’s fast enough and I really like Golang as a web server.

I made another example @ https://github.com/ET-CS/2TE-Bootstrap which is essentially the same idea as 2TE, but it is ready packed with Bootstrap HTML on either Jinja2 or Cheetah as the First layer. Great boilerplate for amazing fast web application!!

 

Always think performance…… and always MInified is better!!!

Development Specialist, Artist and Activist
Personal Website

Jinja2 vs Tenjin: Why I moved (back) from Jinja2 to Tenjin

Jinja2 vs Tenjin: The Story

I started a new project: for learning purposes: to learn python gevent api and to implement a simple server – with Authentication & Websockets.

First thing after handling routings and starting server with the famous ‘hello, world!’ message was to find a suitable Framework, if any.

After a search I found Bottle which I think is amazing microframework. Flask was also great, but I loved the idea of a microframework without template engine so I could choose my own.

As I worked with many Template engines in many different languages and environments (.NET/Ruby/Node.js/Python/PHP/and more). I know I can handle any syntax, so the first thing I’ve looked for is the fastest Python template engine.

I’ve choosed to try Tenjin, It worked great, looked bad. the syntax was messy, there was that .cache file near my.pyhtml files… But it worked great and FAST!

I’ve got to admit that SpitFire catched me, and I’d choose it for several reasons:

  • Really FAST!!
  • Trivial Cheetah templates will probably compile in Spitfire

But as I ‘m not using Cheetah and the Languages support Tenjin offers – for me It is Winning case for Tenjin.

 

Jinja2 vs Tenjin

I decided to try more template engine, slower – but friendly : Jinja2.

Tenjin syntax , which was somewhat ugly, and Jinja2 was just beautirful, and reminds me Django’s and Twig which I like… So, I;ve decided to try Jinja2 and to feel the difference.

Found no problems there, Jinja2 was working great, and the .html files are looking great in compare to Tenjin,.. more readable, no .cache file – and .html instead of .pyhtml. I’ve choosed to stick with Jinja2… for now…..

…meanwhile.. on another project I’m working on in Django, I’ve tried to implement Googles AngularJS and found my self in a very bad situation. the AngluarJS Template Engine was similar to Django’s one! There are several solutions and fixes for this, some are really messy but I fixed it… and I’ve learned a very important lesson… Templates engines used today in both sides: both client & server, and this should be taken into consideration when choosing template engines.

The true title of this article should be: Why I moved from Tenjin to Jinja2 and why I moved from Jinja2 to Tenjin again..

As Jinja is very similar to Django (and angular) I found my self thinking about Tenjin again…

  • It’s faster then Jinja.. it’s faster then most teamplte engines!.. ,
  • it support many languages which make the project more trasferable and convertable between servers (Supports PHP, Perl, Ruby & Python).
  • It supports JS templating – wchich I haven’t tried yet,
  • It’s different then the mainstream template engines with {{ }} and {*  *} so mixing Template engines with client side template engines should be safer.

  

Summary

I know it’s not a classical -vs- article which compares between features, and there is a lot to cover in the topic of jinja2 vs tenjin and the feautres of both,.. I choosed to wrote instead on my view and decisions… what made me go back to Tenjin and leave Jinja 2 behind.. This is my story of Jinja2 vs Tenjin… In my case, Tenjin won, but I MUST say that Jinja2 is GREAT!, also: SpitFire, Mako Template, Cheetah, Genshi & others… as always: each tool for different task… It’s your call…

 

 EDIT:

I learned about Jinja2 inheritance feature which is missing in Tenjin. If you need Template Inheritance go for Tenjin (or other).

 

What do you think? Which Python Template engine do you use? and why?

Development Specialist, Artist and Activist
Personal Website