crkt
Crkt (circuit) is the spiritual child of graflow
Crkt is a JavaScript Framework for creating graphs of Components, or "circuits", that implements data flow. The relevant introduction is to J.Paul Morrison's Flow-based Programming. I do not claim to be pure in anyway. For me, Components and asynchronous communication is about getting practical about Time in our Systems. We are slowly recapitulating the structure of Natural solutions to complex problems.
What is a Component?(High Level Description)
A Component has input ports and output ports. Values are sent into a Component through input ports. Values come out of output ports. Components are described either as simple pure functions, or as a graph of components(nodes) and connections(edges).
No seriously what is a Component? (Practical Description)
A Component is a JavaScript Object (no inheritance) that implements two methods send
and on
.
;
Every Component has a default input port and a default output port. The send and on functions with arity one refer to the default ports.
Binding two components with a "connection" is accomplished through:
Component.on((v) => otherComponent.send(v));
API idioms
The proper way to create a Component
, is to call a function that returns an Component
object. Implement send
and
on
, and you have implemented a Component
.
As we move forward with the development of Crkt we reserve the right to, where deemed appropriate, create additional interfaces in order to expose additional framework capabilities, but the core is the Component interface.
Function Components
Function Components are created by calling Component
with a function that receives two arguments value
and next
.
The simplest component is the Identity Component.
;;;
The simplest Function Component is Identity:
;
Identity Emits each value it receives.
next
is a function that receives a single argument. Instead of returning a value from your function, you invoke next
when and if you wish to send an output, you pass next the resulting value you want emitted from your Component's output
port.
Function Component Examples
Two interesting Components
are Filter
and Mapper
Implemenetation
// Filter takes a function that accepts a value and returns true or false;// (v:any) => boolean// Filter emits the value on it's output if the filterFn returns true when applied to the incoming value.const Filter = (filterFn) => Component((v,next) => { if (filterFn(v)) next(v) }) ; // The Mapper takesconst Mapper = (mapFn) => Component((v,next) => next(mapFn(v)));
Usage
// Define your componentsconst evenFilter = Filter(v => v % 2 == 0); // Emit even numbers, don't emit odd numbersconst addOneMapper = Mapper(v => v+1); // Add one // Connect them to each otherevenFilter.on((v) => addOneMapper.send(v)); // Connected;// Log the outputaddOneMapper.on(v => console.log("Out: ",v)); // Send in values and watch the output// Values frlow throughevenFilter.send(1);evenFilter.send(2); // Out: 3evenFilter.send(3);evenFilter.send(4); // Out: 5
inputs: names outputs: names components: name: Component connections: inportName componentinput componentoutputcomponentinput componentoutputcomponentoutput debug: portNames