Pisi HTML Template Engine 1.0 is Out!

Pisi is HTML templating engine that runs entirely in the browser. It can be used to scale down the size of ajax requests to the server by allowing them to switch from markup and data responses to data-only responses (for example JSON). Once fetched on the client, the data can be parsed by Pisi and converted to HTML and rendered on the page.

The syntax of Pisi is simple and intuitive, templates are cached on the client, so they can be used later, rendering process is fast, reliable and seamless.

Features

• Easy and intuitive API.
• Pure HTML with server-like function tags compiling to JavaScript.
• Two types of templates – on-page and external.
• Templates are compiled and cached for later use.
• Fast and seamless execution parsing and rendering.
• Support for different data types – variables, arrays, associative arrays (json), etc.
• Any JavaScript can be embedded directly to the template.
• Library-independent.
• Only 3Kb minified and gzipped

Some Example Code

Template:

[sourcecode language=”php”]
<script type="text/x-pisi-template" id="al_pacino_movies">
<h4>Al Pacino Movies</h4><ul>
<% for(var i = 0; i < pacino.length; i ++) { %>
    <li><a href="http://www.imdb.com/find?q=<%= pacino[i].replace(/s/g, ‘+’) %>&s=tt" title="Search IMDB for <%= pacino[i] %>" target="_blank"><%= pacino[i] %></a></li>
<% } %>
</ul></script>[/sourcecode]

Data Object:

[sourcecode language=”javascript”]
var pacino = ["Serpico", "Dog Day Afternoon", "Scent of A Woman", "Insomnia", "Carlito’s Way", "Heat"]
[/sourcecode]

Template Call:
[sourcecode language="javascript"]
_pisi.setExternal([{
    template: "al_pacino_movies",
    data: pacino,
    callback: function(html) {
        document.getElementById("movies").innerHTML = html;
    }
]}
[/sourcecode]
Rendered Markup:
[sourcecode language="xml"]
<h4>Al Pacino Movies</h4>
<ul>
<li><a target="_blank" title="Search IMDB for Serpico" href="http://www.imdb.com/find?q=Serpico&amp;s=tt">Serpico</a></li>
    <li><a target="_blank" title="Search IMDB for Dog Day Afternoon" href="http://www.imdb.com/find?q=Dog+Day+Afternoon&amp;s=tt">Dog Day Afternoon</a></li>
    <li><a target="_blank" title="Search IMDB for Scent of A Woman" href="http://www.imdb.com/find?q=Scent+of+A+Woman&amp;s=tt">Scent of A Woman</a></li>
    <li><a target="_blank" title="Search IMDB for Insomnia" href="http://www.imdb.com/find?q=Insomnia&amp;s=tt">Insomnia</a></li>
    <li><a target="_blank" title="Search IMDB for Carlito's Way" href="http://www.imdb.com/find?q=Carlito's+Way&amp;s=tt">Carlito's Way</a></li>
    <li><a target="_blank" title="Search IMDB for Heat" href="http://www.imdb.com/find?q=Heat&amp;s=tt">Heat</a></li>
</ul>
[/sourcecode]
If the above looks and sounds cool enough, you can go to Pisi's home page, view the demo or download it and use it in your own projects. You can also check Templatr - another cool fully client-side JSON to HTML template engine by Acid.JS Web.UI.