UIBUILDER: What's happening?

Share Your Nodes
1

Hi y'all UI builders. For those interested in the development of it, here's what's currently happening.

I haven't had anywhere near as much time as I expected to have this winter to work on new releases. But of course, I did manage to squeeze out a couple with some very useful updates including the new front-end router.

As for the next steps:

Well, if you've been trying the router, you will be glad to hear that the next release (most likely v6.9) of UIBUILDER has some BIG updates to the router. Firstly, it is getting the ability to define route content using Markdown. Works in the same way as the main uibuilder library in that you load the Markdown-IT library and the feature magically turns on. So all those many pages of knowledge-base or blog pages, the contents of your Obsidian folders, etc will now all be accessible as routes.

The router will also get the ability to load non-route external files as well. Really useful for defining menus externally or to load headers/footers or anything else of a more "fixed" nature than the routes themselves. Whereas the routes all load to a fixed parent, the non-route "other" content can be loaded to any parent element.

The router also gets some new options for lazy loading the route templates as well as auto-unloading them. The various combinations of operational modes will let you optimise memory use, especially for really big numbers of routes. It also lets you ensure that users get the latest route content in case Node-RED or some other process changes that content.

The main uibuilder client library now also understands the router and tracks whether it is in use, what the current route is and so on. The router itself is still not actually dependent on uibuilder so can be used separately.

The client library also gets a really nice update such that it now automatically recognises any HTML tag having a uib-topic or data-uib-topic attribute. As it discovers them (it is fully dynamic so even late added elements will work), it creates a listener for messages from Node-RED with that msg.topic and automatically updates the child content (from msg.payload) or the attributes (from msg.attributes). This will be even easier to use than the <uib-var topic="xxxx"> custom component. It is also 100% standard HTML, works on any HTML tag.

There is much more to come, these are just the current highlights.

3 Likes
2

And here is a quick example of a page showing a route defined as Markdown, complete with syntax highlighting:

image
image955×860 31 KB

This example will be available in the uibuilder Node-RED examples library.

3

So, a quick update on what's happening with UIBUILDER.

Here are some highlights:

uibuilder front-end library

  • Allow ANY HTML tag to have a uib-topic (or data-uib-topic) attribute. If set, an automatic message listener for messages from Node-RED with that topic is created. Each matching message's payload will replace the innerHTML of the element. And, if the message has a msg.attributes property, they will be used to update the element's attributes (allowing for class, style, etc changes).

    This is likely to be the new easiest way to update your UI from Node-RED! However, it does have some overheads so I'm intending to make it optional (on by default) in case you have large, complex pages on limited performance client devices.

    For the technically minded, it uses the JavaScript Mutation Observer API and so is, again, 100% native.

Router library

  • Markdown-based route content
  • Non-route external content (allowing for menus and other content from external files)
  • If using uibuilder with the router, the uibuilder FE library now keeps references to the router and current routes for ease of use. As always though, the router is not dependent on uibuilder.

General

  • Security checks added to the repo to help ensure the safety and security of UIBUILDER.
  • Editor node help moved to locale folders. This is the first part of the effort to enable localisation of UIBUILDER. If you would like to contribute, please get in touch.
  • If using the router library, the current route is included in the msg._uib metadata. So that you can route messages based on that as well as page & client ids.

uib-brand CSS

  • As part of the basic reset, <main>, <header> and <footer> tags can be used to limit the max width sensibly. That max width is now a CSS variable to make it easy to override.

And more?

Yup, there are loads of things on the priority list, not yet sure which of these will make the next release.

  • One thing has become clear now that we are getting more advanced features in the front-end library. That is that there are use-cases where people need to be able to pre-configure the uibuilder client. This will enable the Mutation Observer feature to be turned off in case it is causing performance issues. It might also allow people to pre-configure managed variables and other settings. The plan is to allow a pre-configuration global variable to be set before loading the library. The library will check for that and configure itself accordingly.

  • More background refactoring of code to make it ever more structured (particularly filing system access).

  • Extending the feature that allows you to directly open your web source folder in your code IDE. Currently this only works if running Node-RED locally and only with VSCode. I will extend this to allow other URL schemes to be used including VSCode's remote code edit extension. This should be a really nice capability for anyone who wants to use standard web development approaches.

  • Adding options to the low-/no-code nodes to add filtering by router, client, page ids.

  • Similarly adding filters to the cache node.

  • Also for the cache node, an option to delay cache replay. This can be useful for some route processing.

  • New uib-element type to create router menus.

  • Ongoing improvements to make better use of the latest versions of Socket.IO and better use of "Rooms". Potentially allowing client-to-client messages without needing Node-RED flows.