Dev update: UIBUILDER v7 progress

Share Your Nodes
1

Hi all, time for a quick update on what's happening with UIBUILDER.

I've been beavering away at the code as time permits and there has been, as usual, some pretty heavy back-end improvements, notably the elimination of some external libraries and improvements in npm package handling. That's all behind-the-scenes though. Here are some more interesting highlights:

:pushpin: Highlights

  • You can now add a uib-topic="mytopic" attribute to ANY HTML element. Doing so makes that element responsive to messages from Node-RED.

    For a message with the correct msg.topic. The msg.payload will replace the inner HTML of the element. msg.attributes will update corresponding element attributes. Making this now one of the easiest ways to define dynamic updates in your UI.

  • Lots of extensions and improvements to the uibrouter front-end routing library in this release:

    • You can now define a set of external html files (that can include scripts and css just like routes) that are immediately loaded to the page. These can be defined in the initial router config when they will be loaded immediately (before routes) or can be manually loaded later. Use these for things like menu's or other fixed parts of the UI.

    • You can now define route content as Markdown instead of HTML. This makes Notion/Obsidian-like applications feasible using UIBUILDER.

  • Markdown improvements.

    Both the main uibuilder node (via the ui.js library) and the uibrouter library both accept markdown content (via the external Markdown-IT library) and now they both support Markdown-IT plugins so that you can add features such as checkbox lists, GitHub style callouts, Mermaid diagrams and much more.

    There is also a new documentation page dedicated to using Markdown.

    And, the no-code example flow has been extended to demonstrate how to dynamically load all of the libraries, plugins and even how to set up responses back to Node-RED - for example when a checkbox is clicked.

  • Wherever you can use no-/low-code features that accept HTML, you can now include <script> tags that will be executed on load.

  • A new node is available. uib-file-list will produce a list of files from a uibuilder instance. It automatically adjusts to the currently served sub-folder and allows filtering. Use this for producing indexes and menus.

  • Handling of forms and inputs continue to improve.

    • Programmatic changes to input values or checked properties now trigger both the input and changed events - something that HTML normally doesn't do but can be important for data-driven web apps. For example, if using an <output> tag to show a combined or calculated input, changes via Node-RED will still update the values.
    • When using the eventSend(event) function on inputs whether inside or outside of a form, the returned values have been improved, especially for checkboxes and radio buttons.

  • Security of the UIBUILDER repository on GitHub has been improved.

  • On the uibuilder node's "Core" tab, the info buttons bar has changed slightly. The "Docs" button has gone (it is still on the top of panel bar anyway) and been replaced by a new "Apps" button which shows a page listing ALL uibuilder node instances along with their descriptions where provided.

I've not quite decided (as usual) when to stop with the updates. You can check the changelog file in the v7 branch on GitHub if you want to see what might still happen. Though certainly not all of that will go into v7.0.0. The changelog in the branch also provides more detail on what has changed. I still plan to release v7.0.0 in rough alignment with Node-RED v4.

As previously mentioned, a major version change is also the opportunity to make some changes that might impact a few people's existing flows and code. As always, I try to keep these to an absolute minimum and most of them are either rarely used (if ever) edge cases or old features that have been on their way out for several years now.

:warning: Potentially Breaking Changes

Note that potentially breaking changes are only introduced in major version releases such as this one. It has been a couple of years now since the last, v6, major version.

Most of these changes will not impact most people but you should check through them just in case.

  • If using uibuilder's custom ExpressJS server feature, URL's are now case sensitive

    This brings them into line not only with W3C guidance but also with the Socket.IO library. It can be turned off in settings.js using property uibuilder.serverOptions['case sensitive routing'] set to false.

    Note that when using Node-RED's internal ExpressJS web engine, URLs are still case-insensitive because that's how Node-RED has been configured.

  • Minimum node.js now v18 - in line with the release of Node-RED v4, the minimum node.js version has moved from v14 to v18.

    If you need to update your own servers, please remember to do an npm rebuild of all node.js packages afterwards.

  • Rewrite of the uibuilder.eventSend(event) function in the client library.

    This might have an impact only if you were relying on some of the auto-naming features of form elements since the formula for that has been significantly improved.

    That function has been extensively re-written and should provide significantly better results now.

  • Removal of the uibuilderfe library

    If you are still using this old library in your HTML code, please move to the module based library as it is far more feature rich and has many bugs removed.

  • Removal of the uib-list node

    The uib-element node does everything that it did and more.

  • Moved socket.io-client from dependencies to dev-dependencies

    If using the module based client library, you should not be loading the Socket.IO client yourself since it is already built into the client library. If you are still using the old uibuilderfe client, you should replace that and remove the socket.io client library from your html files.

  • Removed the css auto-load from the client library

    This automatically loads the uib-brand.css if no css is provided at all. Since all of the standard templates include some CSS and have for a long time, this should not impact anyone.

    At least 1 person hit a race condition. ref. So this is best removed.

  • jsdom (using in the uib-html node) now tracks the latest releases again

    Shouldn't be breaking at all but you might still want to review things since the new versions of jsdom are likely to have better available features. We were restricted to jsdom v21 previously as newer versions required node.js v18+.

  • ejs package removed

    This should not impact anyone. ejs is an ExpressJS server-side templating library and what instructions exist (minimal) say that you need to install it manually. A new How-to: Server-side Rendered Views has been created to help understand how to use server-side templating. It is far from complete however.

  • Removed Pollyfills from uibuilder editor code - shouldn't impact anyone using a browser from the last 5 years or so.

  • A uibuilder node cannot be given a URL name of common as this would clash with the built-in folder of the same name that holds resources that can be shared with all instances. This was an oversight in previous releases I'm afraid, now fixed.

  • The uibuilder node, no longer has the "Show web view of source files (deploy before you can use it)" option. The supporting external library was also removed. It never looked that good anyway. Please use the new uib-file-list node to produce a custom folder/file list and send to your own custom page.

7 Likes
2

I don't know where you get all the time to put into this Julian - but hats off to you for the ongoing ceaseless devotion and work

Craig

3 Likes
3

Thanks Craig :grinning: The advantages of no longer having Children at home and not being into watching TV!

Generally, I tend to do short "sprints" when the mood strikes. My wife has her sewing, I have my coding.

6 Likes
4

Yeah for a while there we had no children in the nest - but somehow they have both landed back here ! No more eating dinner in front of the TV with my laptop !!

Craig

3 Likes
5

I enjoyed this advantaged only for a short period... Now there are grandchildren running through rooms!

3 Likes
6

How this would work? I am using index.html to handle fixed parts (menu, header, footer).

7

The idea might be that you could generate a menu - or >1 for different things - in Node-RED, maybe using the new uib-file-list node and using the uib-html and uib-save nodes to create the menu file using a flow.

So my thinking is that you might have a load of, lets say, Markdown files that you occasionally update and/or add to. So now you will be able to watch for changes and automatically re-recreate your menu all from within Node-RED. At the same time, you are creating the menu as static HTML for maximum performance.

Obviously, if you just have a few routes then this is overkill & you can do it manually as you have done.

At some future point, I'd like to have all the jigsaw pieces to be able to use Node-RED and UIBUILDER to create Knowledge Management tools similar to Notion or Obsidian.

1 Like