Handlebars

+

Play Framework

(or the SUNRISE solution)

So why not Twirl?

Repetition, repetition, repetition...

Java

PHP

Node

Templates

Web tests

Apps

Twirl

Twig

Swig

Same template,

multiple languages

Java

PHP

Node

Template

Web tests

Apps

HBS

Inefficient

waterfall process

Frontend

Backend

HTML

TWIRL

changes

Independent but collaborative teams

Frontend

Backend

HBS

changes

Conflicting

workspaces

Backend

Frontend

TWIRL

Independent

workspaces

Backend

Frontend

HBS

v2.0

A good template engine

should...

not include business logic
not include a lot of logic
be easy to read
be easy to maintain

And we needed

a template engine that...

prevents business logic
prevents complex logic
is easy to read
frontend developer friendly

+ others

Handlebars is an extension of {{Mustache}}
Logic-less semantic template
- Forces logic away from presentation
Driven by data
- Key-Value pairs, e.g. JSON, YAML
Language-independent
- Processors in +30 languages

{
  "cart":{
    "hasItems":true,
    "lineItems":[
      {
        "name":"milk",
        "quantity":5
      },
      {
        "name":"eggs",
        "quantity":12
      }
    ]
  }
}


{{#cart}}
  {{#hasItems}}
    <ul>
      {{#lineItems}}
      <li>{{name}} - {{quantity}}</li>
      {{/lineItems}}
    </ul>
  {{/hasItems}}
  {{^hasItems}}
    <p>Your cart is empty!</p>
  {{/hasItems}}
{{/cart}}

<ul>
  <li>milk - 5</li>
  <li>eggs - 12</li>
</ul>

Handlebars.js

Nested paths
- {{user.age}}, {{../user}}
Customised behaviour with helpers
Useful built-in helpers
- {{#if}}, {{#else}}, {{#each}}...
Pass arguments to helpers/partials
@data variables
- @index, @first, @last...

Handlebars.js

{
  "cart":{
    "lineItems":[
      {
        "name":"milk",
        "quantity":5
      },
      {
        "name":"eggs",
        "quantity":12
      }
    ]
  }
}



{{#if cart.lineItems}}
  <ul>
    {{#each cart.lineItems}}
    <li>{{name}} - {{quantity}}</li>
    {{/each}}
  </ul>
{{else}}
  <p>Your cart is empty!</p>
{{/if}}

<ul>
  <li>milk - 5</li>
  <li>eggs - 12</li>
</ul>

Handlebars.*

Ports of Handlebars.js in other languages
- Java, Scala, Ruby, PHP...
Even more functionalities
- Built-in helpers, @data vars...
- Value resolvers using reflection
Usually custom helpers are not portable
- Java uses Rhino to enable them
There might be inconsistencies among languages