Omniscient v4.1.1

Rationale

• functional programming for UIs
• memoization for stateless React components
• top-down rendering of components (unidirectional data flow)
• favors immutable data (with Immutable.js)
• encourages small, composable components, and shared functionality through mixins
• natural separation of concern. Components only deal with their own piece of data
• efficient, centrally defined shouldComponentUpdate

Basic Usage

In its simplest form, an Omniscient component is a Stateless React Component, but more optimized with a smart predefined shouldComponentUpdate. Much like memoization would be for a Fibonacci function.

var Greet = component(({name}) => <div>Hello from {name}!</div>);

​

ReactDOM.render(Greet({ name: 'Omniscient' }), el);

​

Below you can see conceptually how to update and propagate changes through stateless components. The example is a more functional style alternative to the counter example shown in the React homepage timer example.

Note in the example, that we call render everytime the data changes. Normally, you wouldn't handle the render loop manually, but use something like Immstruct to handle it for you. Read more about this in the project readme.

var stop;

var Timer = component({

  // Attaching life cycle methods

  componentDidMount: () => stop = createTicker(),

  componentWillUnmount: () => stop()

}, ({time}) => <div>Seconds Elapsed: {time}</div>);

​

function render (appState = { seconds: 0 }) {

  ReactDOM.render(<Timer time={appState.seconds} />, el);

}

render();

​

function createTicker () {

  var seconds = 0;

  var interval = setInterval(() =>

    render({ seconds: ++seconds }), 1000);

  return function stop() {

    clearInterval(interval);

  };

}

​

Introductory Presentation

The video above is from JSConf Budapest in 2015 and introduces some of the architectural concepts Omniscient is based on. It's not implementation specific, but more conceptual.

Getting Started

Omniscient is just as much a way to think when you are building applications as a library it self. In essense, Omniscient is a small layer of syntactic sugar on top of React as well as an implemented shouldComponentUpdate, optimized for use with immutable data and the architectural style of Omniscient.

If you are totally new to Omniscient, or even React, you can get started by reading the article Simpler UI Reasoning with Unidirectional Dataflow and Immutable Data. This is an introductory article which explains the concepts and benefits of immutable data and cursors, and also why Omniscient is worth trying out. If you prefer to see code instead of reading, you can see the obligatory example TodoMVC by @jcranendonk.

Download and Use

You can download Omniscient through NPM or CDN. The easiest way is to use NPM:

npm install --save omniscient

Or you can include the code through a CDN. Remember to also include React in your project.

<script src="//cdnjs.cloudflare.com/ajax/libs/omniscient/4.1.1/omniscient.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/omniscient/4.1.1/omniscient.min.js"></script>

As Omniscient is wrapped in a UMD you can use it many different ways, through CommonJS, AMD or just through the window object:

// Common.js (recommended)

var component = require('omniscient');

// or AMD:
require(['omniscient'], function (component) {
  // do something with component
});

// or as fallback Window-object:
var component = window.omniscient;