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

**URL:** <https://discourse.nodered.org/t/pie-in-the-sky-front-end-programming-with-node-red/51887>\
**Category:** General\
**Created:** [5 October 2021 17:44 UTC](https://discourse.nodered.org/t/pie-in-the-sky-front-end-programming-with-node-red/51887 "2021-10-05T17:44:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdkrieg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mdkrieg/32/39091_2.png) [@mdkrieg](https://discourse.nodered.org/u/mdkrieg)\
**Post date:** [5 October 2021 17:44 UTC](https://discourse.nodered.org/t/pie-in-the-sky-front-end-programming-with-node-red/51887/1 "2021-10-05T17:44:01Z")

</div>

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)](https://discourse.nodered.org/t/procedural-function-block-programming-with-node-red-like-plc-fbd/49329)

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

Thanks for reading, all thoughts are welcome,

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 October 2021 18:34 UTC](https://discourse.nodered.org/t/pie-in-the-sky-front-end-programming-with-node-red/51887/2 "2021-10-05T18:34:16Z")

</div>

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!](https://blog.adafruit.com/2016/04/19/introduction-to-pagenodes-browser-based-iot-framework-iotuesday-iot/)

---

<div class="post-metadata">

**Author:** ![mdkrieg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mdkrieg/32/39091_2.png) [@mdkrieg](https://discourse.nodered.org/u/mdkrieg)\
**Post date:** [5 October 2021 19:05 UTC](https://discourse.nodered.org/t/pie-in-the-sky-front-end-programming-with-node-red/51887/3 "2021-10-05T19:05:24Z")

</div>

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](https://tiddlywiki.com/) 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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 October 2021 08:42 UTC](https://discourse.nodered.org/t/pie-in-the-sky-front-end-programming-with-node-red/51887/4 "2021-10-06T08:42:23Z")

</div>

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 😀

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [6 October 2021 13:46 UTC](https://discourse.nodered.org/t/pie-in-the-sky-front-end-programming-with-node-red/51887/5 "2021-10-06T13:46:06Z")

</div>

> [@mdkrieg](#):
>
> I'm thinking of something where you want to design logic for an html application (think something like a [TiddlyWiki](https://tiddlywiki.com/) 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...

---

<div class="post-metadata">

**Author:** ![mdkrieg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mdkrieg/32/39091_2.png) [@mdkrieg](https://discourse.nodered.org/u/mdkrieg)\
**Post date:** [6 October 2021 20:43 UTC](https://discourse.nodered.org/t/pie-in-the-sky-front-end-programming-with-node-red/51887/6 "2021-10-06T20:43:12Z")

</div>

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](https://mdkrieg.github.io/ReQUI/html/app.html)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/9/e908986652ca0b9074388f7325dd02f836cca72c.png)

Here's the flow that makes it work:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dcfe12449f728ea3b013ae7249e6d7222025ae41.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/6342e92ced222fa9e7031518216dc2fbc9ef6035.png)

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fe9b3b6d7fe4c453c4012e66e9c6d387ef95ae70.png)

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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7f590b8180ec92fa678f54aaf4928ee8ab88adcf.png)

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 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 December 2021 20:43 UTC](https://discourse.nodered.org/t/pie-in-the-sky-front-end-programming-with-node-red/51887/7 "2021-12-05T20:43:39Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.