Web Components with static and dynamic content

RE:DOM is the perfect tool for creating HTML components

Google’s Polymer team have lately talked about this new way to create templates, lit-html, which is heavily copied from HyperHTML.

Tagged template literals provide a way to update components smarter, so that static content is untouched and only the dynamic part gets updated. There’s a lot of performance and memory benefits of doing that, compared to virtual dom approach, where you need to diff everything.

RE:DOM have always supported this by design. Instead of defining a single create/update method, you define constructor and update methods separately:

import { el } from 'redom';
export class Hello {
  constructor () {
    this.el = el('h1', 'Hello world!');
  }
  update ({ greeting }) {
    this.el.textContent = greeting;
  }
}

Let’s use this component:

import { mount } from 'redom';
import { Hello } from './hello.js';
const hello = new Hello();
mount(document.body, hello);
setTimeout(() => {
  hello.update({ greeting: 'Hi RE:DOM!' });
}, 2000);

Result:

<h1>Hi RE:DOM!</h1>

Fiddle with this example

The benefit of RE:DOM is that you can use pure JavaScript without learning and hassling with complicated templating languages. Browser support is also way better: IE 6 vs latest evergreen (or with lots of polyfills).

RE:DOM is one of the fastest view libraries there is, faster than almost any virtual dom library – including React. Memory usage is also very low, thanks to the class support and the way RE:DOM uses the DOM.

Give RE:DOM a try: https://redom.js.org
Questions? https://gitter.im/redom/redom

Happy JavaScripting! 😎