hyperHTML: A Virtual DOM Alternative
The easiest way to describe
hyperHTMLis through an example.
Code language: JavaScript
// this is React's first tick example
// https://facebook.github.io/react/docs/state-and-lifecycle.html
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
// this is hyperHTML
function tick(render) {
render`
<div>
<h1>Hello, world!</h1>
<h2>It is ${new Date().toLocaleTimeString()}.</h2>
</div>
`;
}
setInterval(tick, 1000,
hyperHTML.bind(document.getElementById('root'))
);
Features
- Zero dependencies and it fits in less than 2KB (minzipped)
- Uses directly native DOM instead of inventing new syntax/APIs, DOM diffing, or virtual DOM
- Designed for template literals, a templating feature built in to JS
- Compatible with vanilla DOM elements and vanilla JS data structures
*- Also compatible with Babel transpiled output, hence suitable for every browser you can think of
*actually, this is just a 100% vanilla JS utility, that’s why is most likely the fastest and also the smallest. I also feel like I’m writing Assembly these days … anyway …
