FlowBasedProgramming
No description available
Install / Use
/learn @RajatIntuit/FlowBasedProgrammingREADME
Table of contents
- Flow Design Tool for Xfinity Gears
- POC 1 - NodeRed
- POC 2 - TotalJS
- POC 3 - NoFlo
- POC 4 - ProjectStorm
- POC 5 - GoJS
Flow Design Tool for Xfinity Gears
The Flow based programming paradigm is now available through various open-source frameworks - NodeRed, TotalJS, NoFlo, ProjectStorm, GoJS. This POC is to evaluate the frameworks based on the capabilities/features provided and extend their codebase to implement the Xfinity Gears Component library.
POC Evaluation
5 frameworks were scored on a scale of 1-10 for each feature and then ranked on the overall score. NodeRed, TotalJS and NoFlo were found to be equivalent in terms of the key features like support for multiple I/O ports, component specific parameters with embeddable JS functions, export/import flow JSONs and runtime engine integration. NodeRed seems to have an edge in terms of the ease of extending components as well as deployment, though it scored a lower overall score mostly due to an old tech stack. TotalJS was ranked the highest mostly due to support for web, mobile, desktop apps, 3D home designer integration with flows as well as Analytics Dashboard.
| | | | | | | | | | | | |---------------------------------|-----|------------|-----|---------------|-----|-----------------|----|--------------------|----|--------------| | Features | NodeRed | | TotalJS | | NoFlo | | ProjectStorm | | GoJS | | | | Multiple I/O ports | 8 | port index | 8 | port index | 9 | port name | 8 | port index | 8 | node index | | Component specific params | 9 | | 9 | type support | 9 | | | | | | | Embed JS functions/templates | 9 | | 9 | | 9 | | | | | | | Export/Import Flow json | 9 | | 8 | | 8 | | 8 | | 8 | | | Ease of component extension | 9 | | 9 | | 7 | | 7 | | | | | Event injection to flows | 9 | | 9 | | 9 | | | | | | | Assign InstanceId to component | 9 | | 9 | | 9 | | 7 | | | | | Runtime integration with sheens | 7 | | 7 | | 9 | | | | | | | Debugging flows | 7 | | 5 | | 9 | flow animations | | | | | | Unit/Integration Test | | | | | 8 | | | | | | | Authentication & Authorization | | | | | | | | | | | | Flow version management | | | | | | | | | | | | Tech Stack | 7 | jQuery/D3 | 9 | Angular2 | 9 | React | 9 | React | 5 | HTML5/JS/CSS | | Look & Feel | 7 | | 9 | Web+Desktop | 9 | | 7 | | 5 | | | Build & Deploy | 9 | python | 7 | node debug.js | 7 | grunt dev | 5 | yarn run storybook | 9 | python | | 3D Home integration with flows | | | 9 | flowboard | | | | | | | | Dashboard & Analytics | | | 9 | flowdashboard | | | | | | | | License | 7 | Apache 2.0 | 7 | MIT | 7 | MIT | 7 | MIT | | Enterprise | | Total | 106 | | 123 | | 118 | | 58 | | 35 | |
POC 1 - NodeRed
Build and Deploy Steps
python -m SimpleHTTPServer
Open http://localhost:8000
Import poc1_nodered_flow.json to render the flow UI
Sidebar components will get populated based on https://s3-us-west-2.amazonaws.com/xasdoc/components.html
New component creation steps
1. index.html - Add NodeDefinitions with I/O ports and component specific params
{"type":"CheckCondition","data":{"defaults":{"name":{"value":"new"},"condition":{"value":"new"},"ed":{"value":"yes"},"reset":{"value":"yes"},"debug":{"value":"yes"},"errors":{"value":"no"}},"shortName":"check_condition","inputs":1,"outputs":2,"category":"condition-function","color":"LightGreen","icon":"arrow-in.png"}}
2. index.html - Add Component Summary and tool tip text
<script type="text/x-red" data-help-name="CheckCondition">
3. index.html - Add Component Parameters form
<script type="text/x-red" data-template-name="CheckCondition">
4. editor.js - Params inside "defaults" of NodeDefinitions will be tracked for changes as below
if (editing_node._def.defaults.hasOwnProperty(d)) {}
5. library.js - Imported flow JSON will be rendered in UI and each component param will be prefixed with '#node-input-'
function createUI(options) {
$('#node-input-'+options.type+'-menu-open-library').click(function(e) {
6. palette.js - Define component categories used in NodeDefinitions
var core = ['trigger','condition','action'];
7. nodes.js - Add new categories shown as group in sidebar
function checkForIO()
8. view.js - Function to import flow json
function importNodes(newNodesStr,touchImport) {
9. main.js - Export flow as JSON
function save(force) {
RED.storage.update();
if (RED.nodes.hasIO()) {
var nns = RED.nodes.createCompleteNodeSet();
nns.sort(function(a,b){ return (a.x + a.y/250) - (b.x + b.y/250); });
RED.view.state(RED.state.EXPORT);
RED.view.getForm('dialog-form', 'export-clipboard-dialog', function (d, f) {
$("#node-input-export").val(JSON.stringify(nns, null, 2)).focus(function() {
Snapshots
Flow JSON
https://github.com/RajatIntuit/FlowBasedProgramming/blob/master/samples/poc1_nodered_flow.json
POC 2 - TotalJS
Build and Deploy Steps
npm install -g yarn
yarn
node debug.js
Open http://localhost:8000/flow
Flow definition at flow/designer.json will be loaded by default
New component creation steps
https://wiki.totaljs.com/flow/05-creating-components/
1. Use an existing component from flow folder as a template
2. Specify component id, I/O ports, parameters, readme and html for parameters input form
exports.id = 'check_condition';
exports.title = 'CheckCondition';
exports.group = 'Gears-Condition';
exports.color = 'LightGreen';
exports.icon = 'fa-thermometer-half';
exports.input = ['green'];
exports.output = ['blue', 'red'];
exports.version = '1.0.0';
exports.author = 'Xfinity Gears';
exports.options = { condition: 'var x = y + 1', enabled: true, enable_disable: true, reset: true, debug: true, errors: false };
exports.readme =
`# Condition: CheckCondition
Checks an arbitrary boolean Javascript expression and forwards the in message on the out channel if the expression evaluates to true, otherwise the message will forwarded on the else channel. If no component is connected to the else channel, the message will be dropped.
### Inputs
- First -> in
### Outputs
- First -> out
- Second -> else
### Params
name condition
type string
doc condition as evaluable JavaScript string; references to payload and or props are alowed
default
required yes
valid values
`;
exports.html =
<div class="row">
<div class="col-md-4 m">
<div data-jc="codemirror" data-jc-path="condition" data-jc-config="placeholder:@(var x = y + 1);type:javascript" class="m">Condition</div>
</div>
</div>
Snapshots
More Demos at https://www.totaljs.com/flowboard/
