Delorean.js

A completely agnostic JavaScript framework to apply Flux concepts into your interfaces easily.

Get DeLorean.js View on GitHub Read Tutorial API Docs

docs & examples

What is Delorean.js?

DeLorean is a tiny Flux pattern implementation.

Unidirectional data flow, it makes your app logic simpler than MVC,
Automatically listens to data changes and keeps your data updated,
Makes data more consistent across your whole application,
It's framework agnostic, completely. There's no view framework dependency.
Very small, just 4K gzipped.
Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others.
Improve your UI/data consistency using rollbacks.

Using with Frameworks

Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others.

Install

You can install DeLorean with Bower:

bower install delorean

You can also install by NPM to use with Browserify (recommended)

npm install delorean.js

Usage

Hipster way:

var Flux = require('delorean.js').Flux;
// ...

Old-skool way:

<script src="//rawgit.com/f/delorean/master/dist/delorean.min.js"></script>
<script>
var Flux = DeLorean.Flux;
// ...
</script>

Overview

/*
 * Stores are simple data buckets which manages data.
 */
var Store = Flux.createStore({
  data: null,
  setData: function (data) {
    this.data = data;
    this.emit('change');
  },
  actions: {
    'incoming-data': 'setData'
  }
});
var store = new Store();
         
/*
 * Dispatcher are simple action dispatchers for stores.
 * Stores handle the related action.
 */
var Dispatcher = Flux.createDispatcher({
  setData: function (data) {
    this.dispatch('incoming-data', data);
  },
  getStores: function () {
    return {increment: store};
  }
});
         
/*
 * Action Creators are simple controllers. They are simple functions.
 * They talk to dispatchers. They are not required.
 */
var Actions = {
  setData: function (data) {
    Dispatcher.setData(data);
  }
};
         
// The data cycle.
store.onChange(function () {
  // End of data cycle.
  document.getElementById('result').innerText = store.store.data;
});
         
document.getElementById('dataChanger').onclick = function () {
  // Start data cycle:
  Actions.setData(Math.random());
};

Run this example on JSFiddle

Docs

You can read the tutorial to learn how to start using DeLorean.js with your favorite framework.

Basic Concepts

Or you can visit documents page.

Running the TodoMVC example

There is a simple TodoMVC example working with DeLorean.js

cd examples/todomvc
grunt
open index.html

Name

The flux capacitor was the core component of Doctor Emmett Brown's DeLorean time machine

License

MIT License