Light Weight HTML Templating With TLX

2 min readNov 9, 2017

TLX was introduced in the article Replacing JSX With Template Literals. In this article we show how to use TLX to support light weight HTML templating with no pre-processor required. You can simply provide a JSON object and bind it to an existing HTML DOM element that contains template literals in the HTML. The total overhead is just 4.9K (minzipped).

For example, here is the ever popular Hello World:

<div id="helloworld">
${message}
</div>
<script>
const data = {message: "Hello World"};
tlx.bind(data)(document.getElementById("helloworld"));
</script>

Of course there are far more powerful uses, like templatizing an entire page:

<html>
<head>
<script src="../browser/tlx-core.js"></script>
<script src="../browser/tlx-render.js"></script>
<script>
const replacements = {
  data: {
    name: "Joe",
    pii: {
      age: 27,
      phone: "(555)-555-1212"
    }
  },
  html: {
    title: "TLX Example"
  }
};
</script>
</head>
<body onload="document.tlxRender(replacements,true)">
  ${!(document.title=html.title)||""}
  Hello <b>${data.name}</b>, we have the following information about
  you: 
  <ul>
    ${Object.keys(data.pii).map(key =>
      tlx`<li>${key}: ${data.pii[key]}</li>`)
    }
  </ul>
</body>
</html>

Note the ability to use the full power of JavaScript template literals to produce side-effects like setting the page title and looping across a map to produce an un-ordered list of items using an embedded call to tlx. The embedded template literal with thetlx call is enabled by providing trueas a second argument to document.tlxRender.

In some sense, this turns JSX on its head, putting the focus on HTML with just a little JavaScript and no build process vs usually a lot of JavaScript and a build process. In short, it is more UI designer focused than programmer focused. In some cases it can also have material positive SEO impact.

Alternatively, TLX supports directives similar to VUE. Here is the same code using the t-foreach directive.

<html>
<head>
<script src="../browser/tlx-core.js"></script>
<script src="../browser/tlx-render.js"></script>
<script src="../src/tlx-directives.js"></script>
<script>
const replacements = {
  data: {
    name: "Joe",
    pii: {
      age: 27,
      phone: "(555)-555-1212"
    }
  },
  html: {
    title: "TLX Example"
  }
};
</script>
</head>
<body onload="document.tlxRender(replacements)">
  ${!(document.title=html.title)||""}
  Hello <b>${data.name}</b>, we have the following information about
  you: 
  <ul t-foreach="${data.pii}">
    <li>${key} : ${value}</li>
  </ul>
</body>
</html>

Note the additional include of tlx-directives.js. TLX allows you to add just the code you need to minimize your memory footprint. Just 0.5K is added with a minzipped tlx-directives.js.

Also note, document.tlxRender does not take a second argument. This is because the internal parser need to operate slightly differently to support directives rather than embedded template literals. You can’t mix and match on the same page.

The directive, t-foreach automatically provides the variables key, value, and object to the nested HTML.

TLX supports the directivest-foreach, t-for with both in and of qualifiers, t-if for conditional display, and t-on for binding event handlers. Adding custom directives can be done in as little as one line of code. The extended use of directives will be covered in more detail in a follow-on article.

Light Weight HTML Templating With TLX

Written by AnyWhichWay