Meet Oblivion: Inline HTML templates for JavaScript

Edit (July 2017): We now use React with TypeScript.

So at Esper we made this tool to make our lives easier.

Oblivion is a preprocessor for JavaScript source files. It allows the programmer to embed raw HTML code into JavaScript with very few modifications. Only local variable names need to be inserted, allowing these HTML elements to be modified programmatically – and safely.

Have you ever wanted to copy-paste HTML code directly into a JavaScript string?

var s = '
<div>
  <span class="example">Welcome!</span>
</div>
';

Oops, that’s invalid. JavaScript doesn’t support line breaks in string literals. Instead you would have to write something like:

var s =
 '<div>'
+'  <span class="example">Welcome!</span>'
+'</div>';

This required more edits than we wanted, but why not. Now something we often do is modify child nodes based one some conditions. We use jQuery to produce a dom node from a string, maybe as follows:

var view = $(
 '<div>'
+'  <span class="example" id="msg"></span>'
+'</div>';
);

var text = isNewUser(user) ? "Welcome!" : "Hello!";
$("#msg").text(text);