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.
You can learn Flux and DeLorean.js in minutes. Read the tutorial
- Try React.js example on JSFiddle
- Try Flight.js example on JSFiddle
- Try Ractive.js example on JSFiddle
You can install DeLorean with Bower:
bower install deloreanYou can also install by NPM to use with Browserify (recommended)
npm install deloreanHipster 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>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());
};You can read the tutorial to get started DeLorean.js with your favorite framework.
- 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.
There is a simple TodoMVC example working with DeLorean.js
cd examples/todomvc
grunt
open index.html- Fatih Kadir Akin @f
- Burak Can @burakcan
- Darcy Adams @darcyadams
- 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
git clone [email protected]:deloreanjs/delorean.git
cd delorean
git checkout -b your-feature-branchAfter you make some changes and add your test cases to the test/spec/*Spec.js
files. please run:
grunt
grunt testWhen it's all OK, open a pull request.
The flux capacitor was the core component of Doctor Emmett Brown's DeLorean time machine
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent