flux-easy
Flux applications have a beautiful architecture but a ugly code. This project propose a transpiler write a better and simple code that generate it. additionally flux-easy facilities using of multiple references to Stores/Views.
Install flux-easy
$ npm install flux-easy
Enabling flux-easy
import FluxEasy from 'flux-easy';
Defining Stores
class STORE_NAME extends FluxEasy.Store {
constructor () {
this.prop1 = null;
this.prop2 = 0;
}
getProp1() {
return this.prop1;
}
action1(p1,p2) {
this.prop1 = p1;
this.prop2 = p2;
this.emit('YourChange');
}
}
Defining Views
class VIEW_NAME extends FluxEasy.View {
constructor(){
this.store_ref= STORE_NAME.createStoreReference();
this.prop3='';
this.store_ref.addChangeListenner('YourChange');
}
render() {
var prop1=this.store_ref.getProp1();
var prop2=this.store_ref.getState().prop2;
var prop3=this.state.prop3;
return (<div>
<div>prop1 {prop1}</div>
<div>prop2 {prop2}</div>
<div>prop3 {prop3}</div>
<input type="text" placeholder="prop3"
valueLink={this.state.prop3} /> //edit value in input update in this.state.prop3 automatic
<button onClick={this.dispatch_action}>Dispatch action1</button>
</div>
);
}
}
Transpiling
flux-easy src/file.jsx bin/file.jsx
Use automation tools like grunt, gulp, webpack...
See sample project at https://github.com/thr0w/flux-easy-loader-test
Using generated code
var dispatcher=new Flux.Dispatcher();
var view_ref = VIEW_NAME.createViewReference(dispatcher);
var View_Class = view_ref.Class;
React.render(<View_Class />, document.getElementById('app') );