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 5K 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.

Tutorial

You can learn Flux and DeLorean.js in minutes. Read the tutorial

Using with Frameworks

Install

You can install DeLorean with Bower:

bower install delorean

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

npm install delorean

Usage

Hipster way:

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

Old-skool way:

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

Overview

var Flux = DeLorean.Flux;
/*
 * 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 = 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.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 get started 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

Authors

Fatih Kadir Akin @f
Burak Can @burakcan
Darcy Adams @darcyadams

Contributors

Tom Moor @tommoor
Tim Branyen @tbranyen
Quang Van @quangv
James H. Edwards @incrediblesound
Fehmi Can Sağlam @fehmicansaglam
Serge van den Oever @svdoever
Markus Ast @rkusa
Peter Rumenov Denev @peterdenev

Contribution

git clone git@github.com:deloreanjs/delorean.git
cd delorean
git checkout -b your-feature-branch

After you make some changes and add your test cases to the test/spec/*Spec.js files. please run:

grunt
grunt test

When it's all OK, open a pull request.

License

MIT License

Name

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

f/delorean