bjfletcher

Hi all,

I have noticed that some FT staff tend to approach members of my team to ask questions, or share information, rather than come directly to me as the lead. This has resulted in confusion in some situations that could quite easily have been avoided.

More often than not, I have a BSL interpreter with me in the office, so feel free to come over and talk to me any time, just as you would with any other staff (and you can always drop by for a social chat too!)

I know communicating via an interpreter might take a bit of getting used to for some of you, but I really appreciate your efforts to keep me in the loop.

If I’m not in the office, you can also get hold of me on Slack or email.

bjfletcher

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

bjfletcher

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

bjfletcher

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>

bjfletcher

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");
	});

bjfletcher

// "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