Skip to content

Instantly share code, notes, and snippets.

@bjfletcher

bjfletcher/Templating Showdown - Part 1.md

Last active October 18, 2016 15:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bjfletcher/4c8118862838b62cccda89fc97d1dbf4 to your computer and use it in GitHub Desktop.
Save bjfletcher/4c8118862838b62cccda89fc97d1dbf4 to your computer and use it in GitHub Desktop.
Download ZIP
Templating Showdown - Part 1
Raw
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment