Hello everyone, I'm working with nodered recently and I really like the dashboard, but now I discovered uibuilder, so I decided to start studying the documentation. I don't have experience with web programming, but I am very interested in the solution with the Moon.js framework, I am trying to understand. Should "data", "computed", and "methods" clauses be similar to vue.js? What changes with hook? I refer to this solution Example, MoonJS with Mini.CSS · TotallyInformation/node-red-contrib-uibuilder Wiki · GitHub
I'd like to understand it, shoud I start from vue.js ? are these concepts common to vue.js?
Thanks
Hi Rose,
While uibuilder comes with VueJS and bootstrap vue along with a default template that uses those libraries, you are certainly not constrained to using them.
To use MoonJS, you will need to add the core library using uibuilder's library management feature. That will make the MoonJS module folders available to your front-end code. So you will want to empty out the Vue code and libraries from index.html and replace with some basic Moon stuff as in the example.
Then you will also want to change your index.js file also. One thing to note is that you must initialise uibuilder in the front-end using uibuilder.start(). That must be done when at least some of the Moon library has been initialised.
Last time I looked (a while back now), Moon was very similar to Vue and you will note that the code is very similar to the default template using Vue. So yes, data, computed, methods and hooks are very similar to VueJS. A hook is simply a place in the startup and management of a framework that lets you insert your own code. The mounted hook is the most commonly used. The mounted function is called once Vue/Moon has loaded and initialised all of its internal code AND has translated the HTML you have written (which includes non-html Vue/Moon components) into a real HTML page. So at that point, everything is ready for you to be able to make changes to variables that then Vue/Moon uses to drive changes to the UI.
The best thing to do to get started is to add a uibuilder node, change the url and deploy then edit the index.html and index.js files. Load up the front-end code (there is a button in the node to do that) and see what you get.
From there it is a matter of familiarising yourself with the inbound (uibuilder.onChange('msg',....) and outbound (uibuilder.send(msg)) message handing in your front-end code - how to listen to and talk to Node-RED. Then understanding how they interact with how Moon manages changing the UI from changes to its variables.
It isn't as hard as it sounds. Have a play and I'm sure you will be up and running in no time.
Of course, you could also start with VueJS, combined with bootstrap-vue, you get some very easy to work-with tools that lets you start creating responsive UI's with very little work. Do you have a particular reason for choosing Moon? VueJS is one of the fastest growing front-end frameworks around so it has really good support.
But as I say, you can use any framework with uibuilder, that is one of the core requirements of its development.
Hopefully that helps but don't hesitate to ask more questions.
2 Likes
Hi Julian, I am honored to have an answer from you, I admire your work.
I only have a question, it's probably stupid. uibuilder.send(msg) as msgsSent?
I realized starting from Moon.js is useless anyway, I must study vue.js. I will try to study Moon.js as soon as possible. There isn't a reason why I decided to use moon..
curiosity, it seem very powerful and performs well. It's a good reason to start learning new things.Thank you very much!
Hey thanks! Nice to get good feedback to be sure.
No such thing as a stupid question.
In the default Vue template, there is some code that shows you how to take an action when a message is sent back to Node-RED. The template uses that function to simple keep track of how many messages you send using uibuilder.send. It is a small function in the library. To be honest, you will probably never need it but I've left it there because it is useful when debugging things.
uibuilder.send is the front-end equivalent of node.send in a Node-RED function node. Except that it goes from the front-end (the browser) to the back-end (Node-RED on the server). The msg pops out of the top output port of your uibuilder node with some standard metadata added such as the client's socket id which lets you do some processing and send an answer back only to the sender (delete the socket id if you want a returned msg to go to all attached clients).
Well, I'm sure that moon has its place. But Vue seems to have matured but still kept its flexibility. So I think you are probably right to just focus on Vue for now.
By the way, I very nearly chose Moon.js instead of Vue when I moved from uibuilder v1 to v2. In v1, jQuery was the default library. Vue gave far more capability than jQuery for about the same size of library code. Vue vs Moon was a debate for a while but Vue was clearly outstripping other front-end frameworks by a long way.
Going even further back into history, before uibuilder sprang with a lightbulb moment into existence, I'd tried something previously with Vue but couldn't get it to work. It also looked as though Vue was going to go down the same path as REACT which virtually requires a build step for front-end apps. I really didn't want that because it is a massive step of complexity for beginners and non-web developers. Thankfully Vue decided to become more flexible and by the time I'd circled back round to the idea of a very flexible data-driven UI builder, it was ready to be used.
uibuilder has a long journey ahead of it and I've lots of ideas - vastly more than I can implement while still carrying a day-job - but thankfully it is also fun (mostly) and challenging.
You come to it at a good time though with v3 recently released. Have fun and please do share things that you build with it, problems you discover and ideas you'd like to see included.
Thanks for giving it a go.
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
