natural separation of concern. Components only deal with their own piece of data

efficient, centrally defined shouldComponentUpdate

Omniscient is all about making composable UIs in a functional manner. Having pure, referentially transparent components that gives a simpler static mental model, much like the static HTML - but bringing the views in a more powerful context in a programming language. Views will still be declarative and expressive, but without having to work with clunky and weird DSLs or template engines.

Omniscient can work pretty much the same way as vanilla stateless function components in React (post 0.14), but with added optimizations through a smart predefined shouldComponentUpdate. This will work much the same way as memoization would for a Fibonacci function, allowing you to think functional programming in UI programming, but be able to do it with high speed and optimized re-rendering.

Example Usage

Below you can see the same examples as shown on the React homepage, but using a more functional style programming. As with React examples, JSX is entirely optional, and the code reads almost just as good without it.

Note, in the examples above, we have to manually do re-rendering. This can be a tedious and usually not something you’d do. You can read more about automating this in the section “Immutable Structure and Re-render Loop”.

Passing Life Cycle Methods or other Methods

In contrast to vanilla React stateless functions, Omniscient components can get passed life cycle methods when that is necessary. For instance, when you want to do some operations when the component is mounted.

Talking back from child to parent

Some times you would like to talk back to parents by passing down some sort of helper function or helper constructions like EventEmitters. In these cases you don’t want to trigger a re-render if any of the internal changes. You can wrap the provided shouldComponentUpdate and extend it to ignore given fields. The helper library Omnipotent has a implementation of this: the ignore decorator:

Providing component keys

For correct merging of states and components between render cycles, React needs a key as part of the props of a component. With Omniscient, such a key can be passed as the first argument to the component function.

Immutable Structure and Re-render Loop

Rendering a component tree is well and fine, but how to update? You can do this in several ways: either by using something like the very popular Redux with immutable data using Immutable.js, or you could use Immstruct and cursors.

Cursors (similar to functional lenses) are shallow wrappers on top of immutable structures that allow you to listen for when a underlying structure is swapped out. That’s it. A mechanism that allows you to subscribe for structural changes in your state. The power of cursors are that they are immutable them self. This means, checking if they point to a new value is very easy and very cheap. This shines when using it with the Omniscient.js default shouldComponentUpdate.