Uibuilder progress [prep for v5.1] - new client library and experimental ui node

[TotallyInformation]

Hi all, been a few weeks since I shared an update with what is happening with uibuilder.

I've been creating some sample web components to work out the strengths and weaknesses and, more importantly, continue to experiment with the best ways of being able to generate data-driven web UI's without code.

I'm very pleased to be able to say that the new client library is about to be transferred into the dev version of uibuilder so you will soon be able to try it out a bit easier than currently (if you want to try it right now, install totallyinformation/web-components using the uibuilder library manager and dig around in the repo for the documentation).

The new library only works with modern browsers (2019+) but allows you to send structured data to build, destroy and update web page content from Node-RED. It also lets you load new libraries and modules and pre-load an entire UI from a JSON file. I've shared the JSON data schema previously so please do take a look at that if you are interested, it is very simple but still allows you to not only add and update both standard HTML elements, web components and also elements from any framework. You can set attributes and update properties. Nested elements are also possible and easy to do.

This is an example showing custom web components

However, that's not all!

Having built the framework, I can now also build nodes that talk to uibuilder and build/change UI elements in a way that is similar to how you work with Dashboard nodes BUT you can use ANY html element, framework element, etc. So you would never be restricted to a specific framework.

For example I'm currently building a simple test node that generates a list from an input array and uses standard HTML <ul>/<ol>/<dl> tags:

The flow above makes this change to the test page:

Creating an in-line list within one of the card components.

NO CODE AT ALL IS REQUIRED FOR THAT INTERFACE! However, in true uibuilder fashion, you CAN use code if you want to. You can mix and match code and configuration.

Obviously, the one thing not yet worked on is a layout engine such as you find in Dashboard.

I'll continue to work on this though and the early releases will be part of a uibuilder 5.1 release due soon.

---

This is what is already done or in-flight for 5.1

In-flight

• Experimental list node - connect to a uib instance, retains the last object/array sent to it and auto-sends a _ui msg on new client connection
• Add outdated markers to Editor Library tab.
• Lint to "Standard JavaScript" with node.js v12 and front-end to ECMA2019.

Fixed

• Improved module path search to allow an array of locations. Removes spurious warning about socket.io client not being found.
• /uibuilder/ping now correctly returns 204 (no content) status not 201.
• web.js::buildHtmlTable - over-optimised regex broke the table cells, now fixed.
• Connected control message now correctly contains the client id and client IP address. The client id does not change as much as the _socketId, it is saved in browser local storage so will be the same across sessions and multiple windows/tabs.

Changed

• Package.json: Changed homepage to point to Tech Docs on github.io.
• Editor:
  • Added stylesheet containing a class of emoji which provides nicer, cross-platform, colour emojis.
  • Libraries tab:
    • Change "URL to use:" to "Estimated link:" on the Libraries tab to make it clear that it might not be correct (down to the library author).
    • Added info emoji to package name (links to package homepage).
    • Added url link to estimated library to make it easier to find out if it actually exists and exactly where.
• package-mgt.js:
  • Rewrite root package.json and package details processing for more efficiency + prettify package.json output
  • Add outdated (current/wanted/latest) to uibRoot/package.json>uibuilder.packages in prep for update display in Editor

New

• uib-brand.css - will eventually be the new default uibuilder CSS. It is light/dark switchable both manually and by browser preference. Still under development.

• New ECMA Module front-end client library (uibuilder.module.js)

  The new library will only work with web browsers that support ES2019+ which should be all modern browsers since early 2019. It uses the new brand CSS by default.

  The most important feature is that it supports the new configuration/message-driven features that let you both build and modify web pages

  • Clients now report how many times they have connected since last page load. This lets uibuilder know whether the client is reconnecting or connecting for the first time.

• Runtime

  • Each uibuilder node instance issues a tiEvent when:

    • Instance setup is completed (node-red-contrib-uibuilder/${url}/instanceSetupComplete). The node object is passed as data.
    • A client (re)connects (node-red-contrib-uibuilder/${url}/clientConnect). The control msg is passed as data.
    • When a client disconnects (node-red-contrib-uibuilder/${url}/clientDisconnect). The control msg is passed as data.

    These can be used by any other node that uses the @totallyinformation/ti-common-events module. Such as the experimental uib-list node.

And this is what needs doing:

• Move new CSS and FE library
• Use new CSS in details pages
• New FE Library
  • Add uibuilder.ui({...}) function that allows passing the same data as msg._ui
  • Add handling for _ui.components[n].slots where slots is an object of named slots with the special name of default for the default slot (default must be handled first since it overwrites all existing slots)
• New Endpoint: Return uibuilder version
• Check - make sure that new/renew connections create events
• Simplify Gulp processing for node html files
• Improve fe module version comparison (-dev vs -xxx)
• Add connected # check to uib-cache node so that the cache isn't sent if not a new load
• Create min version of css. Create min version of client module.js, add map files