fluxer.js
Powerful front-end framework for Flux unidirectional data flow. Flux is announced by Facebook, which is next generation design pattern for front-end development.
Installation
Install fluxer.js via NPM:
npm install fluxerjs
Note that fluxer.js using require
and EventEmitter
of Node.js, you must have browserify to make it work for front-end. purpose.
Usage
In the past, Lack of framework for Flux pattern. if we want to use Flux, we must know exactly parts: the dispatcher, the actions, the stores, and the views. With flux
NPM Module which is provided by Facebook, rough implementation is not easy to use.
But now, writing a Flux application is quite easy with fluxer.js framework, just like MVC architecture if task is not complicated. Developer is able to focus on stores and views, no need to take care and take time on dispatcher and actions.
Here is a simple code to show how to write a Flux application with fluxer.js:
var Fluxer = ;var React = ; // Creating Actions with a given namevar cartActions = Fluxer; // Create Store with a given namevar cartStore = Fluxer;var _items = {}; cartStore { return _items;}; // When received action event, process the requestFluxer; // When received action event, process the requestFluxer; // React component (view)var ShoppingApp = React;
Actions Customization
By default, actions will fire the event with the action name of itself, but it should be able to fire one or more events in one triggered action rather than one-to-one relationship. In fluxer.js, it is possible to customize actions for triggering specific store in runtime. Just replacing action handler for this purpose, then you can use this.$emit
to fire the event what you want instead of origin.
Here is an example:
var cartActions = Fluxer; // We can listen to Fluxer for "ShoppingCart.Unselect" and "ShoppingCart.Select"actions { if productselected this; else this;};
Demo
Just like other front-end framework, fluxer.js has an TodoMVC example for demostration as well.
Change working directory then initializing and starting it with NPM command:
cd examples/todomvc/
npm install
npm start
Now you can open index.html
with browser.
Authors
Copyright(c) 2015 Fred Chien <cfsghost@gmail.com>
License
Licensed under the MIT License