A Beginner’s Guide: Working with NoFlo

NoFlo is a flow centered programming environment for JS. Flow based programming means that the application comprises of black boxes which allow the passage of data across predefined paths.

In NoFlo, the logic of a program is demarcated as a graph. These graphs consist of various black boxes connected together by means of input and output nodes. In NoFlo, these black boxes are just considered as components that are merely a javascript code that accomplishes a specified task. It may be a multiplier, a string concatenation function or any application you write in your day to day code.

So, without further ado, let’s discuss NoFlo in detail.

Component in NoFlo is a javascript module which does some function. In a NoFlo project, the component is placed in the components directory.

Let’s Create a Simple NoFlo Component!

Component will have two ports i.e input port and output port. It is intended to receive a number in its input port which will result in sending its square through its output port.

Install NoFlo:

npm install noflo --save

Now create a square.js component in the components folder of your project.

Import NoFlo in your component:

const noflo = require('noflo');

Define Component’s Input & Output Ports.

exports.getComponent = () => {

const c = new noflo.Component();

c.description = ‘multiply a number’;
c.icon = ‘file’;

c.inPorts.add(‘in’, {
datatype: ‘int’
});
c.outPorts.add(‘out’, {
datatype: ‘int’
});
c.outPorts.add(‘error’, {
datatype: ‘object’
});

Now, make use of NoFlo process API to process the data received on the input port of the component. After processing, we will send this data to output port.

c.process((input, output) => {

if (!input.hasData(‘in’)) {
return;
}

const number = input.getData(‘in’);

output.send({
out: number*number
});
output.done();
});

return c;
}

Having created a simple NoFlo component, let’s see how we can include it in a NoFlo graph for execution & verification.

Graphs can be described as a way through which NoFlo logic or program logic is defined. A graph may include different interconnected components, each of which can be used as per requirement. The graph can be constructed using domain specific language (DSL). Also, Graphs can also be constructed in json format.

For better understanding of the flow of graph, we’ll be using json format.

Our earlier created component will receive a number and send its square through the output port. Here, we will use a core component to receive square from our component and then display it.

First & foremost, we will define all the components used in the graph. Afterwards, we’ll define how they are connected with each other. We will also delineate the source of data and its target node so that Data gets passed in the correct format.

{
  "inports": {},
  "outports": {},
  "groups": [],
  "processes": {
    "ProvideNumber": {
      "component": "provideNumber"
    },
    "ProcessNumber": {
      "component": "square"
    },
    "ShowResult":{
     "component":"showconsole"
    },
    "Display": {
      "component": "core/Output"
    }
  },
  "connections": [
    {
      "src": {
        "process": "ProvideNumber",
        "port": "out"
      },
      "tgt": {
        "process": "ProcessNumber",
        "port": "in"
      }
    },
    {
      "src": {
        "process": "ProcessNumber",
        "port": "out"
      },
      "tgt": {
        "process": "Display",
        "port": "in"
      }
    },
    {
      "data":4,
      "tgt":{
        "process":"ProvideNumber",
        "port":"in"
      }
    }
  ],
  "caseSensitive": false
}

Initiate the Program:

Now, we want to run the program we just created. We will execute graph.js file present in graphs folder.

./node_modules/.bin/noflo-nodejs --graph graphs/graph.json

To View Graph in FlowHub visually run:

The Graph we just developed can also be observed using FlowHub. In order to do that, we will run the following command.

node node_modules/.bin/noflo-nodejs --secret some-password

Simply copy the link provided in terminal and paste it in a browser to viewing purposes. It’ll look something like this.

A sample view of the Graph

This was a quick little demo for creating a simple flow based application. For further help, you may visit, noflojs.org