Dashboards are a great feature of Node-RED, allowing you to easily expose data visualizations and interactive elements of your flows to users through a web browser. I often see discussions in the community about which panel option is best for a given scenario. Wanted to compare the most popular options in early 2023.
#Which panels should I consider?
Based on their downloads per week and active development, I believe there are three main dashboards worth considering. In no particular order, they arePanel,uibuilder, eFlexDashName.
I'm not saying there aren't other options, I'm focusing on the panels that I believe are popular in the Node-RED community.
I'd like to take this opportunity to thank the project leads on each of the three panels for responding to me and providing their thoughts on the current state and future development of each. Whenever possible, I have quoted their words, either from their messages to me or from project documentation. Thanks toDave,juliano, eThorstenfor your answers, as well as for all the work you put into these great projects!
#Methodology
To compare these panels, I will consider each based on the following factors:
How easy is it to install?
How easy is it to run your first demo dashboard?
How extensive is the collection of UI elements?
How good is the support and documentation?
How 'cloud native' is the dashboard?
How active is the development of each project?
What are the future development plans?
I'm assuming the user is a low code developer. They may have limited coding experience and are more comfortable working in visual interfaces.
So, this is the methodology, let's see the strengths of each project.
#How easy is it to install?
#uibuilder - 1st place
A Google search for uibuilder returns the correct custom node. When searching for custom node in palette manager there is only one result, this is great as users are very likely to install what they were looking for. Once you've found the right custom node, installation takes just a few moments using the palette manager.
#Panel - 2nd place
As Dashboard is currently the most popular solution for building dashboards in Node-RED, it is very easy to find it both in search engines and in the Node-RED interface. A Google search brings up the correct custom node. Finding this custom node in Node-RED's palette manager is not that easy, at the time of writing it's the third result from the top for the search term 'panel'. Some users may not select the item they want in the palette manager on the first try. However, once you find the right custom node, installation is easy and only takes a few moments.
#FlexDash - 3rd place
When searching for 'FlexDash node red' on Google, the top result is the Node-RED website for the custom node. The problem with this, and this is also a problem when searching the palette manager, is that the 'FlexDash' project is apparently not what we really need to install. When reading the readme for the project on Github it says'You probably don't want to explicitly install this package, you want to install themain widgets, which will bring this package and many more and provide a usable whole'.
Credit to the developers for adding this helpful text, but I suspect that most users will start by installing FlexDash and later find that this was not the correct way to proceed. It would be great if the custom node that needs to be installed was the one called 'FlexDash' in my opinion.
This problem is compounded by the fact that there is no help file for 'FlexDash' appearing on the Node-RED website. This could very well be a deliberate attempt to help users install the right custom node, but it was still a confusing start for me and I suspect other users will have a similar experience.
When configuring FlexDash, one thing that wasn't immediately obvious was that I needed to restart Node-RED before the custom node showed up in the palette. This step iscovered in the documentsbut I suspect many users will be stuck trying to figure out why the palette manager says custom node is installed but nothing new has been added to the palette.
There is also aongoing discussionabout a way to solve the problem by changing how Node-RED handles dependencies, which looks promising.
I believe some improvements to the installation process could make FlexDash a much more popular custom node.
#How easy is it to run your first demo dashboard?
#FlexDash - 1st place
Getting a sample dashboard up and running in FlexDash is a breeze thanks to the sample flows included in the package. Simply go to 'Import', 'Examples' and select 'Hello-world' from the example streams. Now deploy and add /flexdash to the end of your Node-RED editor URL and you should have your first dashboard up and running.
#uibuilder - 2nd place
It was very simple to get a sample panel up and running in uibuilder. As with FlexDash, there are examples you can import. After importing an example, we started to see the significantly different approach to providing dashboards with the uibuilder for the other two solutions. The examples seem to demonstrate how you can create a dashboard instead of showing specific UI elements such as graphics in use.
#Panel - 3rd place
Running your first dashboard on the Dashboard is very easy, once installed you need to drag a UI element from the dashboard and assign it to a UI group and tab. The group and tab can be left as their default (initial) options, which I suspect most users will quickly resolve.
Then you need to deploy your flow and visit the dashboard using '/ui' at the end of your Node-RED editor URL and you're good to go.
The dashboard would benefit from some example flows, as we see in the other two custom nodes.
#How extensive is the collection of UI elements?
#FlexDash and Dashboard - 1st place together
It's really hard to separate these two, when considering the UI elements they come from. Both have ready-made solutions for graphics, gauges, buttons, dropdowns, toggles, text, etc. I think they both deserve #1 in this category.
#uibuilder - 3rd place
This is possibly a bit unfair to uibuilder. Arguably by design, uibuilder currently doesn't include many UI elements. To add the most useful elements (charts, gauges, etc.) this makes the uibuilder more versatile for users who are comfortable using code to define dashboards, but for the non-coders among us, it's less ideal.
#How good is the support and documentation?
#All three - joint first place
All three projects have an active community and good supporting documentation. While I may have a personal preference on how I'd like the documentation laid out, I don't think that makes any one project better than the rest.
#How 'cloud native' is the dashboard?
In the words ofCloud Native Computing Base'Cloud-native technologies empower organizations to build and run scalable applications in modern, dynamic environments such as public, private and hybrid clouds. Containers, service meshes, microservices, immutable infrastructure, and declarative APIs exemplify this approach.'.
'These techniques allow for loosely coupled systems that are resilient, manageable, and observable. Combined with robust automation, they allow engineers to make high-impact changes frequently and predictably with minimal effort.'.
So how well does each project conform to these ideals?
#Panel - 1st place
The Dashboard stores all configuration data on the Node-RED instance. When deploying an existing Node-RED project to a new instance, everything works exactly as before.
#FlexDash - 2nd place
As with the Dashboard, everything needed to define each dashboard is stored in Node-RED. This makes redistribution trivial. Unfortunately, as the Node-RED instance currently needs to be restarted before FlexDash will work, it lost the joint first place. It would be great to see this issue resolved in future releases. There is also aongoing discussionabout a way to solve the problem by changing how Node-RED handles dependencies.
#uibuilder - 3rd place
uibuilder uses the host instance's file system to store its configuration. In practice, this means that if you migrate the Node-RED project files to a new location, you will likely find that your dashboard no longer works. This can be mitigated by also migrating the filesystem (e.g. using persistent storage in Docker) and redeploying via a Docker registry, but it would be great to see the uibuilder move away from filesystem dependency as this will make tasks of DevOps much easier.
#How active is the development of each project?
#uibuilder - 1st place
uibuilder has had consistent commitments to the project for several years, with even greater activity since early 2022.
#FlexDash - 2nd place
Commits in FlexDash have been regular since mid-2022.
#Panel - 3rd place
The dashboard is now in a maintenance-only state. In the words of the project leader,'Angular 1 (the framework used to build the Dashboard) is now unsupported and it's only a matter of time before there is a serious security flaw against it, for which there will be no fix. Of course, we don't use all of its features, so we might be lucky that an exploit doesn't necessarily expose us directly, but it will compromise any audits that people want to do'.
In practice, this means that sooner or later using the Dashboard can become a significant security risk.
#What are the future development plans?
#uibuilder - joint first place
During the writing of this article, uibuilder released a new version with some significant new features. In the words of the project leader when talking about version 6.1.0, 'Looks like uibuilder is really growing. No more apologizing for not being a direct replacement for the Node-RED panel, the uibuilder has its own way.
Now you can create and update visible web page elements directly from Node-RED data without having to understand all the complexities and inconsistencies of HTML. You can build your own utility tools in Node-RED or in front-end code that take advantage of uibuilder's low-code UI features'.
It's great to see projects in active development. My biggest struggle using uibuilder is that I found it difficult to build the UI elements I needed based on low code workflows. According todevelopment roadmap for uibuilderthe project should progress to be increasingly easy to use for low-coders.
To quote the project lead again, 'In general, the continuing direction of travel is to enable more zero-code features that will work in Node-RED flows and front-end custom code. The low-code feature set is quite mature now and is well documented enough that it can be used by other tools should anyone wish to do so. I will be making sure the zero-code and low-code features are as easy to use as possible from both Node-RED and the front-end code for maximum flexibility'.
#FlexDash - joint first place
The FlexDash project lead said the following about the future development of the project. 'Currently, FlexDash has a fairly rigid overall page structure: there's a tab bar, and the content on each tab is organized into grids of widgets. The plan is to open it all the way up so the user can start from a blank page and place containers that contain widgets. This way almost any layout can be implemented in FlexDash'.
'I would also like to improve FlexDash's multi-user capabilities by supporting authentication and making it easier to implement flows that present per-user data on the dashboard'.
After using FlexDash for the last few weeks and finding it already to be a strong contender for all my Node-RED dashboard needs, it's great to see it continue to improve.
#Panel - third place
As mentioned above, Dashboard is no longer in active development. This is due to the structure on which it was built.(AngularJS)now not supported at the end of 2021. You can read much more detail about why continued Dashboard development is not practical in thisdiscussion on the Node-RED forums.
There may be a new effort to port the Dashboard to a new framework, but that's a significant amount of work. I suspect it would take hundreds of hours of development just to get the feature back to the same state as the current version, so I suspect that will never happen.
#Conclusions
Personally, I was a little surprised by these results. I've been using Dashboard for about 3 years now and have always found it to be a great tool for putting together quick and informative dashboards. That said, when trying to objectively compare it to uibuilder and FlexDash, the other two projects are generally individually better in a certain category. This, coupled with the Dashboard development halt due to AngularJS no longer being supported, makes it difficult to recommend Dashboard to entirely new Node-RED users in 2023, especially for commercial projects.
If you already use Dashboard, in a non-commercial environment you should probably continue to do so, you may find that your development almost stalls due to the abandonment of the underlying framework, but at least so far it's a great solution for building your dashboards Node-RED.
FlexDash is probably the best low-code solution for creating dashboards in Node-RED. If you don't get bogged down by the confusing installation process, I believe it's the one to pick at the time of writing because of the ongoing support and low-code interface.
Currently, uibuilder is not what I would consider a truly low-code option for creating dashboards, but it is moving in that direction. It has some great features and is extremely flexible, so it has a good chance of becoming the most popular solution for building panels on Node-RED in the long run. That said, at the time of writing, unless you're a 'coder', you might struggle to create a dashboard using it.