rimple v0.4.2
rimple
API.
A reactive state synchronizing library.
PURPOSE
Synchronize the state among ui/component/state. Acts the similar role as:
and with a very simple idea:
UI/Component/State won't be differentiated anymore, they follows/connects/watches
others, forms a following graph where each node is called SLOT. when one node's
followings mutate, it is re-evaluated accordingly, and propogates the mutation
further, just like how interconnected digital circuit components work.
PRECAUTION
a slot could follow any others slots at its will and form a unlimited long mutation path. BUT NOT ANY CYCLE IS ALLOWED IN this following graph.
DON'T MUTATE a slot in onchange handler, unless you make sure there's no deadloop
HOW IT LOOK LIKES
// display a counter and a countdown counter
const $$counter = Slot(0);
// counterEl follows counterSlot
const $$counterEl = Slot(function ([counter]) {
return h('.counter', '' + counter);
}, [$$counter]);
// counterEl follows counterSlot
const $$countdownCount = Slot(0);
const $$countdownCounterEl = Slot(function ([counter]) {
return h('.counter.countdown', '' + counter);
}, [$$countdownCounter]);
const $$view = $$(function (el1, el2) {
return h('.app', [el1, el2]);
}, [$$counterEl, $$countdownCounterEl]);
mount($$view, '.container');
setInterval(function () {
$$counter.inc();
$$countdownCounter.dec();
}, 1000);
here's another codepen.
FEATURES
SIMPLE
rimple just provides one paradigm which is easily understandable.
EXPLICITY
Once you are familiar with this paradigm, you could understand why and how page redraw occurs. With caution, you could even eleminate all the unnecessary re-evaluation.
EFFICIENCY
ripple will find the most effient propogation path in one mutation process, and guarantees:
in one mutaion proccess, a slot will be re-evaluated ONCE only after all of its followings re-evaluated.
To understande this, here's an example:
Let's assume A is mutated, and a mutaion process starts, if we adopt a breadth-first algorithm, the mutation process will be executed in following steps:
- B (because of A's mutation, but this is INCORRECT, since C has the wrong value)
- C (because of A)
B (because of B's mutation)
but in ripple, step 1 will be SKIPPED, actually ripple adopts a level-by-level algorithm to execute the mutation process
ORTHOGONAL TO OTHER LIBS
since rimple focuses on state synchronizing, it works smoothly with navigo, virtual-dom, snabbdom, even with REACT, but I recommend pure virtual dom implentation personally.
- ENCOURAGE PURE FUNCTION AS EVALUATION FUNCTION
USAGE
$ npm install rimple
then add the following codes to you html files:
<script src="path/to/rimple/dist/rimple.min.js">
Then you could access rimple
by:
console.log(rimple); // output {Slot: ƒ, mutate: ƒ, mutateWith: ƒ, mixin: ƒ}
Or in node environment:
var rimple = require('rimple');
TEST
clone this repository, and run:
- $ npm install
- $ npm test
SAMPLES
cd into the samples directories, and each sample's read README.md