hyperHTML: A Virtual DOM Alternative

Andrea Giammarchi
Mar 5, 2017 · 5 min read

Update

Don’t miss latest news on hyperHTML v1 and its growing popularity


However …

Not everyone would write code like that, and in all fairness I guess they also shouldn’t, and part of the reasons Virtual DOM was born in the first place were still not properly addressed using that messed up code.

  • it’s been a mess since ever due lost handlers, lost referenced nodes, Garbage Collectors that went bananas, etc. etc.

But …

When something works and there’s a lot of hype around, most developers settle and celebrate, while few others observe, sometimes maybe just skeptically, and analyze the real-world result.

Still The DOM After All

Stating the obvious here, it doesn’t actually matter how much abstraction we put on top, we gonna update that view through the (in)famous, apparently slow and surely naughty, DOM API: no way to escape from that! 😱

list of yo-yo features and goals

hyperHTML To The Rescue

Already starred by 8 developers without me even mentioning it on Twitter, hyperHTML is my latest creation that fits in less than 1.5KB “minzipped”, it delivers performance comparable to the manual mess I’ve written in 2015, and its source code targets every browser new and old.

hyperHTML examples

hyperHTML in a nutshell

It’s nothing more than a function, that works bound with DOM nodes and fragments as context. You bind your target node once, or even more if you don’t care, and you render the same template literals over and over simply passing new data.

  • both text and html? You got it, and more! Just be sure if you want to pass a fragment, a node, or an HTML content there’s no extra chars around it.
  • lists of elements too? Yup, feel free to play with tests and examples, also live, but not transpiled (yet), on this page.

Andrea Giammarchi

Written by

Web, Mobile, IoT, and all JS things since 00's. Formerly JS engineer at @nokia, @facebook, @twitter.