noflo/noflo-browser-app

Template for NoFlo browser applications

NoFlo: Flow-based programming for JavaScript

NoFlo is an implementation of flow-based programming for JavaScript running on both Node.js and the browser. From WikiPedia:

In computer science, flow-based programming (FBP) is a programming paradigm that defines applications as networks of "black box" processes, which exchange data across predefined connections by message passing, where the connections are specified externally to the processes. These black box processes can be reconnected endlessly to form different applications without having to be changed internally. FBP is thus naturally component-oriented.

Developers used to the Unix philosophy should be immediately familiar with FBP:

This is the Unix philosophy: Write programs that do one thing and do it well. Write programs to work together. Write programs to handle text streams, because that is a universal interface.

It also fits well in Alan Kay's original idea of object-oriented programming:

I thought of objects being like biological cells and/or individual computers on a network, only able to communicate with messages (so messaging came at the very beginning -- it took a while to see how to do messaging in a programming language efficiently enough to be useful).

NoFlo components can be written in any language that transpiles down to JavaScript, including ES6. The system is heavily inspired by J. Paul Morrison's book Flow-Based Programming.

Read more at https://noflojs.org/.

Suitability

NoFlo is not a web framework or a UI toolkit. It is a way to coordinate and reorganize data flow in any JavaScript application. As such, it can be used for whatever purpose JavaScript can be used for. We know of NoFlo being used for anything from building web servers and build tools, to coordinating events inside GUI applications, driving robots, or building Internet-connected art installations.

Tools and ecosystem

NoFlo itself is just a library for implementing flow-based programs in JavaScript. There is an ecosystem of tools around NoFlo and the fbp protocol that make it more powerful. Here are some of them:

• Flowhub -- browser-based visual programming IDE for NoFlo and other flow-based systems
• noflo-nodejs -- command-line interface for running NoFlo programs on Node.js
• noflo-browser-app -- template for building NoFlo programs for the web
• noflo-assembly -- industrial approach for designing NoFlo programs
• fbp-spec -- data-driven tests for NoFlo and other FBP environments
• flowtrace -- tool for retroactive debugging of NoFlo programs. Supports visual replay with Flowhub

See also the list of reusable NoFlo modules on NPM.

Requirements and installing

NoFlo is available for Node.js via NPM, so you can install it with:

$ npm install noflo --save

You can make a browser build of NoFlo using webpack. For webpack builds, you need configure the component loader statically with noflo-component-loader. For projects using Grunt, grunt-noflo-browser plugin makes this easy.

Installing from Git

NoFlo requires a reasonably recent version of Node.js, and some npm packages. Ensure that you have NoFlo checked out from Git, and all NPM dependencies installed. Build NoFlo with:

$ npm run build

Then you can install everything needed by a simple:

$ npm link

NoFlo is available from GitHub under the MIT license.

Changes

Please refer to the Release Notes and the CHANGES.md document.

Usage

Please refer to http://noflojs.org/documentation/. For visual programming with NoFlo, see https://docs.flowhub.io/.

Development

NoFlo development happens on GitHub. Just fork the main repository, make modifications and send a pull request.

We have an extensive suite of tests available for NoFlo. Run them with:

$ npm run build
$ npm test

Platform-specific tests

By default, the tests are run for both Node.js and the browser. You can also run only the tests for a particular target platform:

$ npm run test:node

or:

$ npm run test:browser

Discussion

There is a #noflo channel on the Flow-Based Programming Slack, and questions can be posted with the noflo tag on Stack Overflow. See http://noflojs.org/support/ for other ways to get in touch.

noflo-browser-app's Issues

Set up appcache manifest

Allows for offline apps

Add add-to-homescreen for Android Chrome apps

https://developer.chrome.com/multidevice/android/installtohomescreen

can't connect to runtime (debug in flowhub)

When attempting to "debug in flohub", I always get this "runtime not available" error.

I don't understand how the link works, but I do notice it is hard-coded so perhaps it is just outdated: https://app.flowhub.io/#runtime/endpoint?protocol%3Dwebrtc%26address%3Dhttps%3A%2F%2Fapi.flowhub.io%235b6236c0-0ed2-4a04-9082-4512b0cd2a41

This looks like it should be: https://app.flowhub.io/#runtime/endpoint?protocol=webrtc&address=<runtime address> if that is the case maybe the runtime address should be something like http://noflojs.org/noflo-browser-app/noflo-browser-app.js? This address results in the same error though so perhaps that is not the problem at all..

How to run in flowhub IDE

How to depoly in flowhub IDE.
The link of github:
https://github.com/shravantikatti/Demo_Noflo_Data

We running in CLI its showing output. when wesave to github, unable to run.

What changes need to be done to run in flowhub IDE

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v4.36.0

Features

• SourceMapDevToolPlugin append option now supports the default placeholders in addition to [url]
• Arrays in resolve and parser options (Rule and Loader API) support backreferences with "..." when overriding options.

Commits

The new version differs by 42 commits.

• 95d21bb 4.36.0
• aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
• b3ec775 improve merging of resolve and parsing options
• 53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
• ab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
• 0bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
• f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc
• 31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
• 036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
• 37d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
• ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
• 0beeb7e Merge pull request #9391 from vankop/create-hash-typescript
• bf1a24a #9391 resolve super call discussion
• bd7d95b #9391 resolve discussions, AbstractMethodError
• 4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2

There are 42 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Preview in flowhub empty

I am trying to show an html block in the preview panel similar to how a block of html is shown with the clock/todolist examples on flowhub. If I start a new project on flowhub that works just fine, but if I try to do the same for a project based on this repository then I can't seem to get it to work.

How to reproduce:

1. Go to: https://github.com/noflo/noflo-browser-app
2. Click on "Hello World" in the README
3. Click on "Debug in Flowhub" in the top right corner
4. Start the flow
5. Open the preview panel if it is not open already
6. It is empty, regardless of what I change in (settings -> html)

I would expect this to work the same as with e.g. the clock/todolist example provided on flowhub.

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

• engines was only updated if it defined a single version, not a range.
• .nvmrc was updated to Node.js 10
• .travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of grunt-noflo-browser is breaking the build 🚨

Version 1.3.0 of grunt-noflo-browser just got published.

Branch	Build failing 🚨
Dependency	grunt-noflo-browser
Current Version	1.2.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As grunt-noflo-browser is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 14 commits.

• d01f8b1 Update docs, refs #25
• a7653fd Bump
• 83d9573 Merge pull request #25 from noflo/opener_protocol
• 8a8f257 Fix indent
• cd150ba Provide runtime type correctly
• 31acbd7 No need to log the debug URL, since we need to go through the button
• 6321a65 Switch from iframe+webrtc to postmessage runtime
• b694bb7 README: Minor doc improvements
• 24f2afa Merge pull request #24 from noflo/greenkeeper/webpack-3.0.0
• e8c9cce fix(package): update webpack to version 3.0.0
• 83a6b19 Merge pull request #23 from noflo/greenkeeper/chai-4.0.0
• d3e2bcf chore(package): update chai to version 4.0.0
• 361e0ed Update tests for 0.8
• 1e6ca6e Abort on parse errors

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

noflo browser app example with angular-cli

Could you provide an example of how to hookup noflo for use as part of a project built with angular-cli (https://cli.angular.io/).

There is only one stackoverflow post on this topic and the answer is out of date and incomplete.

I'm using angular-cli v10 and have hooked up a custom webpack config (https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack) together with the loader...

module.exports = {
  module: {
    rules: [
      {
        // Replace NoFlo's dynamic loader with a generated one
        test: /noflo\/lib\/loader\/register.js$/,
        use:
          [
            {
              loader: 'noflo-component-loader',
              options: {
                // Only include components used by this graph
                // Set to NULL if you want all installed components
                graph: null,
                // Whether to include the original component sources
                // in the build
                debug: false,
              },
            }
          ]
      }
    ]
  }
}

But I need a full example of how to hookup noflo in this type of project...

Can you help me out?

subgraph issues (debug in flowhub)

http://forresto.github.io/the-graph-flux/main.html

Subgraph doesn't show ports:

Opening subgraph fails with "runtime didn't provide source for graph in time."

An in-range update of grunt-contrib-uglify is breaking the build 🚨

Version 2.3.0 of grunt-contrib-uglify just got published.

Branch	Build failing 🚨
Dependency	grunt-contrib-uglify
Current Version	2.2.1
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As grunt-contrib-uglify is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Commits

The new version differs by 2 commits .

• f3086c1 v2.3.0.
• 7dc5e1d Log fixes. (#454) r=vladikoff

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴