Templating Showdown - Part 1

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
3. Mustache
4. string concatenation
5. simple ES6 template literals (formerly "template strings")
6. tagged template literals
7. Custom Elements (new Web Component standard)

Let's start!

JSX (React & Preact)

• de facto standard

• not a standard supported by browsers or Node
• can't run natively in browsers or Node
• always needs transpilation and library
• "ok" patterns for conditions and iterations
• data/model mostly explicit
• performance difficult to achieve

Handlebars

• de facto standard

• not a standard supported by browsers or Node
• can't run natively in browsers or Node
• always needs library
• excellent patterns for conditions and iterations
• better for readability
• data/model not explicit
• performance easy to achieve

Mustache

Same as Handlebars except...

• Origami uses it in demos
• limited - doesn't support much of Handelbars' syntax

String concatenation

• standard supported by browsers and Node
• can run natively in browsers and Node
• don't need transpialtion or library
• very poor patterns for conditions and iterations
• data/model explicit
• performance not clear

Simple ES6 template literals

• ES6 standard supported by browsers and Node

• can run natively in supported browsers and Node
• need transpilation and library for older browsers
• poor patterns for conditions and iterations
• data/model explicit
• performance not clear

Tagged template literals

• ES6 standard supported by browsers and Node

• can run natively in supported browsers and Node
• need transpilation and library for older browsers
• "ok" patterns for conditions and iterations
• needs to write a template library to do conditions and iterations
• data/model mostly explicit
• performance not clear

Custom Elements

• ongoing W3C/Web Components standard being supported by major browsers
• can run natively in supported browsers
• need transpilation and library for older browsers
• needs library for Node
• "ok" patterns for conditions and iterations
• data/model mostly explicit
• performance not clear

Summary

Before we decide on which one to use, let's agree on the criteria. It has to be very fast. Fast on both browsers and Node. It has to be very easy to use - without the hassle of setting up any transpilation. It has to be something we can implement in the next 3 weeks and be done with.

Only one in this list meets this criteria: Handlebars.

You may continue to Part 2 for the more dynamic needs.