Write Nodes using Vue 3 and Typescript

Developing Nodes
1

Here's the initial draft of my framework for building Nodes using Vue 3 and TypeScript. I'd appreciate it if you could take a look and share your feedback.

You can install the nodes in your Node-RED instance using the distribution package found in the /dist folder of the repository above.

1 Like
2

Love the use of components here to create the config screens for a node. I recently spoke with some people about, in core Node-RED, providing Web Components for these fields, as it would greatly improve the development experience for building custom nodes.

1 Like
3

Web components are great too. I used to develop web components using a framework called LWC, from Salesforce, and I liked it. Initially I was thinking about using LWC because I thought that using ES Classes would make the client-side and server-side implementation of the Node very similar, which would help reducing Cognitive Burden, but after thinking for a few weeks I decided to use Vue for several reasons:

  • Node types in the editor are not objects or or multi instances, they are just single definitions of how a node must behave and rendered. Because of that, i realized that using a Class to define a Node would look weird.
  • Vue has the best DX and tools when compared to other frameworks. (Maybe Im biased)
  • Vue rampup is faster than web components specially if one uses the Options API. The native lifecycle hooks are way more human friendly than the ones from web components. I really think a robot came up with the name "connectedCallback" haha
  • Vue has a huge list of open source components/libraries Node authors can use. Way bigger than LWC or pure Web Components
  • The Dashboard and Flowfuse are both using Vue. More specifically, I thought it could help improving the DX when developing new Widget Nodes.
  • I've been learning Vue since 2018

The core components I developed are all wrappers around the native Node-RED inputs. I thought about rewriting all those using "native" Vue for better integration, but it would be impossible for me to do it alone, specially the typedInput one. It is huge and has too many specs. At the end, using the minimum jquery, which is already shipped by the editor and therefore doesnt need to be bundled, was just fine to achieve my goal. I think I was able to improve the dev experience really well.

I hope people give it a chance. Ive been thinking about this framework since the end of 2023. I put a ton of brain power to make this work. The initial version of the framework came out with the nrg cli

I didnt like how the client-side part of the node was written. It was still relying on jquery to manipulate the dom, there was no typescript and type safety was not garanteed at runtime. To fix these 3 issues I added Vue, Typescript and AJV+JSON Schemas.

1 Like
4

All of this summarises very nicely why I chose it for Dashboard too.

1 Like