Download @ GitHub
1.5 kB DOM library • browser only • compact syntax

Nom is performant, minimalist (3 public methods), dependency free library for working with the DOM.

• Avoid invalid expectations
• Why no Virtual DOM?
• Compatibility
• Examples
• TodoMVC benchmark & screenshots

Avoid invalid expectations

NomJS is not a framework, Nom is no Mithril, Riot or React.

It seems that perfection is attained, not when there is nothing more to add, but when there is nothing more to take away.

React calls itself a library, but it tells you how to structure most of your code. Both Riot and Mithril are honest frameworks which are minimalist and performant. Riot forces you to the build tool world: Mithril does not. Yet Mithril also gives full suite of application building tools.

And then we have Nom, and Nom only does DOM. You can write your code whichever way you want using whatever paradigm you see fit. Nom simply gives you DOM elements and helps you render your stuff.

NomJS is very fast. Nom's internal code is built using pattern repetition and classic procedural style, avoiding slow code style, and preferring fastest known methods when possible. This kind of coding style doesn't make Nom as small as it could be, yet Nom is very small.

Why no Virtual DOM?

Virtual DOM is like the coolest thing that is around here right now. NomJS doesn't have it, because frankly it isn't necessary.

Mithril and React work for the most part so that you build a single render function or a view that gets executed. Then a virtual DOM tree is built and diffed against existing DOM. Nom is different here.

Nom's elements are created once and no actual virtual tree is built on each render. Instead you provide a property update function (if necessary) which is called on each render for each element that has such a function. Changes are made only if there are changes to do. Nom also gives a special treatment to children property: you can pass an array of DOM elements and changes are made to DOM as array's content changes.

In short: binding data to elements happens outside of Nom's scope and Nom does not control it.

Compatibility

NomJS is built for ES5 and browser standards. If you know DOM, you know Nom. Nom just makes DOM easy.

Nom can run in browser engines as old as IE5 as long as a requestAnimationFrame polyfill and es5-shim are provided.

Nom Examples

Nom TodoMVC

Based on TodoMVC 1.3.

Nom TodoMVC without MVC pattern

Same as above with roughly 100 lines less code, but can be considered more messy.

Nom todo

Based on Riot 2 todo.

Nom login & oninput demo

Nom adds the useful oninput event to IE8 and below, and patches IE9 bug.

TodoMVC benchmark & screenshots

Remember that these benchmarks are a better indicator of browser vs. browser performance. A browser side optimization can greatly vary the results.

The most important thing to notice is that both Nom and Mithril are amazingly fast. React is so slow that I didn't want to include it in these benchmarks (being roughly 10x slower than the Mithril TodoMVC 1.3 implementation).

Try it yourself: TodoMVC benchmark

TodoMVC: 250 items

250 items: Chrome 43

250 items: Firefox 38

250 items: Internet Explorer 11

TodoMVC: 500 items

500 items: Chrome 43

500 items: Firefox 38

500 items: Internet Explorer 11

TodoMVC: 1,000 items

1000 items: Chrome 43

1000 items: Firefox 38

1000 items: Internet Explorer 11

TodoMVC: 2,500 items

Only the two fastest implementations fighting from now on.

2500 items: Chrome 43

2500 items: Firefox 38

2500 items: Internet Explorer 11

TodoMVC: 5,000 items

5000 items: Chrome 43

5000 items: Firefox 38

5000 items: Internet Explorer 11

TodoMVC: 10,000 items

Mithril's Chrome-friendly optimizations for thousands of elements kick in.

10000 items: Chrome 43

10000 items: Firefox 38

All benchmarks ran on Windows 7 64-bit.