Easy apps with hyperHTML — 1, wire/bind

hyper what? An introduction to a blazing fast, lightweight JS library.

Part 1 written by

Paul Thompson

lover of dogs and javascript. and coffee. and writing.

While everyone is hyped up about virtual DOM frameworks like React and Vue, I always felt like something was missing. It wasn’t clicking with me that we had to maintain a “copy” of the DOM in memory. I tried a few frameworks, then found Mithril — it has advantages like vanilla JavaScript functions and doesn’t get in the way — but I wasn’t completely satisfied with any of the frameworks.

Then found the work of Andrea Giammarchi. Andrea has worked on tools like vitamer, but then he suddenly published a new, tiny framework called hyperHTML. After reading his blog post The DOM Is NOT Slow, Your Abstraction Is, I was intrigued. I came to understand how easy was to work with, and loved that everything was just JavaScript functions like Mithril — just 2 functions in the API to learn! Add to that the simplicity of template literals for the templating, and you have a library that is super fast to render your UI changes.

And no virtual DOM.

Let’s dive in to some basics about hyperHTML, and then we’ll work on a simple table to apply our knowledge. To get started all you’ll need to know is basic html, and have a good understanding of JavaScript.

Basics — template

Templates in hyperHTML are based on template literals. They are very easy to use, just a string between backticks:

`some string`

But you can also put JavaScript in them and it will be evaluated:

`myvar value is ${myvar}`

If myvar = 8; you will get “myvar value is 8”. This is all we need to know to get started with templating in hyperHTML.

Basics — Bind

Bind() is one of the 2 functions you have to learn. It renders the template described to the DOM element provided. Bind() differs from wire() (we’ll talk about this in a moment) in that you use bind() to add content to an existing DOM node. Bind returns a function that you can keep reusing to update the contents. For example:

const render = bind(document.getElementById('app'));

Will bind the element with id “app” to this function so every time we call “render” with a template it will be updated. You can read more about it in the official docs.

One of the cool features about hyperHTML is that rendering is very fast, and of course it will re-render only the parts that needs to be updated, lets do an example of a simple clock.

If you inspect the element, you will see that only the h2 with the time is updating every second.

Basics — wire

The other function that you need to learn is wire(). Wire() returns html from the template provided. You would use wire() where you need to create new DOM nodes. You can generate one element or an array of elements. You can also pass an object (or array), and as a second parameter the type of wire. The default wire method is html, but it can also be svg or just a specific id, so hyperHTML doesn’t re-render it. Read more about it on the official docs.

In this simple example, wire() is returning the h1 for the title:

For this next example, the first array is getting re-rendered every time (check the element inspector), but notice that when we pass an object to wire — wire(obj) — the object is not re-rendered on each tick. This is powerful stuff.

One small gotcha… coming from another framework like Vue, you might expect to have partial attributes for your elements.

<div class="myclass ${classvar}"></div>

HyperHTML doesn’t allow this, because in reality it isn’t necessary. However, you can do this:

<div class="${`myclass ${classvar}`}"></div>

Nested backticks solve the problem nicely! For more about why partial attributes are not supported check the official docs.

Simple table — 1

Let’s use what we’ve learned so far to write a simple table based on an array. The first step is to create our base html. Then we’ll create our bind function, and finally our template. We are going to use map to iterate over our array to generate rows/columns for the table… and that’s it! Very easy! In Editing Easy Apps with hyperHTML part 2, we are going to add sorting to our table.

Blog