Uibuilder v6 beta - Ready to test

Share Your Nodes
1

Hi uibuilder fans, been rather too quiet on the uibuilder front recently. Been another odd and crazy busy year. However, I'm trying to get back into the next set of improvements for uibuilder and I think it is now pretty close.

If you like to keep up with the latest changes, please feel free to manually install the "v6.0.0" branch direct from GitHub after reading the latest CHANGELOG file so that you know what the requirements are, what has changed, the remaining known issue, and the last couple of things that might make it into v6.0.0. You can also check out the crazy long roadmap document if you want to get a feel for where things are going - you might even get inspired to contribute!

The breaking changes are minor. Just a change from node.js v12 to v14 to align to Node-RED v3 which is also the minimum supported version.

A few annoying things fixed, most importantly the built-in package management should be a lot more robust now an won't flake out if you have lots of uibuilder packages installed.

Not too much brand new stuff. You now have the option to include the client ID and IP Address in standard msgs as well as control msgs. There is a new basic VueJS v3 template to complement the v2 ones. Also a new example demonstrating how to use uibuilder to do some interesting logging. Many thanks to Harold Peters Inskipp for that contribution.

image
image1239×695 87.3 KB

Other key changes:

  • The new front-end client libraries are rather smarter at pestering you with errors and warnings. In particular, the client now knows if you are online or offline and is smarter at reconnecting you to Node-RED if the network returns. This is especially useful if you leave your browser open and the computer goes to sleep.
  • The new client libraries also know what type of page navigation happened last and the control msg to node-red indicates whether a "new" connection is really new or simply a client either reloading the page or reconnecting the socket.
  • Some small but useful tweaks to the uibuilder Editor panel. You can choose any instance top-level folder to serve your files from (nice for odd build processes). Some additional information is shown about what is happening. The library manager now shows if there are updates to installed packages, the marker is a button that will update the installed package.
  • The uib-list and uib-cache nodes have also had some tweaks to make them neater and more robust.
  • The usual tweaks to the tech docs and the back-end libraries.

So this won't be a massive release like v5 was but it should certainly bring some welcome improvements.

From v6 onwards, the new client libraries are now the preferred ones and the old uibuilderfe.js library is now stabilised and will not receive any further features. All new client library features will be in the uibuilder.iife.js and uibuilder.esm.js libraries. The old library will eventually be deprecated but probably not for some time since the old library still works.

Also from v6 onwards, I'll be trying to align better to Node-RED releases so expect a major release after there is a node-red major release. If nothing else, I want to push forward on node.js baselines since we need at least v18 when top-level await should go live and be stable. That should then start to open possibilities for converting from the current CommonJS module format to ESM. In turn, that opens a number of other possibilities.

TotallyInformation/node-red-contrib-uibuilder: Easily create data-driven web UI's for Node-RED using any (or no) front-end library. (github.com)

cd ~/.node-red
npm install TotallyInformation/node-red-contrib-uibuilder#v6.0.0

Have fun and please give any feedback in this thread.

4 Likes
2

Great work Julian !

1 Like
3

Awesome! Looks like my system going to sleep was causing one of my issues and I didn't even know it (one less thing to track down). Thanks for all of your hard work, and the shout-out too.

1 Like
4

Some new updates for uibuilder v6 beta.

  • The new optional msg._uib property on standard msgs now includes the client page name as well as the client id and client IP address. The underlying node property name has changed so if you had previously tested this feature, you will need to re-select the option.

  • fs-extra dependency library moved to latest v11 (makes the minimum node.js version 14.14)

  • uib-cache node now ignores input messages where the value of the chosen key name is an empty string, null or undefined. Fixes an edge case where the values were not being stored anyway. Key names have to be strings.

Still to do before release

  • Add context variable processing to the uib-list node

  • Fix page name processing on the old client (uibuilderfe.js)

  • On the "uibuilder details" (AKA uibindex) page, add folders to Vendor Routes table (from packageMgt.uibPackageJson.uibuilder.packages)

Possibly a few other things from the CHANGELOG "To do/In-progress" section might still make the cut. Any that don't make it to v6.0.0 will be transferred to the roadmap page.

Things you might not know about uibuilder

  • There is a set of new client (front-end) libraries: uibuilder.iife.js and uibuilder.esm.js (along with matching .min.js versions). These are the new standard client libraries, there are some examples that use them and I'll be updating all of the examples when time permits. How to use them is described here.

  • You can create and update web page content and design direct from Node-RED! This works with ANY FRAMEWORK!! See here for details.

  • You can use uibuilder with any framework (hopefully you already new that!). However, frameworks that need a build step can be somewhat intimidating to get started. This page gives more detail. A future version of uibuilder will add some additional helpers to make it easier.

  • uibuilder comes with some examples. See Node-RED's import function.

  • uibuilder comes with some built-in templates. These set up your front-end code for you, demonstrating the basic requirements. But did you know that it also supports external templates. Use these when you have a visual baseline that you want to reproduce or share with customers/colleagues. An external template is simply a preconfigured uibuilder instance folder that you put on GitHub. Why not showcase your external templates on the WIKI.

  • There is a first-timers walkthrough for getting started with uibuilder.

  • You don't have to use Node-RED's ExpressJS web server with uibuilder. If you want to have your own custom web server settings, a few changes in Node-RED's settings.js will let you do that. That even lets you use server-side templating in your front-end code!

  • While uibuilder does not provide any built-in security features, it does provide ExpressJS and Socket.IO middleware capabilities. It also provides a stable client ID, client IP address and the page name the client is using. These can help with authentication and authorisation processing.

  • The default folder for all uibuilder content is ~/.node-red/uibuilder. However, you don't have to keep it there. You can make it any folder accessible to Node-RED.

1 Like
5

And now fixed the page name processing for the old client, also boosted the old client's version number. Added a new "Did you know?" page to the docs.