RE:DOM is now 1.0!

Juha Lindstedt
Oct 1, 2016 · 2 min read

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 redomclass 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!

Juha Lindstedt

Written by

Web architect at iDiD digital signage, creator of RE:DOM

RE:DOM

RE:DOM

RE:DOM blog

More From Medium

Also tagged JavaScript

Also tagged Web Development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade