Category: template literal

HTML Templates via JavaScript Template Literals

You know those super cool backticks-for-strings in new JavaScript? let emotion = `happy`; let sentence = `Chris is feeling ${emotion}`; Besides the variable interpolation in there being mighty handy, the do multi-line strings wonderfully, making them great for chunks of HTML: const some_html = ` <div class="modul...

Reactive UI’s with VanillaJS – Part 2: Class Based Components

In Part 1, I went over various functional-style techniques for cleanly rendering HTML given some JavaScript data. We broke our UI up into component functions, each of which returned a chunk of markup as a function of some data. We then composed these into views that could be reconstructed from new data by making a sing...

Reactive UI’s with VanillaJS – Part 1: Pure Functional Style

Last month Chris Coyier wrote a post investigating the question, “When Does a Project Need React?” In other words, when do the benefits of using React (acting as a stand-in for data-driven web frameworks in general), rather than server-side templates and jQuery, outweigh the added complexity of setting up t...

Template Literals

The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more control over dynamic strings in our programs. Gone will be the days of long string concatenation! To create a template literal, instead of single quotes (') or double quotes (") quotes we use the back...