Do fast top-down rendering of views while thinking functional programming.
Allow your views to be predictable, naturally separated and composable, but
still performant.
Omniscient is to React as memoize is to the Fibonacci function.
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.
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.
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.
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;