embedded node RED

[jo...@gillerman.name]

Hi,

I need to develop a complex dashboard using Angular 2.  I know that the existing dashboard uses Angular 1 and would require a significant rewrite to support Angular 2.  I guess the best way to go would be go use node-red-contrib-uibuilder, but I don't have the programming skills to use this.  There are a ton of resources about how to use the MEAN stack so I am thinking this might be the path of least resistance.  Using node RED flows to allow a user to extend/customize a "standard" MEAN app sounds very useful.  I read the page about starting node RED within a node.js app, but how do you write node.js emitters and callbacks to communicate with node RED at run time?  Does this sound reasonable?  

Thank you very much,

John

[Julian Knight]

So, there are certainly a number of approaches you could take here:

• Use uibuilder with Angular 2 (or isn't 5 the latest?!) with most of your MEAN stack implemented within Node-RED and data passed to the front-end via uibuilder's Socket.IO connection.
  This requires you to pretty much build your front-end from scratch but should greatly simplify programming the back-end & the BE<->FE comms.
• Implement your Angular front-end using a separate Node.JS implementation as part of a MEAN stack but with Node-RED used as an API engine.
  This still requires you to build your FE from scratch but also requires you to build the supporting back-end from scratch as well. But it has the potential advantage of being more "vanilla" so you could follow one or more of the many Internet tutorials on building an Angular app without having to keep translating parts of it to work under Node-RED.
• Or you could, as you've said, incorporate Node-RED into the above app
  This still requires everything from above but also requires you to learn how to embed Node-RED and to understand the implications on performance and integration.

Since Node.JS is designed specifically as a micro-architecture provider, I wouldn't see any real benefit in the last approach for you. Node-RED is already very easy to use to build an API server and you get lots of built-in ways to communicate with your custom back-end microservice or even with your front-end code.

But then, I'm not at all convinced that even option 2 really gives you anything especially useful in this instance. You have a lot of extra work to do, especially if your programming skills are limited. If you need to follow some Angular tutorials, I would do that separately as a learning exercise and then use that experience to create your uibuilder front-end.

Also, unless you are already committed to Angular, there are FAR easier frameworks out there to use. I've listed a number in the uibuilder WIKI on GitHub. My current favourite is RactiveJS but MoonJS is also good as is Riot or Vue. Indeed, you may well find that you only need JQuery since that is sufficient to build a dynamic UI in combination with the uibuilderfe library (just not quite as efficient or easy to manage if the UI gets complex).

Probably the main downside of using uibuilder for you is if you need a build step to create your UI code. This is not yet integrated to uibuilder so you need to handle this yourself - but then you would do with the other approaches as well.

uibuilder will let Node-RED do the heavy lifting on the back-end. Leaving you to focus on the front-end. And I'm only a little bias being the author that is. :-)

[jo...@gillerman.name]

Julian,

Thank you very much for taking the time to discuss this.  With regard to options 2 and 3, I had thought that option 3 was how you actually accomplished option 2.  Can you point me two an example of option 2?

Given my lack of skill, I had thought the only way I would be able to build the front end is by using a commercially supported toolkit like Kendo UI - which typically only support Angular, React, and Vue.  While I realize none of these three is optimal, which do you think would be best for running in a resource constrained device such as a Raspberry Pi?

This combined with the fact that I am working with others that haven't completely bought into a node RED based architecture leads me to believe I need to leverage node RED as much as I can while keeping the FE "vanilla".  

Thanks again,

John

[Julian Knight]

Hi, no problem.

#3 would see you incorporating Node-RED into #2. But Node.JS, as stated, is a micro-services architecture tool. So you can run many Node.JS services in parallel. They could talk to each other via many different means that both Node-RED and raw Node.JS services support: UNIX pipes, UDP, TCP, Websockets, MQTT being the ones that come to mind, there will be others as well no doubt. A simple way would be to treat Node-RED as an entirely separate web service (it doesn't matter that it may run on the same Pi). In this case, you would use one or more http-in/out nodes to define a REST API. In your Node.JS service, you would call to the Node-RED URL's using http requests and get back some JSON from Node-RED containing - for example - the results of a MongoDB query. Sorry, I don't have an example of this to hand, not sure many people are doing that to be honest since it is generally easier to stick with just Node-RED. But it is a viable option and would allow you flexibility in the future since you could move either of the services to a different device very easily.

Using Kendo UI does not, as I understand it, restrict you to using a Node.JS service since it is a front-end library not a service. You could equally well use it with uibuilder which should be a lot simpler. You would simply download the Kendo UI components into the ~/.node-red/uibuilder/<instance URL>/src folder and access them from there in the same way as the default template for uibuilder loads the index.js and index.css files. Alternatively, if Kendo UI is available on npm, you could install it, add it to the list of installed components in settings.js under uibuilder.userVendorPackages.

In terms of which version of Kendo UI to use, my personal recommendation would be to use Vue if you don't already know one of the other frameworks. It seemed to me to be rather easier to learn. REACT would be my second choice. I don't like Angular, it is far too complex and restrictive for anything but the most complex app.

As mentioned before, you might not even need Vue/REACT/Angular. Especially as you are using Kendo UI, you might well be able to get away with just using JQuery which uibuilder already makes available to you. I would only go for one of the others if you had a very complex UI to build as a single page app or perhaps if you needed a reasonably complex UI that took lots of user input. All will be served fine from a Pi, where you might struggle is using something like Angular with the browser on a Pi or when consuming Angular from a mobile device. Honestly though, if you are worrying about this from the outset, you probably have bigger problems to resolve.

In terms of keeping the front-end "vanilla" and working with others, that might change the dynamic slightly though you only really need to convince them that Node-RED makes a useful service platform. To be honest, Node-RED only makes sense either when you need rapid prototyping or you have limited programming skills. Otherwise, Node-RED brings a lot of baggage that you could avoid if you have other developers to create a custom back-end. When I say baggage, that isn't to put down Node-RED in any way but it is a complex set of moving parts, like a Citroen 2CV in a formula one race, Node-RED is not always the answer.

It is really hard to give further advice without understanding more about your requirements and the combined skills of your team.

[Dave C-J]

Methinks you will find a Formula1 car more complex than a 2CV... and harder to maintain... but hey

[jo...@gillerman.name]

The idea is to partition the application into two parts: one maintained by programmers and one maintained by end users.  End users should be able to configure points as well as configure the HMI by linking trends and animations to points.  But the user should also be able to create custom measurement data stream handing flows/functions using node RED.    I am just trying to prototype this architecture using a "vanilla" MEVN app. 

[Julian Knight]

I'm not having a dig at NR, just trying to find a suitable analogy. :-)

[Julian Knight]

Well my option 1 already does that doesn't it? Node-RED provides most of the capabilities and can be maintained by end users. The dashboard is created by programmers and driven by the data from Node-RED. There is nothing really stopping programmers from providing some flows as well.

You could go further and even have >1 Node-RED instance running, one for the programmers to work on API's, core back-end logic and so on, perhaps using MongoDB, MQTT or some such to manage standardised (documented) data structures. The other instance given to end users to take the core data and further process it to their requirements.

But if you are trying to create a fully flexible, user data driven/user configured Dashboard, you've a lot of work ahead - though I think there are some Angular 1, NR Dashboard examples in a recent thread that may go some way. To go further towards a fully parameter driven dashboard is a massive, complex piece of work. I've recently been working on something that might eventually provide at least some of that by utilising RactiveJS with uibuilder but there is a long way to go - I've got far enough to be able to see that it is possible and how to build a dynamic web page using nested components but I've as yet, no more than an inkling of how it might all fit together. Ractive seems to be one of the few frameworks that lets you easily mix pre-built and dynamically built nested components in anything like a sane way. Myself and Steve Rickus had a go at doing something with VueJS before uibuilder got going but we very quickly hit some brick walls.

[John Gillerman]

Thank you