Evaluate js library for flow based programming

[zero88]

Candidates

• https://github.com/jagenjo/litegraph.js
• https://github.com/chrisjpatty/flume
• https://github.com/jerosoler/Drawflow
• https://github.com/newcat/baklavajs
• https://github.com/wbkd/react-flow
• https://github.com/retejs/rete

Checklist

1. Integration
   • Must be js lib for web based, nodejs backend is optional for test purpose
   • Able to communicate to any backend language by Json via REST and WebSocket
   • UI Editor should be canvas (to better performance instead of DOM redendering)
   • ReactJS or VueJS to easy integrate in another web app
2. Core Feature
   • Able to load/unload node in runtime
   • Able to add dynamic input/output (a.k.a port) per node
   • Able to categorize node per group
   • Container node: node contains one or more nodes inside
   • Node connection (a.k.a node link): 1 input has only 1 connection, 1 output can has many connections
   • Type safe (and able to validate) in node connection. For example: boolean output only link to boolean input
   • Event listener per load/unload node, add/remove node, add/remove port, add/remove link, drag/drop node
   • Running logic realtime and visible for user by blynk node point at top right corner or animate link when data change
   • Import/export JSON
3. UI Feature
   • Able to make custom node like image node, node has icon
   • Able to display output data on node realtime
   • Able to edit default input data on node (via drop-down, check-box, text-box...) and toogle to hide default input if input is wired by node link
   • Key-stroke binding
   • Zoom in/out
   • Mini map
   • Search function
   • Toogle read-only editor
   • Able to styling node/editor
4. Performance
   • Small lib, no dependencies
   • Fast render at least 150 nodes on editor
5. Development
   • Must TypeScript
   • Easy debug like inject logging
   • Documentation and community support