Event Flow

Simple event dispatcher example

Flow.js can be used as a simple event bus for establishing comunication between different areas of your application.

// a.js
flow.create('a')
  .on('hello', handler)

// b.js
flow.create('b')
  .on('hello', handler)

// c.js
flow.create('c')
  .emit('hello')
}

In the example above, when 'hello' is dispatched, the event flows upstream to the root, then flows downstream to reach all listeners. You can learn more about the flow direction here.

Event Tree Example

import f from 'nflow';

var a = f.create('a')
var b = f.create('b')
var b1 = b.create('b1').on('hello', function(){})
var b2 = b.create('b2').on('hello', function(){})
var c = f.create('c')
var d = f.create('d')

d.emit('hello')

When an event is dispatched on a complex event tree, the event flows upstream to the root node. Once it reached the root, it traverses the tree(depth-first) to reach all recipients.

Multiple Event Trees

import nflow from 'nflow'

var a = nflow.create('a')
a.parent(null)
a.create('a1')
a.create('a2')

var b = flow.create('c')
b.create('c1')
b.create('c2')

You can isolate part of a tree by setting a flow object's parent to null.

When a branch is separated from its parent tree, no events will flow in or out between them.

Note: You can re-parent flow objects, too - see the full docs here)

Re-parenting

import nflow from 'nflow';

var a = nflow.create('a')
a.create('a1')
a.create('a2')

var b = nflow.create('c')
a.parent(b)

You can isolate part of a tree by setting a flow object's parent to null.

When a branch is separated from its parent tree,

Note: You can re-parent flow objects, too - see the full docs here)

nFlow in your existing application

nFlow's drop-in design allows you to use nFlow in your existing application without having to refactor any of code.

nFlow makes no assumptions about the structure of your app.
You can use it:

• as an event-bus between the M-V-C parts of your app
• to synchronise view components
• to communicate between large modules in an app

You can think of flow as the "glue" between your application parts.

You can create flow objects in your existing application without having to re-structure your code. You can even use it to communicate between different frameworks, eg. wire up a React View with an Angular Service!