Integration of front-end frameworks for custom node editors

Developing Nodes
1

I have worked a lot with node-red and wrote a couple of custom nodes. I always aim for a high usability of the node editor. However, it is hard to write nice UIs in the node editor when I have to write JQuery and "plain" HTML to include functionality.

Can someone imagine a way of including React or Vue for the development of the front-end of custom node editors.

This would make it easier to program a custom node editor with a nice UX within the front-end of node-red.

2

I don't think there is any reason you couldn't include those frameworks, especially if you include a build step in your development workflow.

For myself, I split the .html file into 4 components (really 3 plus a master template) and use a simple gulp build/watch to create the actual node html file. I find working with the 3 separate files much easier (JS, config panel and help panel).

So your master template could easily include a reference to REACT, Vue, etc. However, you would either need to use a CDN version (requiring Internet access) or choose a way to install and serve up the framework files on Node-RED's admin web server. Easy enough to do via your node's .js file.

One other thing to bear in mind however. The Editor is already quite a large web app. Adding another framework will increase that further of course.

1 Like
3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.