PURE ES6 HTML TEMPLATING

cool.js

let index = ({title, name}) => `
  <h1>${title}</h1>
  ${name ? `
    <h2>Hello, ${name}.</h2>
  `:`
    <a href="#">Log in here</a>
  `}

  <div>footer</div>
`;

document.querySelector('div').innerHTML = index({
  title: 'cool page',
  name: 'potch'
});

I left this on twitter too, but everyone looking at this, please remember that feeding unescaped data to innerHTML is a bad idea. (And which I am sure potch is not endorsing!) Template literals also give us tagged template literals, allowing for libraries like https://github.com/jrburke/htemplate which can help provide some degree of security plus whatever additional magic they choose to provide.

@asutherland is right! (of course). This is a super gross and way over-clever syntactic hack, and doesn't come close to replacing existing templating libraries, especially in terms of security of interpolated content.