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

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

{{ mustache }}

• 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

{{ mustache }}

{
  "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 

Handlebars.java

Source: https://github.com/lauraluiz/template-benchmark

Sunrise theme

Process

Process

CSS

JS

IMG

CSS

JS

IMG

Process

Process

CSS

JS

IMG

Demo time!

Frontend source code:
https://github.com/lauraluiz/handlebars-webjars-demo

Backend source code:

https://github.com/lauraluiz/play-handlebars-demo

Thank you!

lauraluiz

@lluizesc

https://slides.com/lauraluiz/handlebarsplay