WebUI Template

WebUI Template - hierarchical template engine. Build on JavaScript.

Can be used to render templates on the fly (on the client-side), on the server (with node.js) or precompile to JavaScript code with Grunt.js to run as pure JavaScript code.

Part of WebUI library.

Competitors

• shpaml (website, repo) - works on Python, with very similar syntax that described below
• Slim (website, repo) - works on Ruby
• Jade (website, repo) - works on JavaScript (and node.js as well). Also has plugin for Sublime Text

The idea

We selected to create elegant and powerful templates, more similar to Jade and HAML, instead of widely used approach like Django Templates, Smarty or Handlebars.js.

What problems do we solve?

• inheritance like Django Templates, but with avoid problem with multiple blocks with the same name in the same file
• each variable inside template ($var_name) is wrapped to container with helpers. It allows us to handle situations when we try to convert null value to upper case to avoid error on this step
• All tags closed correctly. Not closed tags gone! All pair tags will be closed correctly!
• Server-side and client-side support. Enable RIA web apps - render templates on both server-side and client-side from the same templates! It’s the best solution if you use node.js.
• We plan to create template rendering for: Python, Ruby, PHP and client-side JavaScript

Example of use

Compile template to html

var html = $webui.template.render('news.html', {
  page: {
    title: 'Hello World',
    keywords: 'webui template, node.js, javascript, template engine'
  },
  user: {
    name: 'Anton',
    email: 'anton@...com'
  },
  news: [
    {title: 'First article', content: 'This is first article'},
    {title: 'Second article', content: 'This is second article'}
  ],
});

console.log(html);

Templates

# config.yaml
css/bootstrap: http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
css/base: /static/css/base.css

js/bootstrap: http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
js/base: /static/js/base.js

# base.html
html
  head
    title: $page.title
    keywords: $page.keywords
    include css/bootstrap css/base
    include js/bootstrap js/base

  body
    div.top_menu
      a href="/": Home
      a href="/news": News
      a href="/login": Log in
    
    h1: $page.title

    div.header: $page.header
    
    div.content: $page.content
    
    div.footer
      p.links
        a href="/about": About
        a href="/stats": Statistics

# news.html
extend base.html

$page.title: $page.title. Top News

$page.header
  p: News
  p: Add new article

$page_content
  div.user_info
    if $user.is_authenticated
      p: $user.name
      p: $user.email
    else
      a href="/login": Login
  
  div.articles_list
    for $article in $news
      div.article
        a href="$.url.show_article(id=$article.id)": $article.title
        div: $.load('votes.html')
        div: $article.content.escape(',."').nl2br

# votes.html
$actual_vote: $actual_vote.default(0)

div.votes
  for $rate in 1..5
    $is_active: $actual_vote.is_equal($rate, 'active', 'inactive')
    a.star
      img class="$is_active"

Syntax

Still under development.

• $name - get or set variable. We can access properties of object, like $user.name
• 1..5 - set range from 1 to 5. Like in Ruby
• extend base.html - extend other template. In other words, push local defined variables to given template
• if ... ... elif ... ... else ... - condition for inner block
• for $obj in $objects ... else ... - loop of inner block
• url show_article id=$article.id - call url function and pass 'show_article' as first argument and then named argument id = $article.id
• $article.content.escape(',."').nl2br - we can use pipes looks like in unix shell. And we can use parameters to functions. It’s key-chain syntax like this $article.date_create.date_format('DD/MM/YYYY', time_zone='+2 GMT').escape
• $actual_vote.is_equal($rate, 'active', 'inactive') - inline if condition