f / Delorean
An Agnostic, Complete Flux Architecture Framework
Stars: ✭ 748
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Delorean
fluxy
Fluxy is a Flux architecture implementation written in Kotlin.
Stars: ✭ 25 (-96.66%)
Mutual labels: flux, flux-architecture
Firedux
🔥 🐣 Firebase + Redux for ReactJS
Stars: ✭ 148 (-80.21%)
Mutual labels: flux, flux-architecture
Fluxxan
Fluxxan is an Android implementation of the Flux Architecture that combines concepts from both Fluxxor and Redux.
Stars: ✭ 80 (-89.3%)
Mutual labels: flux, flux-architecture
Hover
A very lightweight data store with action reducers and state change listeners.
Stars: ✭ 97 (-87.03%)
Mutual labels: flux, flux-architecture
nanoflux-fusion
Redux-like extension for Nanoflux
Stars: ✭ 15 (-97.99%)
Mutual labels: flux, flux-architecture
Smitty
Tiny flux implementation built on mitt
Stars: ✭ 210 (-71.93%)
Mutual labels: flux, flux-architecture
AndroidFluxPractice
Android Flux Practice
Stars: ✭ 51 (-93.18%)
Mutual labels: flux, flux-architecture
fluxiny
~1K implementation of flux architecture
Stars: ✭ 77 (-89.71%)
Mutual labels: flux, flux-architecture
Fleur
A fully-typed, type inference and testing friendly Flux Framework
Stars: ✭ 74 (-90.11%)
Mutual labels: flux, flux-architecture
mini-swift
Minimal Flux architecture written in Swift.
Stars: ✭ 40 (-94.65%)
Mutual labels: flux, flux-architecture
Nanoflux
A very lightweight and dependency-free Flux implementation
Stars: ✭ 56 (-92.51%)
Mutual labels: flux, flux-architecture
Fluxcapacitor
This is what makes the Flux design pattern possible.
Stars: ✭ 126 (-83.16%)
Mutual labels: flux, flux-architecture
redux-reducer-async
Create redux reducers for async behaviors of multiple actions.
Stars: ✭ 14 (-98.13%)
Mutual labels: flux, flux-architecture
Vuex-Alt
An alternative approach to Vuex helpers for accessing state, getters and actions that doesn't rely on string constants.
Stars: ✭ 15 (-97.99%)
Mutual labels: flux, flux-architecture
universal-routed-flux-demo
The code in this repo is intended for people who want to get started building universal flux applications, with modern and exciting technologies such as Reactjs, React Router and es6.
Stars: ✭ 31 (-95.86%)
Mutual labels: flux, flux-architecture
Normalizr
Normalizes nested JSON according to a schema
Stars: ✭ 20,721 (+2670.19%)
Mutual labels: flux
React Native Nw React Calculator
Mobile, desktop and website Apps with the same code
Stars: ✭ 5,116 (+583.96%)
Mutual labels: flux
Gank
干货集中营 app 安卓实现,基于 RxFlux 架构使用了 RxJava、Retrofit、Glide、Koin等
Stars: ✭ 444 (-40.64%)
Mutual labels: flux
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());
};
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
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].