RE:DOM is now 1.0!

History

Almost two years ago, March 10 2015, I released the first version of FRZR, a tiny view library. The API has changed a lot since that and even the name changed to RE:DOM. It has been a long journey, I’ve learned a lot and it’s awesome to finally be at the version 1.0! RE:DOM is definitely more than ready for production with 100 % test coverage.

Performance

RE:DOM is one of the fastest view libraries around. Here’s results of a performance test reordering 10 000 HTML elements:

1. ~30 ms Vanilla JS
2. ~30 ms RE:DOM v1.0
3. ~30 ms FRZR v0.22.7
4. ~80 ms React v15.3.2
5. ~500 ms React v0.14.7
6. ~10 000 ms Riot.js v2.6.2

Riot.js is releasing v3 soon, I hope it will fix the performance issues..

Filesize

RE:DOM is 3.5 KB before and 2 KB after gzip.

Server-side rendering

With the release of RE:DOM 1.0, I also released NO:DOM – a complementary library for rendering RE:DOM apps/components server-side. It’s also tiny, easy to use and super fast.

Embracing JavaScript

There’s not that many abstractions in RE:DOM. You create components writing vanilla JavaScript. Diffing gets done against the DOM (with amazing performance though). You can refer to real DOM elements and still you get the benefit of “pure functions”, since updating the component should always go through only one update function by design. When with vdom you always redefine everything, with RE:DOM you can define the init state for component and separately how you update it.

Here’s a basic hello world with just an HTML element:

import { el, mount } from redom

const hello = el('h1', 'Hello world!')

mount(document.body, hello)

Here‘s a component version:

import { el, text, mount } from redom
class Hello {
  constructor () {
    this.el = el('h1',
      'Hello ',
      this.target = text('world'),
      '!'
    )
  }
  update (target) {
    this.target.textContent = target
  }
}
const hello = new Hello()

mount(document.body, hello)
setTimeout(() => hello.update('you'), 1000)

Future

I believe future is bright for RE:DOM, since nothing is better than writing JavaScript as close to the metal as possible. Recently I wrote about mastering the DOM and talked about the JavaScript fatigue, which I believe is only cured with more minimalistic approach. In the long run you benefit the most by learning the language itself and not some third party abstractions.

If you have any questions about RE:DOM, just raise an issue on Github, send me a tweet or send me email.

Hope you have fun with RE:DOM!