ftl.js

Another JS template library, which pretends to be simple thanks to functions.

Too simple usage (more realistic use cases) :

form({ action: "https://github.com/ybr/ftl.js"},
  fieldset(
    label({ "for": "myinput" }, "My input"),
    input({ "type": "text", id: "myinput", name: "myinput" })
  ),
  div({ "class": "actions"},
    button("OK")
  )
)

It creates the following DOM :

<form action="https://github.com/ybr/ftl.js">
  <fieldset>
    <label for="myinput">My input</label>
    <input type="text" id="myinput" name="myinput">
  </fieldset>
  <div class="actions">
    <button>OK</button>
  </div>
</form>

ftl.js is logic full, just plain JS (i18n, text formatting, ...)

ftl.js does the bare minimum to ease DOM manipulation and readability

ftl.js allows you to write a template as a function, it pays you:

• composability of templates, both include and layout

• extensibility of the templating logic seamlessly

ftl.js has a very light footprint (< 500 bytes)

ftl.js performs fast, see benchmarks

Supported browser

All supported browsers

Current master state is

Installation

Add a dependency in your package.json to GitHub

dependencies: {
  "ftl": "https://github.com/ybr/ftl.js#master"
}

Usages and explanations

Prepare

Simple

Include

Layout

Internationalization

Helpers

Custom

Asynchronous

Benchmarks

Let us know if you have any performance benchmark.

Here is a benchmark on jsPerf which compares ftl.js, handlebars, hogan, mustache, jsrender, dust.