The main idea of actives
to have ability to write pure logic
(PL) and pure views
(PV). (PL) <-> (PV).
Then we connect both (logic and views) for your goals and we get a real view.
It's only concept for now an example below.
There is an example with reactjs view.
There are some required packages.
import React from 'react';
import {render} from 'react-dom';
import {Box} from 'actives';
import connect from 'actives-react';
Pure logic and view.
// pure logic, it means that logic does not know about view
class Counter {
constructor() {
this.counter = 0;
}
go() {
setInterval(() => this.up(), 1000);
}
up() {
this.counter++;
}
get() {
return this.counter;
}
}
// pure view, view does not know about logic at all
let CounterView = ({counter, onUp}) => {
return <div><p>{counter}</p><button onClick={onUp}>up</button></div>
};
Make box and define state.
// let's make state for counter
let box = new Box;
// add counter to the box
box.add('counter', Counter);
// connect state to the counter
box.connect('counterState', 'counter')
.state(({counter}) => {
return {
counter: counter.get()
}
})
.actions(({counter}) => {
return {
onUp: () => counter.up()
};
});
Connect state/actions to the view and render.
// connect state with view, view should not know about real logic
let CounterWidget = connect(box.counterState, CounterView);
// render widget now it's connected to state. And it will react on changes.
render(<CounterWidget />, document.getElementById('app'));
You can manipulate counter
(logic instance). And it will present view.
// lets GO!
let counter = box.counter;
counter.go();
It's an example with the simplest counter to get an idea. example
It's an example with todo list. Follow to get more ideas example
Two apps - Web and Mobile Native apps with same codebase. It's an example with the simplest counter. To get ideas simply. example