actives
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.
Example
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.
class Counter {
constructor() {
this.counter = 0;
}
go() {
setInterval(() => this.up(), 1000);
}
up() {
this.counter++;
}
get() {
return this.counter;
}
}
let CounterView = ({counter, onUp}) => {
return <div><p>{counter}</p><button onClick={onUp}>up</button></div>
};
Make box and define state.
let box = new Box;
box.add('counter', 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.
let CounterWidget = connect(box.counterState, CounterView);
render(<CounterWidget />, document.getElementById('app'));
You can manipulate counter
(logic instance). And it will present view.
let counter = box.counter;
counter.go();
Counter example on GitHub
It's an example with the simplest counter to get an idea. example
Todos example on GitHub
It's an example with todo list. Follow to get more ideas example
React-native + Web app, example on GitHub
Two apps - Web and Mobile Native apps with same codebase. It's an example with the simplest counter. To get ideas simply.
example