Page Comparison

This is what the template format will look looks like.

<div>$ID$</div><div>$Life$</div><p>$NAME$ has $$$ID$ - $Life$ - Everybody wishes they had more $$$$$</p>$

$ characters can be represented by a double string. We can pass in an array.

What are the advantages:

...

Developers don’t need to think about whether or not the data they are putting in can have special characters - which is common source of bugs in web applications. The templating library will always do it.

...

This is how one would use such a template:

var MAINtemplate=/*html*/`<p>$NAME$ has $$$ID$ - $Life$ - Everybody wishes they had more $$$$$</p>$`;

function MAINrun(){
   var Body = document.querySelector('body');
   var Data = [{ID : 55, NAME : " Fred <the knife>" }, {ID : 45 , NAME : "Mary"}];
   Body.innerHTML = TEMexpand(Data, MAINtemplate);
}

This is the code for the TEMexpand function:

function TEMconvertString(V){
   if (!V) { return ''} else { return V.toString(); }
}

function TEMexpandLine(Tokens, Row, Array){
   console.log(Tokens);
   for (var i =0; i < Tokens.length-1; i+=2){
      Array.push(Tokens[i]);
      Array.push(TEMconvertString(Row[Tokens[i+1]]).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;"))
   }
   Array.push(Tokens[Tokens.length-1]);
}

function TEMexpand(Data, Template){
   var Array = [];
   var Tokens = Template.replaceAll("$$", "_FuNkYDolARAM").split('$');
   for (var i =0; i < Data.length; i++){
      TEMexpandLine(Tokens, Data[i], Array);
   }
   console.log(Array);
   return Array.join('').replaceAll("_FuNkYDolARAM", "$");
}

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.

  There is no caching - but we don’t have 600 extra lines of unnecessary Javascript and caching takes extra memory and is probably premature optimization and our

  • 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.There is no danger of the templating library becoming a crappy language

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 to handle the convention of allows a double $$ to represent a $ character.