f/delorean

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

• Try React.js example on JSFiddle
• Try Flight.js example on JSFiddle
• Try Ractive.js example on JSFiddle

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

• Store: A postbox
• Dispatcher: The postman, drops mail in the postboxes
• View (or Component): Box owner, checks the box for mail
• Action Creator: The post office, manages postmen

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 [email protected]: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

Links about DeLorean.js

• http://dailyjs.com/2014/08/19/delorean-cash/
• https://reactjsnews.com/the-state-of-flux/
• http://facebook.github.io/react/blog/2014/10/17/community-roundup-23.html
• https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture
• http://thewebplatform.libsyn.com/flux-application-architecture-react