Simple Template Function

This a templating function (rather a library) that aligns with goals of doing things simply from first principles.

This is how one would use such a template:

var MAINtemplate=
`<p>$Name$ has $$$Amount$ in their bank account.</p>$`;

function MAINrun(){
   var Body = document.querySelector('body');
   var Data = [{Amount : 55, Name : " Fred " }, {Amount : 45 , Name : "Mary"}];
   Body.innerHTML = TEMexpand(Data, MAINtemplate);
}

READYevent(MAINrun);

This code would produce

What are the advantages compared to using a more fully featured templating system like Mustache?

• All data is automatically escaped for special HTML characters. This eliminates cognitive load of having to pick whether or not to escape data and eliminates a lot of bugs.

• The library is small - you can see exactly what it does in one screenful of code. No big mysteries as to what it does

• Zero fancy features - nothing whatsoever resembling a language with if conditionals and so on. Therefore zero danger of the templating library becoming a crappy language.

  • There are no fancy callback features to tempt developers to write complicated code. It’s only going to work with an array of data.

  • No caching or other unnecessary pre-mature optimizations - simple code will be faster anyway.

• Putting the responsibility elsewhere for handling logic in absence of data etc. Encouraging separation of concerns.

The code does use some techniques which are worth understanding:

• We use an array of string and concatenate them at the end for performance.

• We escape characters like & < and > to translate into HTML entities so that data can be not mis-interpreted and HTML markup.

• We use a magic token '_FuNkYDolARAM' to handle the convention of allows a double $$ escape sequence to represent a $ character.