index.html

---
layout: homepage
---

<h2>Rationale</h2>

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


<h2>Basic Usage</h2>

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

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

ReactDOM.render(Greet({ name: 'Omniscient' }), el);
</textarea></div>

<p>
  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
  <a href="http://facebook.github.io/react/#timerExample">React homepage timer example</a>.
</p>

<p>
  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
  <a href="https://github.com/omniscientjs/immstruct">Immstruct</a> to handle it
  for you. Read more about this in the <a href="/project-readme">project readme</a>.
</p>

<div class="editor"><textarea>
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);
  };
}
</textarea></div>

<h2>Introductory Presentation</h2>

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/JNMWi7Z0Ssg" frameborder="0" allowfullscreen></iframe>
</div>

<p>
  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.
</p>

<h2>Getting Started</h2>
<p>
  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 <code class="javascript">shouldComponentUpdate</code>, optimized for use with immutable data and the architectural style of Omniscient.
</p>
<p>
  If you are totally new to Omniscient, or even React, you can get started by reading the article
  <a href="http://omniscientjs.github.io/guides/01-simpler-ui-reasoning-with-unidirectional/">Simpler UI Reasoning with Unidirectional Dataflow and Immutable Data</a>.
  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 <a href="https://github.com/jcranendonk/todomvc-omniscient/">TodoMVC</a> by
  <a href="https://github.com/jcranendonk">@jcranendonk</a>.
</p>

<h3>Download and Use</h3>
<p>
You can download Omniscient through NPM or CDN. The easiest way is to use NPM:
</p>

<div class="window window--code">
  <pre><code class="shell">npm install --save omniscient</code></pre>
</div>

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

<div class="window window--code">
  <pre><code class="html">&lt;script src="//cdnjs.cloudflare.com/ajax/libs/omniscient/{{site.version}}/omniscient.js"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/omniscient/{{site.version}}/omniscient.min.js"&gt;&lt;/script&gt;</code></pre>
</div>


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

<div class="window window--code">
  <pre><code class="js">// 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;
</code></pre>
</div>