Pie in the sky: Front-end programming with Node-RED

[mdkrieg]

Hello,

I have this idea burning a hole in my head, and since I've no time to work on it I need to write it up so I can focus on other things.

I'll walk through my thinking in bullet-points:

• In essence, Node-RED is just a way of structuring Node.js into flows which are more natural to think about. I assume everyone here thinks this is an improvement over weaving function calls through a giant wall of text
• Front-end javascript suffers from this same problem, so why not use the same solution?

Now, if I were you I would be rolling my eyes at this point but hear me out:

• I'm not suggesting to run Node-RED fully in the browser, that is nonsense totally feasible, RE: PageNodes, lol.
• What if you were to dream up a set of nodes that have meaning in the browser context (http request, button clicks, html appends, cookies, etc...) and made "hollow" / logic-less nodes for these purposes, just so you can architect it out in NR.
• Then, what if you had a script that interpreted the flows.json file in the browser context and executed the flow as it would be intended in the browser.

This is essentially what I did with this project, but from C to A instead of A to B: Procedural function block programming with node red (like PLC FBD)

Is it my lucky day and someone has already done this?

Thanks for reading, all thoughts are welcome,

[dceejay]

Not sure if it’s what you mean but Luis Montes did create PageNodes back in 2016 Introduction to PageNodes, Browser-Based IoT Framework #IoTuesday #IoT « Adafruit Industries – Makers, hackers, artists, designers and engineers!

[mdkrieg]

Very interesting, I didn't realize some of this was even possible (mqtt, bluetooth, midi, all in-browser very impressive)

Unfortunately not quite what I was looking for.

I'm thinking of something where you want to design logic for an html application (think something like a TiddlyWiki for example), but instead of writing thousands of lines of javascript you want to write it in flows.

I imagine the only Node-RED asset you would use in this application is the flows.json file, then a magical all-knowing script reads this as JSON and says "aha, I know what these nodes mean, I can see how they're connected, I have control of your HTML, let's do it!" and ta-da, you have programmed arbitrary front-end logic using NR.

[TotallyInformation]

I've actually not much doubt that a simplified Node-RED runtime COULD run in the browser. It would play nicely with the discussion about a future Dashboard.

All it takes is someone with the knowledge and the time to make it happen

[shrickus]

@mdkrieg

I'm thinking of something where you want to design logic for an html application (think something like a TiddlyWiki for example), but instead of writing thousands of lines of javascript you want to write it in flows.

Well congratulations, Matthew -- now you have managed to "infect" my brain with this hole-in-the-head-burning train of thought... especially with the idea of incorporating a TiddlyWiki non-linear single-page app page flow! I had forgotten how much I enjoyed generating TiddlyWiki pages from database queries -- so it's a reasonable next step to just build it from flows.json data, right?

Darn you... now I'll never get any of my paid work done! *sigh
I guess I'll sleep in the afterlife...

[mdkrieg]

Thanks for the encouragement, I actually threw together an example of what I'm thinking of...

Here's the example application I made, a little CSV generator: Link to GitHub Pages

Here's the flow that makes it work:

Here's the "magical all-knowing script" I mentioned earlier (only knows a little bit right now >_<)

If you take a look at the source code of app.html, you can see there is no connection to a node-red server, only the flows.json which is embedded into the page:

This means that the app will work whether it's hosted or if you download it as a standalone file, yet the logic was designed in Node-RED