View Templating Showdown - Part 1.md

Let's have a showdown of which templating technology is best. For most cases, it is static markup rendering. In a later post, we'll be looking at more dynamic needs.

Static Markup Rendering

For each technology, we'll be asking questions. What kind of a standard is it? Can it run on browsers and Node 6? Does it need to be transpiled? Does it need a library? Does it have good and established coding patterns? Is it readable? Does it define the expected data? If yes, how? Is its performance hungry or slow?

Technologies considered:

  1. JSX (React, Riot & Preact)
  2. Handlebars
View Templating Showdown Part 2.md

Part 1 covered the static markup rendering showdown.

Now we are going to look at the more dynamic needs that do a lot more than just appearing and hiding.

Technologies considered:

  1. React, Riot & Preact
  2. Templates & HTML Imports (old Web Component)
  3. Custom Elements & Shadow DOM (new Web Component)
  4. diffhtml + any static rendering technology
View Handlebars vs ES 2015.md

Handlebars vs ES 2015

I thought I'd see how Handlebars and Node 6-compatible ES 2015 compare with a few examples.

Example: Conditional and variable

Handlebars

{{#if @root.flags.premiumIndicator}}
	<div>
View index.js
var http = require('http');
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({ target: 'http://www.google.co.uk' });
function requestHandler(req, res) {
req.socket.on('timeout', function() {
res.writeHead(502);
res.end("There was an error proxying your request");
});
View distance calculation
// "noop" baseline to compare against
start = performance.now();
for (x = 0; x < 1000; x++) {
for (y = 0; y < 1000; y++) {
}
}
finish = performance.now();
console.debug("Baseline: " + (finish - start) + "ms");
// Math.sqrt and Math.pow