Comment: I really like this generally, some of the hacker news comments have some paradigms that may help for burrito
Text
<link rel="icon" href="y18.svg">
<link rel="canonical" href="https://news.ycombinator.com/item?id=39628285"> <title>Show HN: Flyde – an open-source visual programming language | Hacker News</title></head><body><center><table id="hnmain" border="0" cellpadding="0" cellspacing="0" width="85%" bgcolor="#f6f6ef">
<tbody><tr><td bgcolor="#ff6600"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:2px"><tbody><tr><td style="width:18px;padding-right:4px"><a href="https://news.ycombinator.com"><img src="y18.svg" width="18" height="18" style="border:1px white solid; display:block"></a></td>
<td style="line-height:12pt; height:10px;"><span class="pagetop"><b class="hnname"><a href="news">Hacker News</a></b>
<a href="newest">new</a> | <a href="threads?id=sipjca">threads</a> | <a href="front">past</a> | <a href="newcomments">comments</a> | <a href="ask">ask</a> | <a href="show">show</a> | <a href="jobs">jobs</a> | <a href="submit" rel="nofollow">submit</a> </span></td><td style="text-align:right;padding-right:4px;"><span class="pagetop">
<a id="me" href="user?id=sipjca">sipjca</a> (<span id="karma">35</span>) | <a id="logout" rel="nofollow" href="logout?auth=608fa7268cdf5f3b95ae4762913da459c01c77b7&goto=item%3Fid%3D39628285">logout</a> </span></td>
</tr></tbody></table></td></tr>
<tbody><tr class="athing" id="39628285">
<td align="right" valign="top" class="title"><span class="rank"></span></td> <td valign="top" class="votelinks"><center><a id="up_39628285" class="clicky" href="vote?id=39628285&how=up&auth=62f798e77f6539d28dc44449df44bc18ec0b8fa2&goto=item%3Fid%3D39628285"><div class="votearrow" title="upvote"></div></a></center></td><td class="title"><span class="titleline"><a href="https://github.com/flydelabs/flyde">Show HN: Flyde – an open-source visual programming language</a><span class="sitebit comhead"> (<a href="from?site=github.com/flydelabs"><span class="sitestr">github.com/flydelabs</span></a>)</span></span></td></tr><tr><td colspan="2"></td><td class="subtext"><span class="subline">
<span class="score" id="score_39628285">190 points</span> by <a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T12:33:36"><a href="item?id=39628285">9 hours ago</a></span> <span id="unv_39628285"></span> | <a href="flag?id=39628285&auth=62f798e77f6539d28dc44449df44bc18ec0b8fa2&goto=item%3Fid%3D39628285" rel="nofollow">flag</a> | <a href="hide?id=39628285&auth=62f798e77f6539d28dc44449df44bc18ec0b8fa2&goto=item%3Fid%3D39628285">hide</a> | <a href="https://hn.algolia.com/?query=Show%20HN%3A%20Flyde%20%E2%80%93%20an%20open-source%20visual%20programming%20language&type=story&dateRange=all&sort=byDate&storyText=false&prefix&page=0" class="hnpast">past</a> | <a href="fave?id=39628285&auth=62f798e77f6539d28dc44449df44bc18ec0b8fa2">favorite</a> | <a href="item?id=39628285">86 comments</a> </span>
</td></tr>
<tr style="height:2px"></tr><tr><td colspan="2"></td><td><div class="toptext">Hi HN! I’m Gabriel, and I’m happy to share a project I’ve been working on for the last few years: Flyde, an open-source visual programming language. Check out the interactive examples and online playground on the website: <a href="https://www.flyde.dev" rel="nofollow">https://www.flyde.dev</a>.<p>In my last role as an engineering manager for a B2B-oriented product, I authored and reviewed many diagrams for backend applications, mostly for integrations between 2 third-party services. Some of these diagrams were elaborate enough that I started dreaming of a way to simply run a diagram as is; I imagined a “run” button on the top-right corner of the screen that would execute the diagram without the need to translate it into code.</p><p>That led me down a rabbit hole of exploration and experimentation, from tools like Zapier, Pipedream and Make, which are great for automating “backoffice” stuff, and up to NodeRED, NoFlo.js and the great work of J. Paul Morisson on Flow-Based Programming. I failed to find a tool that would answer my needs - a tool that balances a new level of abstraction, manages to stay powerful and flexible, and most importantly, integrates with the existing ecosystem, and doesn’t replace it. I built Flyde as an attempt to answer that need.</p><p>Flyde is designed to complement and enhance traditional textual coding, not to replace it. It includes a VSCode extension, it seamlessly integrates with existing TypeScript/JavaScript code and can run on Node.js and in the browser.</p><p>I believe that as we delegate more coding tasks to AI, we’ll assume the role of an architect rather than a programmer. This shift will require tools that focus more on orchestration and high-level troubleshooting and less on low-level functionality.</p><p>I’d love to hear your thoughts and feedback on Flyde’s direction!</p></div></td></tr> <tr style="height:10px"></tr><tr><td colspan="2"></td><td><form action="comment" method="post"><input type="hidden" name="parent" value="39628285"><input type="hidden" name="goto" value="item?id=39628285"><input type="hidden" name="hmac" value="e96538dfd2fa2156acaca19d505db0a23a44e0d1"><textarea name="text" rows="8" cols="80" wrap="virtual"></textarea><br><br>
<input type="submit" value="add comment"></form></td></tr> </tbody></table><br><br><table border="0" class="comment-tree">
<tbody><tr class="coll athing comtr" id="39628528"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="nosee votelinks">
<center><a id="up_39628528" class="clicky" href="vote?id=39628528&how=up&auth=c26c3c6017c2e9265d31ccf8fb110e6d0c727ff4&goto=item%3Fid%3D39628285#39628528"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=pjerem" class="hnuser">pjerem</a> <span class="age" title="2024-03-07T12:59:24"><a href="item?id=39628528">9 hours ago</a></span> <span id="unv_39628528"></span> <span class="navs">
| <a href="#39634353" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628528" n="20" href="javascript:void(0)">[20 more]</a><span class="onstory"></span> </span>
</span></div><br><div class="noshow comment">
<span class="commtext c00">That's really great.<p>I know it's polarizing but I truly think that visual programming remains an entirely unexplored area. I'm convinced that the current state of "text" programming is totally ineffective and in fact we are the last domain producing things with computers which still insist in being limited by the text files in folders abstraction.</p><p>It's a shame that in 2024, I still have to search for text in files like it's 1970, guess which file does what based on the dozen of characters of the file name and can't see at a glance which other files are dependencies or uses.</p><p>I can't "see" my entire codebase, zoom in and out, I still have to guess the relation between some line of code and another in another file.</p><p>My ideal IDE of the future just allows me to see all my codebase like a big fractale.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628528&goto=item%3Fid%3D39628285%2339628528" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39629217"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39629217" class="clicky" href="vote?id=39629217&how=up&auth=ff9dd05e5f49cfe53afa53f0246eb70f94fd6343&goto=item%3Fid%3D39628285#39629217"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=thesuperbigfrog" class="hnuser">thesuperbigfrog</a> <span class="age" title="2024-03-07T14:08:06"><a href="item?id=39629217">8 hours ago</a></span> <span id="unv_39629217"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39628653" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629217" n="7" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">>> visual programming remains an entirely unexplored area<p>Visual programming languages have been around since at least the 1970s:</p><p><a href="https://en.wikipedia.org/wiki/Visual_programming_language" rel="nofollow">https://en.wikipedia.org/wiki/Visual_programming_language</a></p><p>Several are used real-world production cases:</p><p><a href="https://en.wikipedia.org/wiki/LabVIEW" rel="nofollow">https://en.wikipedia.org/wiki/LabVIEW</a></p><p><a href="https://en.wikipedia.org/wiki/Simulink" rel="nofollow">https://en.wikipedia.org/wiki/Simulink</a></p><p><a href="https://en.wikipedia.org/wiki/Pipeline_Pilot" rel="nofollow">https://en.wikipedia.org/wiki/Pipeline_Pilot</a></p><p><a href="https://en.wikipedia.org/wiki/IBM_Cognos_Analytics" rel="nofollow">https://en.wikipedia.org/wiki/IBM_Cognos_Analytics</a></p><p>While visual programming systems work better for some use cases, they are usually less agile versus text-based systems for several generalized programming tasks: 1) difference comparisons ("diffs"), 2) version control, 3) code search, and 4) code input (Most visual systems require a mouse and careful placement of connectors).</p><p>Visual programming systems tend to excel for domain-specific tasks carried out by non-technical or semi-technical users, but for generalized programming, text-based programming systems are more popular for highly technical software developers.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629217&goto=item%3Fid%3D39628285%2339629217" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39630096"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39630096" class="clicky" href="vote?id=39630096&how=up&auth=3b8c63d50dce5e82e0df588a97a517e6684a6865&goto=item%3Fid%3D39628285#39630096"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=throwaway632" class="hnuser"><font color="#3c963c">throwaway632</font></a> <span class="age" title="2024-03-07T15:16:24"><a href="item?id=39630096">7 hours ago</a></span> <span id="unv_39630096"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">root</a> | <a href="#39629217" class="clicky" aria-hidden="true">parent</a> | <a href="#39633678" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39630096" n="4" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Another problem with visual programming is it forces your program to be planar, or at least nearly planar with some crossovers.<p>In my experience real code can't be represented legibly on a 2D plane. "Generate code map" features of IDEs usually produce incomprehensible graphs, when you try them on actual codebases.</p><p>I never tried CodeSee before it shut down, was it any better?
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39630096&goto=item%3Fid%3D39628285%2339630096" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39630747"><td><table border="0"> <tbody><tr> <td class="ind" indent="3"><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks">
<center><a id="up_39630747" class="clicky" href="vote?id=39630747&how=up&auth=2fb9197f88352bf3d7ee2656e304738155f3bd45&goto=item%3Fid%3D39628285#39630747"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=k_g_b_" class="hnuser">k_g_b_</a> <span class="age" title="2024-03-07T16:09:42"><a href="item?id=39630747">6 hours ago</a></span> <span id="unv_39630747"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">root</a> | <a href="#39630096" class="clicky" aria-hidden="true">parent</a> | <a href="#39631269" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39630747" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">What is code in a text editor if not a legible 2D planar representation of the "real code"?
The real difference between text and a graph of definition-use edges and nodes is that the text representation does not have any intrinsic information on the real code's structure and does not display definition-use edges - at least by default. Most code editors provide some way (via LSP/etc) to display the edges however - usually as a list of the other end of the edge in a dialog/window/similar separate from the code.
Given that some textual representation (e.g. variable names) of source and target is possible, a graph-displaying editor can just "abbreviate" an edge (or: make it implicit) by using the other end of the edge.
If a graph editor makes all edges implicit by a certain strategy of using names/whitespace/parentheses/etc, the result would be a text representation a text editor displays.
The main issue is not in difference of display, but in the mode of editing: a text editor allows much more partial input that violates the structure a graph is expected to have: malformed definitions of programming constructs that are neither a node nor an edge in the graph. A graph editor must either allow such partial input in some way (e.g. enter temporary textual representation, transform into group) or use a different input model that doesn't allow such unrepresentable input, e.g. using mostly mouse, or an editing keyboard language like Vim's objects & verbs.
On the other hand a text editor requires you to agree on a formatting style with your colleagues and running autoformatters, looking past useless formatty diffs in code review, fixing syntax errors, dangling else,...</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39630747&goto=item%3Fid%3D39628285%2339630747" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39634228"><td><table border="0"> <tbody><tr> <td class="ind" indent="4"><img src="s.gif" height="1" width="160"></td><td valign="top" class="votelinks">
<center><a id="up_39634228" class="clicky" href="vote?id=39634228&how=up&auth=3359f3eb1a30277d61976f760a35adb938b586c4&goto=item%3Fid%3D39628285#39634228"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=zem" class="hnuser">zem</a> <span class="age" title="2024-03-07T20:29:42"><a href="item?id=39634228">1 hour ago</a></span> <span id="unv_39634228"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">root</a> | <a href="#39630747" class="clicky" aria-hidden="true">parent</a> | <a href="#39631269" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634228" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">i think the parent meant "planar" in the graph sense, that is, capable of being drawn in a plane with edges not crossing each other.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39634228&goto=item%3Fid%3D39628285%2339634228" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39631269"><td><table border="0"> <tbody><tr> <td class="ind" indent="3"><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks">
<center><a id="up_39631269" class="clicky" href="vote?id=39631269&how=up&auth=f739bdb0d706150136f90bed4e37a694ba55aadc&goto=item%3Fid%3D39628285#39631269"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=LudwigNagasena" class="hnuser">LudwigNagasena</a> <span class="age" title="2024-03-07T16:54:46"><a href="item?id=39631269">5 hours ago</a></span> <span id="unv_39631269"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">root</a> | <a href="#39630096" class="clicky" aria-hidden="true">parent</a> | <a href="#39630747" class="clicky" aria-hidden="true">prev</a> | <a href="#39633678" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39631269" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">And text forces you to be linear. It’s no coincidence that everything asynchronous is treated as a minefield of potential race conditions and ephemeral bugs.<p>“Real code” allows you to hide the mess behind imports (I think everyone had experience of dealing with accidentally circular imports at least once in their career) and abstractions. But once you put your code as a graph on a 2D plane, you realise what kind of horror you are dealing with. And sometimes even this trick doesn’t work: For example, it’s hard to abstract away the states and transitions of a finite state machine; so while they may look fine on a diagram, they often look like a mess of spaghetti as code.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39631269&goto=item%3Fid%3D39628285%2339631269" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39633678"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39633678" class="clicky" href="vote?id=39633678&how=up&auth=92509a1aac97e5cea8d6422e247eacc40eb9abae&goto=item%3Fid%3D39628285#39633678"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=hermitcrab" class="hnuser">hermitcrab</a> <span class="age" title="2024-03-07T19:40:59"><a href="item?id=39633678">2 hours ago</a></span> <span id="unv_39633678"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">root</a> | <a href="#39629217" class="clicky" aria-hidden="true">parent</a> | <a href="#39630096" class="clicky" aria-hidden="true">prev</a> | <a href="#39633825" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39633678" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Text vs visual programming is a topic that comes round regularly. I've tried to write summary of why both have their place here:<p><a href="https://successfulsoftware.net/2024/01/16/visual-vs-text-based-programming-which-is-better/" rel="nofollow">https://successfulsoftware.net/2024/01/16/visual-vs-text-bas...</a></p><p>It agrees with quite a few of the points you make above.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39633678&goto=item%3Fid%3D39628285%2339633678" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39633825"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39633825" class="clicky" href="vote?id=39633825&how=up&auth=be7d448c6b633357b68f3bc151c59ae829c6ce90&goto=item%3Fid%3D39628285#39633825"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=spauldo" class="hnuser">spauldo</a> <span class="age" title="2024-03-07T19:52:49"><a href="item?id=39633825">2 hours ago</a></span> <span id="unv_39633825"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">root</a> | <a href="#39629217" class="clicky" aria-hidden="true">parent</a> | <a href="#39633678" class="clicky" aria-hidden="true">prev</a> | <a href="#39628653" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39633825" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">There are also the three graphical PLC languages standardized by the IEC - Ladder, Function Block Diagram, and Sequenced Function Chart.<p>They're used everywhere - anywhere you see a shiny metal cabinet with conduit running in and out, there's a chance there's a PLC plugging away in there.</p><p>Ladder dates back to the 70s and I'm willing to bet is the most used graphical language in existence. It looks like the relay diagrams that electricians use.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39633825&goto=item%3Fid%3D39628285%2339633825" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39628653"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628653" class="clicky" href="vote?id=39628653&how=up&auth=76d32eaf7eb403334d4acb78d34eaf6b79588152&goto=item%3Fid%3D39628285#39628653"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=catapart" class="hnuser">catapart</a> <span class="age" title="2024-03-07T13:14:05"><a href="item?id=39628653">9 hours ago</a></span> <span id="unv_39628653"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39629217" class="clicky" aria-hidden="true">prev</a> | <a href="#39628865" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628653" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Hard agree. For me, it's the delegation of concerns that visual programming excels at.<p>I don't have to care how you're getting a random point in a sphere. Whatever algorithm you want to use works for me. And since you know which algorithms work better for which scenarios, you can put all of that delegation under the hood. All I have to know about is which node to use. And if something starts breaking, I know that it can't be my problem; it has to be a problem with the node's code and that domain professional can address it.</p><p>Of course, a good dev might say "That's just having a really good API", which is true! But once you have an API <i>so</i> good that you don't need to know <i>any</i> of its internals, you're essentially trying to write a graph using documents, which is kind of silly.
High-level servers are a great example (node servers, python servers, etc). There's not any utility in writing an expressJs server with text that isn't satisfied by writing it as a flow chart. Servers, at that level of abstraction, are so simple that all you really need to do is tell which keys go where, when. And that's most simply done by drawing boxes and arrows that all point to each other.</p><p>Put more starkly: there's no difference between writing Lib.Physics.GetPointInSphere(param1, param2, param3) and linking a GetPointInSphere node to params 1, 2, and 3. So I think that if you're in a domain that is already at that level of abstraction, visual programming is a fantastic way to go. And if you're not already at that level of abstraction, there's value in getting there (even though it's probably going to require fracturing/modularizing existing concepts).
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628653&goto=item%3Fid%3D39628285%2339628653" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39628865"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628865" class="clicky" href="vote?id=39628865&how=up&auth=2a80b976afd914dabf5a52ece3eacabddecd2f0d&goto=item%3Fid%3D39628285#39628865"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=javcasas" class="hnuser">javcasas</a> <span class="age" title="2024-03-07T13:36:16"><a href="item?id=39628865">8 hours ago</a></span> <span id="unv_39628865"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39628653" class="clicky" aria-hidden="true">prev</a> | <a href="#39629415" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628865" n="3" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I think lines of code in a text editor is a terrible way of describing state machines and flow diagrams.<p>And I think flow diagrams are a terrible way of describing many algorithms.</p><p>Flow diagrams look great for multi-processing pipelines and event suff.</p><p>I'm interested in this as an addition to current coding practices.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628865&goto=item%3Fid%3D39628285%2339628865" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39629145"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39629145" class="clicky" href="vote?id=39629145&how=up&auth=72c1b5e3b3ff1280eb4b7fc1ddbea68e16a58322&goto=item%3Fid%3D39628285#39629145"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T14:00:51"><a href="item?id=39629145">8 hours ago</a></span> <span id="unv_39629145"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">root</a> | <a href="#39628865" class="clicky" aria-hidden="true">parent</a> | <a href="#39629415" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629145" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">100%!
Cherry-picking what makes sense to "elevate" to the visual sphere and having it co-exist with traditional coding is the only way I believe visual programming can be truly useful.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39629145&goto=item%3Fid%3D39628285%2339629145" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39634305"><td><table border="0"> <tbody><tr> <td class="ind" indent="3"><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks">
<center><a id="up_39634305" class="clicky" href="vote?id=39634305&how=up&auth=a6410bab3a2f3cacf8659053efb5a26ba7cdcf42&goto=item%3Fid%3D39628285#39634305"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=IshKebab" class="hnuser">IshKebab</a> <span class="age" title="2024-03-07T20:38:11"><a href="item?id=39634305">1 hour ago</a></span> <span id="unv_39634305"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">root</a> | <a href="#39629145" class="clicky" aria-hidden="true">parent</a> | <a href="#39629415" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634305" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Yeah I completely agree. Simulink works quite well because it's modelling things that are naturally physical networks. DSP/Blender style node graphs also work quite well because you really want an interactive control on every node.<p>In contrast visual systems that try to recreate traditional programming (add, multiply, loops, etc.) seem to be mostly awful. LabVIEW is a complete disaster (probably not helped by its dire graphic design but even so). UE Blueprints are bad.</p><p>Scratch is not too bad, but only because it's basically building a normal text-based program with lego, rather than nodes and edges.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39634305&goto=item%3Fid%3D39628285%2339634305" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39629415"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39629415" class="clicky" href="vote?id=39629415&how=up&auth=8840291df124e26cc7c217deaf65de82ce6cf834&goto=item%3Fid%3D39628285#39629415"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=ivanjermakov" class="hnuser">ivanjermakov</a> <span class="age" title="2024-03-07T14:23:44"><a href="item?id=39629415">8 hours ago</a></span> <span id="unv_39629415"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39628865" class="clicky" aria-hidden="true">prev</a> | <a href="#39628672" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629415" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">While I agree that text might not be the best way to represent a program, text files have many convenient properties that make them hard to replace:<p>- Simplicity: every computer and most humans can interptet it without any issues</p><p>- Diffing: it's relatively easy to tell what changed in a text file between revisions</p><p>- Editing tools: text editors, formatters, etc. exist and many people know how to use them efficiently</p><p>Also, modern developer setups allow you to manipulate code as a syntax tree (see tree-sitter text-objects) and intellisense and snipping tools allow you to type much less.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629415&goto=item%3Fid%3D39628285%2339629415" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39634761"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39634761" class="clicky" href="vote?id=39634761&how=up&auth=67ae38b55d5eb43cda78b92dca710f73d3d4e9eb&goto=item%3Fid%3D39628285#39634761"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=andoando" class="hnuser">andoando</a> <span class="age" title="2024-03-07T21:25:55"><a href="item?id=39634761">58 minutes ago</a></span> <span id="unv_39634761"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">root</a> | <a href="#39629415" class="clicky" aria-hidden="true">parent</a> | <a href="#39628672" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634761" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">This seems more like a matter of having more tooling because 99.999% of programming has been text based.<p>If we spent the time building tools for visual coding it’s possible we’d be able to do way more.</p><p>Just thinking about diffing for example, it would be much easier to see which nodes have changes in the whole codebase by just highlighting them red. It’d be easier also to depict something like “the flow for this process changes from this to this”
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39634761&goto=item%3Fid%3D39628285%2339634761" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39628672"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628672" class="clicky" href="vote?id=39628672&how=up&auth=79980931f841131fce2b7dd85dc97783c460f1c0&goto=item%3Fid%3D39628285#39628672"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=papa0101" class="hnuser">papa0101</a> <span class="age" title="2024-03-07T13:15:52"><a href="item?id=39628672">9 hours ago</a></span> <span id="unv_39628672"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39629415" class="clicky" aria-hidden="true">prev</a> | <a href="#39633054" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628672" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I suppose it all depends on personality: some swe's prefer to write, some prefer to draw (I do both, but would hate to <i>only</i> have to deal a 1mil-lines-of-code fractal, but would be (and am) fine with the 1970 approach). The OP's solution then might be a great addition to my toolbox.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628672&goto=item%3Fid%3D39628285%2339628672" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39633054"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39633054" class="clicky" href="vote?id=39633054&how=up&auth=a5257536c97fce9c971ec6fa0e5cf05ee8a643f3&goto=item%3Fid%3D39628285#39633054"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=divan" class="hnuser">divan</a> <span class="age" title="2024-03-07T18:50:18"><a href="item?id=39633054">3 hours ago</a></span> <span id="unv_39633054"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39628672" class="clicky" aria-hidden="true">prev</a> | <a href="#39628934" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39633054" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I attempted to do this [1] and explored topic of why VPL are not a mainstream too, but postponed project for maturation of VR/AR ecosystem as I see them usable only in VR now. This year actually I think to return to work on it.<p>[1] Rethinking Visual Programming with Go - <a href="https://divan.dev/posts/visual_programming_go/" rel="nofollow">https://divan.dev/posts/visual_programming_go/</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39633054&goto=item%3Fid%3D39628285%2339633054" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39628934"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628934" class="clicky" href="vote?id=39628934&how=up&auth=cdd12fcf371da109eab2613ff3204c1858af5ce0&goto=item%3Fid%3D39628285#39628934"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=hakanderyal" class="hnuser">hakanderyal</a> <span class="age" title="2024-03-07T13:43:41"><a href="item?id=39628934">8 hours ago</a></span> <span id="unv_39628934"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39633054" class="clicky" aria-hidden="true">prev</a> | <a href="#39628838" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628934" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">That's the outcome I'm hoping to get from all these VR/AR tech people are working on. I believe we have the hardware to make this work and someone just needs to build the software.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628934&goto=item%3Fid%3D39628285%2339628934" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39628838"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628838" class="clicky" href="vote?id=39628838&how=up&auth=6e01fa0b5a707c43699cec6a5a806a42447c545d&goto=item%3Fid%3D39628285#39628838"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=conartist6" class="hnuser">conartist6</a> <span class="age" title="2024-03-07T13:33:11"><a href="item?id=39628838">8 hours ago</a></span> <span id="unv_39628838"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39628934" class="clicky" aria-hidden="true">prev</a> | <a href="#39628598" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628838" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Couldn't agree more, which is why I spent the last three years building the tech that gets us there -- a universal document object model for code! If you thought you'd be waiting 10 years for this tech, it's probably more like 2 now.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628838&goto=item%3Fid%3D39628285%2339628838" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39628598"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628598" class="clicky" href="vote?id=39628598&how=up&auth=65ffa687071f8ac567ef8c341c5d37295882c19a&goto=item%3Fid%3D39628285#39628598"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T13:07:35"><a href="item?id=39628598">9 hours ago</a></span> <span id="unv_39628598"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39628838" class="clicky" aria-hidden="true">prev</a> | <a href="#39631583" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628598" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Thanks! I agree, and while no one knows how development will look in 5-10 years from now, I find it hard to believe it'll be _just_ textual based, and I hope Flyde will help inspire that move.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628598&goto=item%3Fid%3D39628285%2339628598" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="noshow athing comtr" id="39631583"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39631583" class="clicky" href="vote?id=39631583&how=up&auth=8df4c7d7792d2533e08ad3a5b21b72e0a895bbc9&goto=item%3Fid%3D39628285#39631583"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=tistoon" class="hnuser">tistoon</a> <span class="age" title="2024-03-07T17:19:23"><a href="item?id=39631583">5 hours ago</a></span> <span id="unv_39631583"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">parent</a> | <a href="#39628598" class="clicky" aria-hidden="true">prev</a> | <a href="#39634353" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39631583" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I see it as comparing comic book (visual) vs text book (text code). You can express some visual better with comic books, but in the end, I find text books easier to define richer and complex matter.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39631583&goto=item%3Fid%3D39628285%2339631583" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634353"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39634353" class="clicky" href="vote?id=39634353&how=up&auth=b8ab7df42b1512549968f8a7c2746b5a88182b1f&goto=item%3Fid%3D39628285#39634353"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=d--b" class="hnuser">d--b</a> <span class="age" title="2024-03-07T20:41:10"><a href="item?id=39634353">1 hour ago</a></span> <span id="unv_39634353"></span> <span class="navs">
| <a href="#39628528" class="clicky" aria-hidden="true">prev</a> | <a href="#39634849" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634353" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I will tell you the same thing I tell everyone making visual graphs like this:<p>PLEASE PLEASE PLEASE PLEASE PLEASE make the nodes snap to a larger grid, and have the grid browsable with the keyboard.</p><p>I'd rather use Factorio as an interface than an interface where the nodes and edges just float around.</p><p>Excel is a DAG that is browsable with the keyboard (Ctrl+[ anyone?), and that's proven very usable.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39634353&goto=item%3Fid%3D39628285%2339634353" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634849"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39634849" class="clicky" href="vote?id=39634849&how=up&auth=4c646a3619de952177011bedceb112ab72670bef&goto=item%3Fid%3D39628285#39634849"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=spiralganglion" class="hnuser">spiralganglion</a> <span class="age" title="2024-03-07T21:36:21"><a href="item?id=39634849">47 minutes ago</a></span> <span id="unv_39634849"></span> <span class="navs">
| <a href="#39634353" class="clicky" aria-hidden="true">prev</a> | <a href="#39634318" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634849" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Nice! Have you explored showing live values flowing through the nodes? This seems like a good use of animation.<p>I'll also take a moment to plug my Visual Programming Codex[1], which collects VPLs as though they're butterflies. I'm adding Flyde to the backlog of projects to document, but I'd also suggest looking around there for ideas. There are a <i>ton</i> of valuable new things you can do once you start visualizing programming, especially if you're visualizing the execution behaviour. I'd love to see you push this further.</p><p>[1] <a href="https://github.com/ivanreese/visual-programming-codex">https://github.com/ivanreese/visual-programming-codex</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39634849&goto=item%3Fid%3D39628285%2339634849" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634318"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39634318" class="clicky" href="vote?id=39634318&how=up&auth=4aed0f3a421e5bbeebe6c0cedb1b8168b8642328&goto=item%3Fid%3D39628285#39634318"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=lominming" class="hnuser">lominming</a> <span class="age" title="2024-03-07T20:38:45"><a href="item?id=39634318">1 hour ago</a></span> <span id="unv_39634318"></span> <span class="navs">
| <a href="#39634849" class="clicky" aria-hidden="true">prev</a> | <a href="#39628514" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634318" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Great to see more people thinking about this space. Totally agree on the sentiment that we should be able to visualize/describe and build business logic in a very simple manner. The way I've been thinking about this is something like Legos where we can compose any logic, app, workflow we want visually and that anyone can build and share these blocks. This is almost similar to NPM packages, but for non-developers.<p>My attempt on this is <a href="https://openexus.com" rel="nofollow">https://openexus.com</a> where the goal is really to create some form of universal plug-and-play building blocks. Your approach is almost very low-level with direct translation to code. My attempt is slightly higher-level (but developers can create as low level as they want). More importantly, the visual diagram build on openexus is a reactive graph (almost like spreadsheet), not a sequential directional flow graph (like node-red, or yahoo pipes).</p><p>Would love to chat if you are up for it. m at lominming dot com.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39634318&goto=item%3Fid%3D39628285%2339634318" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39635184"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39635184" class="clicky" href="vote?id=39635184&how=up&auth=d0ba1b118c195a1ade8fc76fc3008814143f0c0a&goto=item%3Fid%3D39628285#39635184"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=westoncb" class="hnuser">westoncb</a> <span class="age" title="2024-03-07T22:11:41"><a href="item?id=39635184">12 minutes ago</a></span> <span id="unv_39635184"></span> <span class="navs">
| <a href="#39634318" class="clicky" aria-hidden="true">parent</a> | <a href="#39628514" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39635184" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">This looks super nice :) love it</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39635184&goto=item%3Fid%3D39628285%2339635184" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628514"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39628514" class="clicky" href="vote?id=39628514&how=up&auth=52fafcfe4e548a2c4c2efdc79b08ba35df35b487&goto=item%3Fid%3D39628285#39628514"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=catapart" class="hnuser">catapart</a> <span class="age" title="2024-03-07T12:57:22"><a href="item?id=39628514">9 hours ago</a></span> <span id="unv_39628514"></span> <span class="navs">
| <a href="#39634318" class="clicky" aria-hidden="true">prev</a> | <a href="#39629117" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628514" n="5" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">- This looks great! Very robust and I really like the focus on interoperability.<p>- As a general design, I prefer the integrated "function with parameters" node type found in systems like Unreal's "Blueprints" far better than having to manage the parameters and functions separately from each other. It's more cumbersome to develop, but no less flexible to use, and loads more simplified. A distinction for the code flow from the data referencing is helpful for me, at least.</p><p>- It doesn't fit my exact needs, because I need something that allows me to expose this functionality to users. Essentially, I need something that does what your playground does, as a library. The interoperability is perfect, though! Allowing users to set up flows and then being able to simply import them rather than having to translate them is a fantastic DX. I guess, at the end of the day, I would still like clean, nicely formatted Javascript (not typescript), so I imagine your library isn't really suited for that, either. But I definitely like the architecture of it!
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628514&goto=item%3Fid%3D39628285%2339628514" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628575"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628575" class="clicky" href="vote?id=39628575&how=up&auth=9c1eddf690546f138f584a6c1adb1d115bc76547&goto=item%3Fid%3D39628285#39628575"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T13:05:14"><a href="item?id=39628575">9 hours ago</a></span> <span id="unv_39628575"></span> <span class="navs">
| <a href="#39628514" class="clicky" aria-hidden="true">parent</a> | <a href="#39629117" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628575" n="4" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">- Thanks!
Re: "function with parameters" you mean so the configuration is exposed on the node itself? It's definitely something I want to consider as an UX improvement. At first, I was very puristic about having all configurations acceptable as dynamic inputs, to ensure Flyde is robust and flexible, but that led to things like the HTTP node having 5 different pins which made it even worse. Now it's a hybrid model - as an author of a node you can choose how to expose it, and many nodes in the Stdlib expose configuration in both ways
Interesting use-case! Flyde's last incarnation was an attempt to offer this to other SaaS products (before realizing it must start OS) to allow their users to do "Visual scripting" (like <a href="https://luna-park.app/" rel="nofollow">https://luna-park.app/</a>, a project I've stumbled upon)
You can check the source code of the playground and try embedding Flyde, should work!</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628575&goto=item%3Fid%3D39628285%2339628575" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628927"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39628927" class="clicky" href="vote?id=39628927&how=up&auth=664090f9647f170758f0606b91452b57eb2beefe&goto=item%3Fid%3D39628285#39628927"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=catapart" class="hnuser">catapart</a> <span class="age" title="2024-03-07T13:42:57"><a href="item?id=39628927">8 hours ago</a></span> <span id="unv_39628927"></span> <span class="navs">
| <a href="#39628514" class="clicky" aria-hidden="true">root</a> | <a href="#39628575" class="clicky" aria-hidden="true">parent</a> | <a href="#39629117" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628927" n="3" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Yeah, that's part of what I'm talking about, for sure. Being able to, say, click a little expand icon to see other pins that aren't usually necessary, is great for discoverability. I'm not a big fan of library maintainers deciding that I can only use certain inputs for an underlying function that I know has more functionality. Node authors should, of course, be able to guide, but I don't appreciate them having the ability to control.<p>More than that, though, it's about the difference between 'data references' and 'execution flow'. It's something that Unreal makes very, VERY obvious. Color coding data types, emphasizing execution flow lines, etc. I can't recommend using it as a guide, enough. Whatever problem I've come up with as 'complicated' for visual scripting, they've got an elegant solution for.</p><p>Even stuff like being able to 'break' nodes into other nodes, or pins into other pins. So a "Point" node might be useful for sending into a function expecting a Point data type, but you might also want to send just that Point's x or y value to something else. In that scenario, you might 'break' the exit pins into a Point reference, an x reference, and a y reference. It would be cumbersome and unruly to always have that available. But the UX to make it available is straightforward and satisfying.</p><p>And then, all of that aside, I just prefer the visual look of pins integrated into the nodes. The extra lines you get from drawing between the pin and the node is messy and since you can't move them independently, they don't really add anything. Just a lot of extra buffer to prevent a 'crowded' feeling. But at least that's not something unique to Unreal. I don't think I've ever seen a visual scripting system that used pins as separate elements. So maybe it's just saturation bias. But I do like what I like!</p><p>Anyway, I'll definitely mess around with it and see if it can help with its embedded version. To be completely honest, I think there's too much friction, overall. I would need something to render as plain javascript, rather than a JSON structure or minified JS (or typescript), so there's a translation there. And then to get it graphically how I want it would be complicated due to all the domain-knowledge required for integrating with your app's underlying library (looks like next js? Not sure, but it's not something I want to work with). Not to be too pessimistic or anything. Most libraries work toward providing a complete solution, not towards providing a composable, compsitable, modular set of utilities, which is what I need. I don't hold any contempt for providing what you've provided because it's a hell of a thing and perfect for a lot of use cases, I'm sure! I'm just very pragmatic about my own use-cases, and my development quirks (like not using libraries that obfuscate functionality [next, react, svelte, etc]).
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628927&goto=item%3Fid%3D39628285%2339628927" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634511"><td><table border="0"> <tbody><tr> <td class="ind" indent="3"><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks">
<center><a id="up_39634511" class="clicky" href="vote?id=39634511&how=up&auth=2150ed588d856036f75665dfafa92b28d2e2d214&goto=item%3Fid%3D39628285#39634511"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=o-o-" class="hnuser">o-o-</a> <span class="age" title="2024-03-07T20:59:25"><a href="item?id=39634511">1 hour ago</a></span> <span id="unv_39634511"></span> <span class="navs">
| <a href="#39628514" class="clicky" aria-hidden="true">root</a> | <a href="#39628927" class="clicky" aria-hidden="true">parent</a> | <a href="#39629117" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634511" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Insightful – commenting to keep a reference as I spent the last four years engineering around this very aspect.<p>I'm trying to wrap my head around the difference between execution models. On one hand we have real-time node systems like Unreal Blueprint, Modo or DaVinci Resolve, which depend heavily on state nodes, i.e. nodes whose sole purpose is to hold and serve information (a mesh, a transformation, an RGB matrix). These nodes act as complementary inputs to nodes in the main execution flow.</p><p>On the other hand we have Node Red and the likes, whose nodes rely on a single input. At first glance this approch might make sense from a UX perspective – simply connect your components and deploy. However with time I've come to see this as a major limitation to the extent that you're often better off writing code. After building a number of flows you start to notice certain patterns... Since nodes are uncapable of fetching data from other nodes ("state nodes" above), it's up to you as a developer to serve the node with the exact data structure it needs. The GUI gives you no hint as to the structure itself, so you're left reading the node's documentation: {payload, action, topic, subject} – different for every node.</p><p>At the core, this approach is the FBP version of polish notation in the sense that you first have to fetch all the operands before sending them to the operation. So what you're left with is a flow where every core node is surrounded by data shuffling nodes: "put this into 'action', put that into 'body', take 'payload' and store it away because the next node will overwrite it". As an effect of this "serial execution model", flows often stretch wide from the left to the right where two thirds of nodes are pure data transformations.</p><p>Somewhere around here the USP of FBP gets literally lost in the flow – the USP being to offload working memory. During building/debugging/revisiting flows, I often know right away what piece is broken. Nevertheless I spend a lot of time double-clicking on function, change, and switch nodes just to find that piece of code. The irony of it all is that I wanted to use FBP to _visualise_ logic. Instead the same paradigm hides it away.</p><p>So what you've accomplished is transforming code that goes from up to down into boxes that go left to right.</p><p>The thinking behind it all is that Node Red shouldn't make assumptions about the incoming data, however someone has to make those assumptions, and that someone is you, the developer.</p><p>It would be trivial to create a node that takes an arbitrary input (a sample message), analyses the message structure and exposes the appropriate output pins, however as long as Node Red persists with single input ports and the "message-based execution" it entails, it will take tolls on working memory and lag behind the Unreal model which I too consider state of the art.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39634511&goto=item%3Fid%3D39628285%2339634511" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39635217"><td><table border="0"> <tbody><tr> <td class="ind" indent="4"><img src="s.gif" height="1" width="160"></td><td valign="top" class="votelinks">
<center><a id="up_39635217" class="clicky" href="vote?id=39635217&how=up&auth=882fd974c20ec8063c95cec8593be9051fa70b99&goto=item%3Fid%3D39628285#39635217"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=catapart" class="hnuser">catapart</a> <span class="age" title="2024-03-07T22:15:15"><a href="item?id=39635217">9 minutes ago</a></span> <span id="unv_39635217"></span> <span class="navs">
| <a href="#39628514" class="clicky" aria-hidden="true">root</a> | <a href="#39634511" class="clicky" aria-hidden="true">parent</a> | <a href="#39629117" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39635217" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Yeah, this is a really tricky space to delve into because the people who are most familiar with it are working on mathematical models and have very strong opinions about the "kind" of graph you're making, or what you're actually doing with the underlying data. Which is all definitely important for a node library maker to know, but the whole purpose of the library is that an implementing dev shouldn't have to know any of that stuff. So you really have to dig through a lot of irrelevant stuff about graph theory and whatnot to get to any relevant programming knowledge on the topic.<p>What's galling to me is that nodes map 1-1 to function calls. I can't even think of a scenario where a program that can be written as functions and objects couldn't be represented as a node graph. I can certainly shudder at the horrific types of graphs most programs would make, but they can all be mapped out. And, on the flip side, every single program I've written in visual scripting could easily be written as functions and objects. So, with that in mind, it's frustrating to go looking for information about node graphs and getting a bunch of muck about why they're 'not good', and why they don't handle certain things well, and why they aren't suited for x or y, when - in my head - I'm literally just asking for a well-formed API, and I'm getting a bunch of pushback about how APIs aren't really a good way to program. -_-</p><p>But because it's so hard to get good comparative information on visual scripting, I've also wrestled with what makes for good abstractions vs what is too broad. And that's what I think the Node Red stuff is: just too broad. Abstracting away everything breaks the value of the abstraction. So it's always about finding a balance, which is why I appreciate Epic's maintenance of Blueprints. A good API abstracts concepts you don't need to understand behind concepts you already understand. "GetDistance()" is a great abstraction because I don't care about the vector math underneath. But "Login()" is a terrible abstraction because a library shouldn't have the intimate details of my login process (meaning that it should be abstracted into more modular parts that I can more easily inject my business logic/keys into). So a node, or a library of nodes, or a node library system - they're all only as good as their abstractions. And Node Red is just way too abstracted to be "good". And, of course, the irony there is that if it were only a little more flexible, it could even be abstracted, itself, into something more use-able! If you could write a node that DID accept two inputs, you could abstract away all of the setting and swapping and trading. But since even that node could only ever be kick started by a single node, you would have to come up with some kind of hacky scheme to make any kind of utility actually function. So it's the one type of abstraction that they don't allow (their node model) which I find to be fundamental to successful visual scripting languages.</p><p>Honestly, though, I think there are some fundamental designs that visual scripting languages just need to implement, but I have a very hard time describing those designs with rigor. I would naively say that they need nodes, edges, a variable deck, a node discovery utility, and a good variable property manager. But that's just because that's what I'm used to. I think once someone really serious sits down to formalize these things, we'll have a much richer environment. I just hope they do it soon!
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39635217&goto=item%3Fid%3D39628285%2339635217" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629117"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39629117" class="clicky" href="vote?id=39629117&how=up&auth=e4103a7c0136726a96ece7cb3d08efaba73d0993&goto=item%3Fid%3D39628285#39629117"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=couchand" class="hnuser">couchand</a> <span class="age" title="2024-03-07T13:58:17"><a href="item?id=39629117">8 hours ago</a></span> <span id="unv_39629117"></span> <span class="navs">
| <a href="#39628514" class="clicky" aria-hidden="true">prev</a> | <a href="#39634948" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629117" n="3" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Congrats on the show HN! It looks like you've put a lot of thought and effort into this, and reasearched a number of alternatives.<p>I'm curious to know more of what you found lacking in the various visual programming languages? You mention a few general things but (other than the integration angle) I'm having a hard time understanding exactly what limits you hit with the other options that caused you to build your own.</p><p>And to add some context to the above questions, is this primarily your own research or do you anticipate it being used for production systems?
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629117&goto=item%3Fid%3D39628285%2339629117" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629375"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39629375" class="clicky" href="vote?id=39629375&how=up&auth=39730085e9ddb6fa9ba6c9fb53659a7690559f75&goto=item%3Fid%3D39628285#39629375"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T14:20:35"><a href="item?id=39629375">8 hours ago</a></span> <span id="unv_39629375"></span> <span class="navs">
| <a href="#39629117" class="clicky" aria-hidden="true">parent</a> | <a href="#39634948" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629375" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Thank you! Flyde's first incarnation was more of a "Visual serverless" platform, something like Zapier, but where you could "see the JSON" and change any piece you want. So the alternatives at that time were NodeRED, n8n and NoFlo.js.
I think NodeRED and n8n are both successful products with their own niche, but I was looking for something more flexible. At the time, I was trying to build something very robust, flexible, and generic, that could also be used to build UIs with (see this cumbersome, but working example <a href="https://play.flyde.dev/apps/974a3913-1b3b-4a0a-9ca7-4e2a69d0fddb" rel="nofollow">https://play.flyde.dev/apps/974a3913-1b3b-4a0a-9ca7-4e2a69d0...</a> ) a lower-level visual language that will match the functional-reactive paradigm I was used to code with, and not something too structured. I wanted it to be able to do most things I can do with code, and cater to application-layer developers.<p>NoFlo.js was the closest to allowing this, but I think that it was too early for the game, and NoFlo took a non-integrative approach. Vladimir Sibirov wrote vastly about that and why he thinks it failed in this great blog post - <a href="https://blog.kodigy.com/post/state-of-flow-based-programming/" rel="nofollow">https://blog.kodigy.com/post/state-of-flow-based-programming...</a> I was happy to see Flyde addressed this</p><p>Other purely FBP implementations did not put enough emphasis on the visual aspect, which for me was crucial to nail on a holistic level.</p><p>And for your last question - my goal is for it to be used in production systems, yes. I plan to release a Flyde-based visual API builder soon - <a href="https://www.trigg.dev" rel="nofollow">https://www.trigg.dev</a> as a more specific use-case, and hope that the fact you can download the Flyde flows and run them wherever you want will help potential users overcome the fear of using a low-code tool.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629375&goto=item%3Fid%3D39628285%2339629375" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634669"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39634669" class="clicky" href="vote?id=39634669&how=up&auth=cd7a368afd583e214e60088df0850bc58cd3481b&goto=item%3Fid%3D39628285#39634669"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=ilaksh" class="hnuser">ilaksh</a> <span class="age" title="2024-03-07T21:15:38"><a href="item?id=39634669">1 hour ago</a></span> <span id="unv_39634669"></span> <span class="navs">
| <a href="#39629117" class="clicky" aria-hidden="true">root</a> | <a href="#39629375" class="clicky" aria-hidden="true">parent</a> | <a href="#39634948" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634669" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I mean, NodeRED can be used to build front ends with Dashboard 2.0 or UI-buikder or custom nodes.<p>Is your project really better than NodeRED? I mean it does have over 4000 community contributed nodes.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39634669&goto=item%3Fid%3D39628285%2339634669" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634948"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39634948" class="clicky" href="vote?id=39634948&how=up&auth=fa9d65f8d03905249f0611a0ec08eb1053694e2f&goto=item%3Fid%3D39628285#39634948"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=andoando" class="hnuser">andoando</a> <span class="age" title="2024-03-07T21:47:38"><a href="item?id=39634948">36 minutes ago</a></span> <span id="unv_39634948"></span> <span class="navs">
| <a href="#39629117" class="clicky" aria-hidden="true">prev</a> | <a href="#39634177" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634948" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I love this OP. I have so many ideas around this and have spent years thinking about doing something similar (albeit very different).</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39634948&goto=item%3Fid%3D39628285%2339634948" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634177"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39634177" class="clicky" href="vote?id=39634177&how=up&auth=45e08f32bc4b2ee225316af3a36ef63d240f0e72&goto=item%3Fid%3D39628285#39634177"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=mdaniel" class="hnuser">mdaniel</a> <span class="age" title="2024-03-07T20:25:16"><a href="item?id=39634177">1 hour ago</a></span> <span id="unv_39634177"></span> <span class="navs">
| <a href="#39634948" class="clicky" aria-hidden="true">prev</a> | <a href="#39628784" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634177" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">FWIW your VSCode Repository link <<a href="https://marketplace.visualstudio.com/items?itemName=flyde.flyde-vscode#~#:text=Repository" rel="nofollow">https://marketplace.visualstudio.com/items?itemName=flyde.fl...</a>> is 404, it should be <a href="https://github.com/flydelabs/flyde-vscode">https://github.com/flydelabs/flyde-vscode</a> but is <a href="https://github.com/flydehq/flyde-vscode">https://github.com/flydehq/flyde-vscode</a></span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39634177&goto=item%3Fid%3D39628285%2339634177" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628784"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39628784" class="clicky" href="vote?id=39628784&how=up&auth=eddb803973a3f73c4acdb177112235ab2a358e0a&goto=item%3Fid%3D39628285#39628784"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=snadal" class="hnuser">snadal</a> <span class="age" title="2024-03-07T13:27:43"><a href="item?id=39628784">8 hours ago</a></span> <span id="unv_39628784"></span> <span class="navs">
| <a href="#39634177" class="clicky" aria-hidden="true">prev</a> | <a href="#39633614" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628784" n="3" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Nice work, congrats!<p>I do love visual programming and I use n8n a lot for my side projects. I really like its "delayed debug" features, so that I can analyse each step of the flow weeks later than it happened (i.e, I can see why a webhook failed long ago and even replay it step by step).</p><p>One missing feature that I've been working on is a "export workflow to code" feature. This way, once you are finished working on a workflow, you could run it everywhere without the need of installing the full IDE.</p><p>Again, nice work!
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628784&goto=item%3Fid%3D39628285%2339628784" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628824"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628824" class="clicky" href="vote?id=39628824&how=up&auth=5f782dc367139b2f7bd77060c18500724827fdfb&goto=item%3Fid%3D39628285#39628824"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T13:31:37"><a href="item?id=39628824">8 hours ago</a></span> <span id="unv_39628824"></span> <span class="navs">
| <a href="#39628784" class="clicky" aria-hidden="true">parent</a> | <a href="#39633614" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628824" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Thanks!
Flyde is "just" a library behind the scenes, so you grab your .flyde file, and can run it with an npm package. For example:<p>``` import { loadFlow } from "@flyde/runtime";</p><p>const execute = await loadFlow("./celsius-to-fahrenheit.flyde");</p><p>const inputs = { celsius: 0 }; // "celcius" is a main input in the flow, therefore it must be provided when executing the flow const { result } = execute(inputs); // execute returns a "result" promise, along with a cleanup function that can be used to cancel the execution.</p><p>const { fahrenheit } = await result; // each output in the flow is a property on the result object</p><p>console.log(fahrenheit)
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628824&goto=item%3Fid%3D39628285%2339628824" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39630089"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39630089" class="clicky" href="vote?id=39630089&how=up&auth=7a9ac89a30fa1f9959e2dcc8a8b949e2dd3ad3d8&goto=item%3Fid%3D39628285#39630089"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=snadal" class="hnuser">snadal</a> <span class="age" title="2024-03-07T15:15:58"><a href="item?id=39630089">7 hours ago</a></span> <span id="unv_39630089"></span> <span class="navs">
| <a href="#39628784" class="clicky" aria-hidden="true">root</a> | <a href="#39628824" class="clicky" aria-hidden="true">parent</a> | <a href="#39633614" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39630089" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Nice! I definitely will try it :)</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39630089&goto=item%3Fid%3D39628285%2339630089" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39633614"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39633614" class="clicky" href="vote?id=39633614&how=up&auth=e21afa39eb948bcc1ed04486d87e9e0561d10fa8&goto=item%3Fid%3D39628285#39633614"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=pie_flavor" class="hnuser">pie_flavor</a> <span class="age" title="2024-03-07T19:35:55"><a href="item?id=39633614">2 hours ago</a></span> <span id="unv_39633614"></span> <span class="navs">
| <a href="#39628784" class="clicky" aria-hidden="true">prev</a> | <a href="#39628659" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39633614" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">There's a project I keep wanting to start that involves a visual programming language and the JVM. Java supporting JS natively through Nashorn, is Flyde capable of doing this? Others I looked at like Node-RED seemed to have Node.js as a hard requirement, but Flyde supporting the browser environment makes me wonder if it can support this too.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39633614&goto=item%3Fid%3D39628285%2339633614" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628659"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39628659" class="clicky" href="vote?id=39628659&how=up&auth=5f3aeaf0a9f4ec183775e8087db7553afad08ba8&goto=item%3Fid%3D39628285#39628659"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=blowski" class="hnuser">blowski</a> <span class="age" title="2024-03-07T13:14:34"><a href="item?id=39628659">9 hours ago</a></span> <span id="unv_39628659"></span> <span class="navs">
| <a href="#39633614" class="clicky" aria-hidden="true">prev</a> | <a href="#39633151" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628659" n="7" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I like this, it’s lower-level than Scratch, with a focus on doing stuff more than making funny noises and animation.<p>I want to have a play with seeing how you can demonstrate composition. Do you suggest any good templates for this?
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628659&goto=item%3Fid%3D39628285%2339628659" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628712"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628712" class="clicky" href="vote?id=39628712&how=up&auth=2fc87ee4eaf60a5e435e477e263ce09f845f54b5&goto=item%3Fid%3D39628285#39628712"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T13:20:13"><a href="item?id=39628712">9 hours ago</a></span> <span id="unv_39628712"></span> <span class="navs">
| <a href="#39628659" class="clicky" aria-hidden="true">parent</a> | <a href="#39633151" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628712" n="6" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Thanks, exactly what I aimed for (:
Regarding composition, anything you had in mind? I can draft a playground (<a href="https://play.flyde.dev/" rel="nofollow">https://play.flyde.dev/</a>) example for you</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628712&goto=item%3Fid%3D39628285%2339628712" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629322"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39629322" class="clicky" href="vote?id=39629322&how=up&auth=ebe79567d5dd056877c50c06fa78748809e35779&goto=item%3Fid%3D39628285#39629322"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=blowski" class="hnuser">blowski</a> <span class="age" title="2024-03-07T14:16:15"><a href="item?id=39629322">8 hours ago</a></span> <span id="unv_39629322"></span> <span class="navs">
| <a href="#39628659" class="clicky" aria-hidden="true">root</a> | <a href="#39628712" class="clicky" aria-hidden="true">parent</a> | <a href="#39629079" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629322" n="3" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I teach a code club to 8-10 year olds. They understand functions, and that the main script can call functions, and that functions can call other functions. Conceptually, they struggle with a function being assigned to a variable, passed in as an argument, or being returned from a function.<p>So far, demonstrating to them what's going on here and why this is useful has eluded me.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629322&goto=item%3Fid%3D39628285%2339629322" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39632665"><td><table border="0"> <tbody><tr> <td class="ind" indent="3"><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks">
<center><a id="up_39632665" class="clicky" href="vote?id=39632665&how=up&auth=159b8a1688ae32e93f1711451d6957c9311b4959&goto=item%3Fid%3D39628285#39632665"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=brabel" class="hnuser">brabel</a> <span class="age" title="2024-03-07T18:24:54"><a href="item?id=39632665">3 hours ago</a></span> <span id="unv_39632665"></span> <span class="navs">
| <a href="#39628659" class="clicky" aria-hidden="true">root</a> | <a href="#39629322" class="clicky" aria-hidden="true">parent</a> | <a href="#39631919" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39632665" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">> they struggle with a function being assigned to a variable, passed in as an argument, or being returned from a function.<p>I've seen professional programmers struggle with that.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39632665&goto=item%3Fid%3D39628285%2339632665" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39631919"><td><table border="0"> <tbody><tr> <td class="ind" indent="3"><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks">
<center><a id="up_39631919" class="clicky" href="vote?id=39631919&how=up&auth=43d317e915c3fffb8ac641d7b32d0b47a12f0739&goto=item%3Fid%3D39628285#39631919"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T17:38:57"><a href="item?id=39631919">4 hours ago</a></span> <span id="unv_39631919"></span> <span class="navs">
| <a href="#39628659" class="clicky" aria-hidden="true">root</a> | <a href="#39629322" class="clicky" aria-hidden="true">parent</a> | <a href="#39632665" class="clicky" aria-hidden="true">prev</a> | <a href="#39629079" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39631919" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Author here. It's a valid point, I think once they start entering into Discord and want to build a Discord bot, Flyde might come in handy as an educational tool.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39631919&goto=item%3Fid%3D39628285%2339631919" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629079"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39629079" class="clicky" href="vote?id=39629079&how=up&auth=3b285e9b39cae92aa9a36004de33b03ab9b053ac&goto=item%3Fid%3D39628285#39629079"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=dugmartin" class="hnuser">dugmartin</a> <span class="age" title="2024-03-07T13:55:35"><a href="item?id=39629079">8 hours ago</a></span> <span id="unv_39629079"></span> <span class="navs">
| <a href="#39628659" class="clicky" aria-hidden="true">root</a> | <a href="#39628712" class="clicky" aria-hidden="true">parent</a> | <a href="#39629322" class="clicky" aria-hidden="true">prev</a> | <a href="#39633151" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629079" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">btw, your playground homepage has a date/time error. I see this in the DOM:<p>Modified <span data-tooltip-id="main-tooltip" data-tooltip-content="3/7/2024, 12:21:48 PM">-12537 seconds</span> ago</div></p><p>You may want to use a timestamp instead of comparing local time.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629079&goto=item%3Fid%3D39628285%2339629079" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39631956"><td><table border="0"> <tbody><tr> <td class="ind" indent="3"><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks">
<center><a id="up_39631956" class="clicky" href="vote?id=39631956&how=up&auth=ae1549a99e5d870227bc7059288b2250a98310b5&goto=item%3Fid%3D39628285#39631956"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T17:40:27"><a href="item?id=39631956">4 hours ago</a></span> <span id="unv_39631956"></span> <span class="navs">
| <a href="#39628659" class="clicky" aria-hidden="true">root</a> | <a href="#39629079" class="clicky" aria-hidden="true">parent</a> | <a href="#39633151" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39631956" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Thanks for reporting! Will check and fix this.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39631956&goto=item%3Fid%3D39628285%2339631956" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39633151"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39633151" class="clicky" href="vote?id=39633151&how=up&auth=f4ddbf08d5c77f10625a19d2bd271337de963986&goto=item%3Fid%3D39628285#39633151"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=s_gourichon" class="hnuser">s_gourichon</a> <span class="age" title="2024-03-07T18:57:23"><a href="item?id=39633151">3 hours ago</a></span> <span id="unv_39633151"></span> <span class="navs">
| <a href="#39628659" class="clicky" aria-hidden="true">prev</a> | <a href="#39628985" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39633151" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">> visual programming<p>25 years ago when I read that Microsoft has a software development environment named "Visual Studio" I imagined, well, something with graphs and nodes and flow and... Well something visual, right? Now it's 2024 and VS is still not visual.</p><p>Of course things are not as simple. Flyde (along with many alternatives mentioned) is visual IMHO. Keep up the good work!
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39633151&goto=item%3Fid%3D39628285%2339633151" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628985"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39628985" class="clicky" href="vote?id=39628985&how=up&auth=c41dc7e47e29719612bde9b6c6cb05a90ccd6023&goto=item%3Fid%3D39628285#39628985"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=epgui" class="hnuser">epgui</a> <span class="age" title="2024-03-07T13:48:30"><a href="item?id=39628985">8 hours ago</a></span> <span id="unv_39628985"></span> <span class="navs">
| <a href="#39633151" class="clicky" aria-hidden="true">prev</a> | <a href="#39633031" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628985" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">What I love about this sort of tool is that it appears to pair so perfectly with functional programming. Are all expressions constructed in this language referentially transparent?</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628985&goto=item%3Fid%3D39628285%2339628985" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629421"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39629421" class="clicky" href="vote?id=39629421&how=up&auth=5ae28637b6709b10975bf5e20a4762451653fbc8&goto=item%3Fid%3D39628285#39629421"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T14:24:27"><a href="item?id=39629421">7 hours ago</a></span> <span id="unv_39629421"></span> <span class="navs">
| <a href="#39628985" class="clicky" aria-hidden="true">parent</a> | <a href="#39633031" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629421" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Yes! As a big fan of functional-reactive programming, it was important to me that Flyde builds on that foundation, and doesn't fall into more imperative paradigms.<p>With that being said, Flyde does offer an easy way for node authors to set local and global state, but in a functional way - you can pass your own map as the global state, and do whatever you want with it. It's not properly documented yet, but here's the code - <a href="https://github.com/flydelabs/flyde/blob/main/core/src/execute/index.ts#L77">https://github.com/flydelabs/flyde/blob/main/core/src/execut...</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629421&goto=item%3Fid%3D39628285%2339629421" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39633031"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39633031" class="clicky" href="vote?id=39633031&how=up&auth=f3d94990e4e5fd6ae5dac1e33c6e0d9a5a6a5031&goto=item%3Fid%3D39628285#39633031"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=spankalee" class="hnuser">spankalee</a> <span class="age" title="2024-03-07T18:48:27"><a href="item?id=39633031">3 hours ago</a></span> <span id="unv_39633031"></span> <span class="navs">
| <a href="#39628985" class="clicky" aria-hidden="true">prev</a> | <a href="#39629467" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39633031" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">This looks very cool!<p>I have just a couple of wishes on top of this:</p><p>- I wish the file format were JSON-based instead of YAML-based. Then you could import .flyde files with standard `{type: 'json'}` import attributes and not need fetch or a webpack loader.</p><p>- I wish the editor were distributed as web components so taht they could be easily embedded into any framework.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39633031&goto=item%3Fid%3D39628285%2339633031" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629467"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39629467" class="clicky" href="vote?id=39629467&how=up&auth=bb51ced25ebae64f4bb6af3008008d6544d243ac&goto=item%3Fid%3D39628285#39629467"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=daltont" class="hnuser">daltont</a> <span class="age" title="2024-03-07T14:29:00"><a href="item?id=39629467">7 hours ago</a></span> <span id="unv_39629467"></span> <span class="navs">
| <a href="#39633031" class="clicky" aria-hidden="true">prev</a> | <a href="#39629420" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629467" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I was just thinking about something where I could design web based workflows that could use online services to perform transformations on items dragged into a dropped and perhaps the output would be downloadable.<p>Maybe this exists elsewhere, but is is free?. It is still a thought and I haven't dig deep to see what exists, but Flyde seems kind of close.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629467&goto=item%3Fid%3D39628285%2339629467" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39633021"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39633021" class="clicky" href="vote?id=39633021&how=up&auth=a417a65d28a6d5c416b2c3518030bdfd97d04376&goto=item%3Fid%3D39628285#39633021"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T18:47:51"><a href="item?id=39633021">3 hours ago</a></span> <span id="unv_39633021"></span> <span class="navs">
| <a href="#39629467" class="clicky" aria-hidden="true">parent</a> | <a href="#39629420" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39633021" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Hey, author here.
Did you try tools like Make or Pipedream for this use-case? Curious about what was missing for you in them.<p>With Flyde you can do that, and one of the monetization strategies I have planned for Flyde is Trigg - <a href="https://www.trigg.dev" rel="nofollow">https://www.trigg.dev</a>, a "visual serverless" platform based on Flyde, that can run the work flows for you and expose them as APIs. And for "ejection" purposes, one could always download the flow and use the lower-level Flyde to run it self-hosted.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39633021&goto=item%3Fid%3D39628285%2339633021" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629420"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39629420" class="clicky" href="vote?id=39629420&how=up&auth=101948bf8ea70463dc96ecbe588070939269feb7&goto=item%3Fid%3D39628285#39629420"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=rajatrocks" class="hnuser">rajatrocks</a> <span class="age" title="2024-03-07T14:24:18"><a href="item?id=39629420">7 hours ago</a></span> <span id="unv_39629420"></span> <span class="navs">
| <a href="#39629467" class="clicky" aria-hidden="true">prev</a> | <a href="#39629403" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629420" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Very cool, thanks for sharing!<p>I first tried out something like this in the early 1990s at VPL Research - one of the originators of the VR industry. They had a visual programming language called Body Electric for controlling how things behaved in VR. Some details here: <a href="https://news.ycombinator.com/item?id=22788773">https://news.ycombinator.com/item?id=22788773</a></p><p>And more recently, Google showed PromptChainer for wiring together LLM calls and Javascript: <a href="https://www.cs.cmu.edu/~sherryw/assets/pubs/2022-promptchainer_poster.pdf" rel="nofollow">https://www.cs.cmu.edu/~sherryw/assets/pubs/2022-promptchain...</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629420&goto=item%3Fid%3D39628285%2339629420" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629403"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39629403" class="clicky" href="vote?id=39629403&how=up&auth=34bf37201298ef32da16bd25eafd0da086ae037e&goto=item%3Fid%3D39628285#39629403"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=cjbprime" class="hnuser">cjbprime</a> <span class="age" title="2024-03-07T14:22:49"><a href="item?id=39629403">8 hours ago</a></span> <span id="unv_39629403"></span> <span class="navs">
| <a href="#39629420" class="clicky" aria-hidden="true">prev</a> | <a href="#39628939" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629403" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Nice! <a href="https://github.com/enso-org/enso">https://github.com/enso-org/enso</a> is related as a modern visual lang.<p>Is Flyde entirely focused on TypeScript? Python would be a logical fit too.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629403&goto=item%3Fid%3D39628285%2339629403" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39632423"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39632423" class="clicky" href="vote?id=39632423&how=up&auth=20c040e7ac0e9de72e317b61aa55cb7019d06bf5&goto=item%3Fid%3D39628285#39632423"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T18:10:56"><a href="item?id=39632423">4 hours ago</a></span> <span id="unv_39632423"></span> <span class="navs">
| <a href="#39629403" class="clicky" aria-hidden="true">parent</a> | <a href="#39628939" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39632423" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Enso is super cool, been following their work since the time they were called luna :)
Flyde is TS to start with, but Python is the next candidate in language support. Eventually, the plan is to rewrite the core/runtime layer of Flyde to a more performant language (Rust/Go) and enable interoperability, so you could potentially even mix and match node implementations. One node could be built with Python, the other with JS, and the flow itself will be agnostic to it.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39632423&goto=item%3Fid%3D39628285%2339632423" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628939"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39628939" class="clicky" href="vote?id=39628939&how=up&auth=9bebb114af98ece4d22fc30618945646e2478ee1&goto=item%3Fid%3D39628285#39628939"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=mellutussa" class="hnuser"><font color="#3c963c">mellutussa</font></a> <span class="age" title="2024-03-07T13:44:22"><a href="item?id=39628939">8 hours ago</a></span> <span id="unv_39628939"></span> <span class="navs">
| <a href="#39629403" class="clicky" aria-hidden="true">prev</a> | <a href="#39630593" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628939" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Wow, impressive! I also have to congratulate you on the landing page. So often I click on something that I think is interesting only to scroll down in confusion before I close the tab.<p>I'm definitely going to check this out.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628939&goto=item%3Fid%3D39628285%2339628939" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39632232"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39632232" class="clicky" href="vote?id=39632232&how=up&auth=2e68f7a047bace440c5bc9c4531e748b9d89b0d7&goto=item%3Fid%3D39628285#39632232"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T17:57:21"><a href="item?id=39632232">4 hours ago</a></span> <span id="unv_39632232"></span> <span class="navs">
| <a href="#39628939" class="clicky" aria-hidden="true">parent</a> | <a href="#39630593" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39632232" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Thanks! this means a lot, as I've been through many iterations with this one. Each affected some other revelation in my journey with Flyde.<p>PS: Here's an older one - <a href="https://web.archive.org/web/20230313081811/https://www.flyde.dev/" rel="nofollow">https://web.archive.org/web/20230313081811/https://www.flyde...</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39632232&goto=item%3Fid%3D39628285%2339632232" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39630593"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39630593" class="clicky" href="vote?id=39630593&how=up&auth=5b7f9b115a74b4f8a1f5339a85e241519f9a09f1&goto=item%3Fid%3D39628285#39630593"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=mynjin" class="hnuser">mynjin</a> <span class="age" title="2024-03-07T15:57:29"><a href="item?id=39630593">6 hours ago</a></span> <span id="unv_39630593"></span> <span class="navs">
| <a href="#39628939" class="clicky" aria-hidden="true">prev</a> | <a href="#39630026" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39630593" n="4" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Eh, I guess slapping some literal, variable, and operation nodes together makes it visual, but I don't think it makes it easier.<p>Contrast with something like Scratch which is useful because it helps prevent typos, clearly presents expected arguments, and creates snap connected chains of logic.</p><p>Even better, contrast something like Drakon which offers visual abstractions such as skewers, happy paths, silhuettes, common fate, etc.</p><p>I really like the concept of visual abstractions. Nodes are abstractions but I don't think they are high enough level to improve over text. And I think text will always be awesome even if it is assisted by better ways to animate and visualize logic and systems.</p><p>Also, can I grep over Flyde? I'd hate to lose that basic ability.</p><p>Drakon: <a href="https://drakonhub.com/en/drakon" rel="nofollow">https://drakonhub.com/en/drakon</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39630593&goto=item%3Fid%3D39628285%2339630593" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634784"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39634784" class="clicky" href="vote?id=39634784&how=up&auth=40330cbfe0f9a87e4f1e7c9796e05614efd6860b&goto=item%3Fid%3D39628285#39634784"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=o-o-" class="hnuser">o-o-</a> <span class="age" title="2024-03-07T21:27:46"><a href="item?id=39634784">56 minutes ago</a></span> <span id="unv_39634784"></span> <span class="navs">
| <a href="#39630593" class="clicky" aria-hidden="true">parent</a> | <a href="#39632388" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634784" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Interesting take on "visual abstraction" vs "visual representation" (if I may add the wording), where Drakon represents the former and Flyde the latter.<p>I'm uncertain to what extent visual _representations_ of real code has anything to offer developers as a target group. I think it's the strive to have FBP represent already human-friendly code that gets in our way of thinking.</p><p>At the end of the day I want to define and execute logic without having to approach parallelism and asynchronicity as programming concepts. Instead the paradigm should transform such challenges into spatial ones. Instead the paradigm should transform such challenges into spatial ones. (Yes I wrote that twice for effect.)</p><p>I have yet to see such a system, but Drakon comes close.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39634784&goto=item%3Fid%3D39628285%2339634784" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39632388"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39632388" class="clicky" href="vote?id=39632388&how=up&auth=904362e81f61acc9aadd1818154fc8584f00c921&goto=item%3Fid%3D39628285#39632388"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T18:08:31"><a href="item?id=39632388">4 hours ago</a></span> <span id="unv_39632388"></span> <span class="navs">
| <a href="#39630593" class="clicky" aria-hidden="true">parent</a> | <a href="#39634784" class="clicky" aria-hidden="true">prev</a> | <a href="#39630026" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39632388" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">This is something I ponder about a lot.<p>For those proficient in writing textual programs, a tool such as Flyde as-is might provide value by enforcing modules to be stand-alone and well-defined; the premise of <a href="https://en.wikipedia.org/wiki/Flow-based_programming" rel="nofollow">https://en.wikipedia.org/wiki/Flow-based_programming</a> as a paradigm that promised value even without using a visual editor, and just by adhering to the concept.</p><p>But for those who lack the understanding of coding syntax and grammar, a visual tool, even in a not-much-higher level of attraction, could make all the difference. I've personally mentored dozens of entry-level developers many struggled with concurrency and asynchronicity. (callbacks, promises, etc). these are concepts that become a no-brainer using a nodes-and-wires editor.</p><p>Regarding prepping - fair point. I'm sure it's not what you meant, but here's a grep in a Flyde flow (the second example) - <a href="https://imgur.com/a/V9u1ETl" rel="nofollow">https://imgur.com/a/V9u1ETl</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39632388&goto=item%3Fid%3D39628285%2339632388" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634819"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39634819" class="clicky" href="vote?id=39634819&how=up&auth=3d7d28ca9fa43051d18913165d2574a80a03a137&goto=item%3Fid%3D39628285#39634819"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=mynjin" class="hnuser">mynjin</a> <span class="age" title="2024-03-07T21:31:45"><a href="item?id=39634819">52 minutes ago</a></span> <span id="unv_39634819"></span> <span class="navs">
| <a href="#39630593" class="clicky" aria-hidden="true">root</a> | <a href="#39632388" class="clicky" aria-hidden="true">parent</a> | <a href="#39630026" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634819" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Thank you for your reply. I'm usually skeptical of visual paradigms but I'm not trying to be critical.<p>Looking at flow-based programming, it looks like it could help in visualizing and understanding asynchronous systems that wouldn't be so intuitive from a code listing. In that way, I suppose it would force a functional style as well. So maybe good for gluing those parts of one's apps together.</p><p>I did look at the code examples; attributes and code wrapped in json. Obviously greppable, but then if one expected a learner to grep, version diff, author tests?, linting?, etc. they still must dip into and learn regular dev tools.
I don't know if Flyde is supposed to eventually subsume that other functionality or if it is a higher scripting layer used in conjunction, and so must eventually be learned anyway.</p><p>Or is Flyde just trying to introduce an easier coding path in order to bypass the more superfluous parts of software dev such as tabs vs spaces, editor choice, oop vs functional vs procedural vs whatever.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39634819&goto=item%3Fid%3D39628285%2339634819" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39630026"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39630026" class="clicky" href="vote?id=39630026&how=up&auth=19dc74d363bb533491349b9b6567765c443991e1&goto=item%3Fid%3D39628285#39630026"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=smusamashah" class="hnuser">smusamashah</a> <span class="age" title="2024-03-07T15:11:05"><a href="item?id=39630026">7 hours ago</a></span> <span id="unv_39630026"></span> <span class="navs">
| <a href="#39630593" class="clicky" aria-hidden="true">prev</a> | <a href="#39630641" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39630026" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">This looks great. I have played with litegraph.js before for fun (image generation via api). Creating custom nodes in that one was tiring.<p>- Can we make custom nodes in this (e.g. a node which to display images)?</p><p>- Can it be used like a client side js library (like litegraph)? or does it have to be used in IDE and its more like an IDE enhancement?</p><p>Looking back at the page and examples again, is it not the usecase this is for?
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39630026&goto=item%3Fid%3D39628285%2339630026" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39632177"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39632177" class="clicky" href="vote?id=39632177&how=up&auth=d85e5acb9a355cd17597ddf2320390dddd8080b9&goto=item%3Fid%3D39628285#39632177"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T17:53:58"><a href="item?id=39632177">4 hours ago</a></span> <span id="unv_39632177"></span> <span class="navs">
| <a href="#39630026" class="clicky" aria-hidden="true">parent</a> | <a href="#39630641" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39632177" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Thank you!
1. Nodes with custom logic, structure (inputs/outputs etc) and custom configuration editing are definitely possible.
But I assume you mean custom nodes as in nodes that render the data passing through them, like in litegraph.js, right?<p>If so, it's not possible, as IMO it's less of a value for "production" use-cases/application level layer. But if the community's interest will slide in that direction, I will consider going that route.</p><p>2. It can be used as a library, either Node.js (via an npm package) or the browser (using a custom webpack loader)
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39632177&goto=item%3Fid%3D39628285%2339632177" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39630641"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39630641" class="clicky" href="vote?id=39630641&how=up&auth=9750f9f9160a58b9f2e2f52b51988004fb377bfe&goto=item%3Fid%3D39628285#39630641"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=luke-stanley" class="hnuser">luke-stanley</a> <span class="age" title="2024-03-07T16:00:29"><a href="item?id=39630641">6 hours ago</a></span> <span id="unv_39630641"></span> <span class="navs">
| <a href="#39630026" class="clicky" aria-hidden="true">prev</a> | <a href="#39629872" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39630641" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Does it sync bi-directionally from code to flow visual representation and back? Because that seems pretty useful to mass adoption. I notice you said "Flyde is designed to complement and enhance traditional textual coding, not to replace it."
Bi-directional sync would help a lot with that idea.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39630641&goto=item%3Fid%3D39628285%2339630641" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39632090"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39632090" class="clicky" href="vote?id=39632090&how=up&auth=3a2a7af4d9c8cbde3dad8586946ed5ed1b2287df&goto=item%3Fid%3D39628285#39632090"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T17:47:51"><a href="item?id=39632090">4 hours ago</a></span> <span id="unv_39632090"></span> <span class="navs">
| <a href="#39630641" class="clicky" aria-hidden="true">parent</a> | <a href="#39629872" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39632090" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">It's a question I get many times and while the point makes sense, I think that the value of translating a piece of code as-is to Flyde isn't that high. The resulting visual representation will resemble the AST of the transformed code and be less of a value. It's like converting assembly to C and vice-versa. It might be useful, but data will be lost and a 1 to 1 conversion doesn't really exist.<p>On the other hand, you can easily take a single piece of your code, say a business logic of a controller in an MVC-based web service, and transform it into a Flyde flow and call it from the original controller.</p><p>With that being said, I have no doubt that for Flyde to be truly mass-adopted I have to invest more in easier onboarding and safer ejection.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39632090&goto=item%3Fid%3D39628285%2339632090" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629872"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39629872" class="clicky" href="vote?id=39629872&how=up&auth=5e49c88a2b1ce147791b87ccfe8bd2a806b0ff72&goto=item%3Fid%3D39628285#39629872"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=penteract" class="hnuser">penteract</a> <span class="age" title="2024-03-07T14:59:09"><a href="item?id=39629872">7 hours ago</a></span> <span id="unv_39629872"></span> <span class="navs">
| <a href="#39630641" class="clicky" aria-hidden="true">prev</a> | <a href="#39628790" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629872" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">For me (Firefox; Linux; X11) right-clicking on the background when editing a visual flow causes to a menu to appear then disappear almost instantly. Everything else seems to work (clicking run, adding nodes from the menu, right-clicking on nodes and editing them that way). Does anyone else have this problem?</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39629872&goto=item%3Fid%3D39628285%2339629872" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39632247"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39632247" class="clicky" href="vote?id=39632247&how=up&auth=4484b1fed115b734430a87fb962ab01d76c2bef6&goto=item%3Fid%3D39628285#39632247"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T17:57:51"><a href="item?id=39632247">4 hours ago</a></span> <span id="unv_39632247"></span> <span class="navs">
| <a href="#39629872" class="clicky" aria-hidden="true">parent</a> | <a href="#39628790" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39632247" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Hey, author here.
Does this happen in the playground, home page or extension? Will look into it!</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39632247&goto=item%3Fid%3D39628285%2339632247" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628790"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39628790" class="clicky" href="vote?id=39628790&how=up&auth=26a4ec56f0e80069321f581c4eb02fd74dccf1f8&goto=item%3Fid%3D39628285#39628790"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=fcsp" class="hnuser">fcsp</a> <span class="age" title="2024-03-07T13:28:17"><a href="item?id=39628790">8 hours ago</a></span> <span id="unv_39628790"></span> <span class="navs">
| <a href="#39629872" class="clicky" aria-hidden="true">prev</a> | <a href="#39629602" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628790" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Looks interesting! However, the tutorials link on the website footer 404s for me.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628790&goto=item%3Fid%3D39628285%2339628790" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628851"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628851" class="clicky" href="vote?id=39628851&how=up&auth=2e6be050f014e247f13de384dc9d8268b1d8d0a4&goto=item%3Fid%3D39628285#39628851"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T13:35:21"><a href="item?id=39628851">8 hours ago</a></span> <span id="unv_39628851"></span> <span class="navs">
| <a href="#39628790" class="clicky" aria-hidden="true">parent</a> | <a href="#39629602" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628851" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Oh, snap! Deploying a fix now.<p>Forgot to remove that after a docs rehaul. Tutorials still need to be re-written after some major changes, but perhaps this old blog post can give a sense - <a href="https://medium.com/@gabrielgrinberg/visual-programming-in-vscode-create-discord-bots-the-easy-way-dcccc6a9528d" rel="nofollow">https://medium.com/@gabrielgrinberg/visual-programming-in-vs...</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628851&goto=item%3Fid%3D39628285%2339628851" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629602"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39629602" class="clicky" href="vote?id=39629602&how=up&auth=b2c4d23ced2da912a469df09afae34a10a78a180&goto=item%3Fid%3D39628285#39629602"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=mattdesl" class="hnuser">mattdesl</a> <span class="age" title="2024-03-07T14:37:58"><a href="item?id=39629602">7 hours ago</a></span> <span id="unv_39629602"></span> <span class="navs">
| <a href="#39628790" class="clicky" aria-hidden="true">prev</a> | <a href="#39628978" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629602" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Looks great! Is it capable of doing real-time editing? For example hooking it up next to a canvas element and having the nodes change the colors or shader uniforms.</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39629602&goto=item%3Fid%3D39628285%2339629602" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628978"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39628978" class="clicky" href="vote?id=39628978&how=up&auth=d15567fad56f8db2f7104d9d724e3064469f4916&goto=item%3Fid%3D39628285#39628978"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=mellutussa" class="hnuser"><font color="#3c963c">mellutussa</font></a> <span class="age" title="2024-03-07T13:47:49"><a href="item?id=39628978">8 hours ago</a></span> <span id="unv_39628978"></span> <span class="navs">
| <a href="#39629602" class="clicky" aria-hidden="true">prev</a> | <a href="#39628725" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628978" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">The playground button on the front page <a href="https://www.flyde.dev/" rel="nofollow">https://www.flyde.dev/</a> links to localhost:3030</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628978&goto=item%3Fid%3D39628285%2339628978" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629074"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39629074" class="clicky" href="vote?id=39629074&how=up&auth=20d6e0299fc76240a91bd1e37001eae9d604007a&goto=item%3Fid%3D39628285#39629074"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T13:54:43"><a href="item?id=39629074">8 hours ago</a></span> <span id="unv_39629074"></span> <span class="navs">
| <a href="#39628978" class="clicky" aria-hidden="true">parent</a> | <a href="#39628725" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629074" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Oh damn! thanks for reporting! Fix going live now
Please try a different example (it changes the link based on the example on the right side).</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39629074&goto=item%3Fid%3D39628285%2339629074" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628725"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39628725" class="clicky" href="vote?id=39628725&how=up&auth=8bd20d22fdd0e5a2256dac6992e155e59ce9d2a6&goto=item%3Fid%3D39628285#39628725"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=bearwithme1" class="hnuser"><font color="#3c963c">bearwithme1</font></a> <span class="age" title="2024-03-07T13:22:04"><a href="item?id=39628725">9 hours ago</a></span> <span id="unv_39628725"></span> <span class="navs">
| <a href="#39628978" class="clicky" aria-hidden="true">prev</a> | <a href="#39629266" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628725" n="3" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">How does this compare with Pure Data?</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628725&goto=item%3Fid%3D39628285%2339628725" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628775"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628775" class="clicky" href="vote?id=39628775&how=up&auth=b7dce7d2d326f2d644bc63f3f25cab4271987d7c&goto=item%3Fid%3D39628285#39628775"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T13:26:54"><a href="item?id=39628775">8 hours ago</a></span> <span id="unv_39628775"></span> <span class="navs">
| <a href="#39628725" class="clicky" aria-hidden="true">parent</a> | <a href="#39628996" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628775" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Author here. The main difference is the target use case. I'm far from being a Pure Data expert, but it seems more aimed towards music/media generation.<p>Flyde on the other hand is aimed to be used in the application layer of modern web development.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628775&goto=item%3Fid%3D39628285%2339628775" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628996"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628996" class="clicky" href="vote?id=39628996&how=up&auth=f69756e270b1ffdd22327c19b014aee15c185cb2&goto=item%3Fid%3D39628285#39628996"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=couchand" class="hnuser">couchand</a> <span class="age" title="2024-03-07T13:49:03"><a href="item?id=39628996">8 hours ago</a></span> <span id="unv_39628996"></span> <span class="navs">
| <a href="#39628725" class="clicky" aria-hidden="true">parent</a> | <a href="#39628775" class="clicky" aria-hidden="true">prev</a> | <a href="#39629266" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628996" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">The model seems quite similar to a subset PD, with only object and message boxes. Objects can have only a single output port. (edit: I was mistaken, they can have multiple ports, though as far as I can tell there's no port-sequencing rules a la PD). Objects don't seem to be addressable: the only messages that can be sent are via the visible connections.<p>The type system seems to be directly leveraging the host JS type system, but the docs seem a bit sparse on that.</p><p>The documentation on control flow is empty, so it's not clear what the model there is precisely, but it apprears that the entire system is message-based, given the way the Hello, World is written: "output hello, wait a bit, output world".</p><p>The documentation suggests that what's novel about Flyde is the integration with other codebases, but it's JS/TS so it requires that whole enviroment. PureData is embeddable in any C application, so any language with C FFI can integrate.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628996&goto=item%3Fid%3D39628285%2339628996" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629266"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39629266" class="clicky" href="vote?id=39629266&how=up&auth=7f5e09f3bfc54a077713ddfa61711d33b3c5f91c&goto=item%3Fid%3D39628285#39629266"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=otabdeveloper4" class="hnuser">otabdeveloper4</a> <span class="age" title="2024-03-07T14:11:34"><a href="item?id=39629266">8 hours ago</a></span> <span id="unv_39629266"></span> <span class="navs">
| <a href="#39628725" class="clicky" aria-hidden="true">prev</a> | <a href="#39629212" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629266" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Did you just reinvent Node-RED?</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39629266&goto=item%3Fid%3D39628285%2339629266" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629514"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39629514" class="clicky" href="vote?id=39629514&how=up&auth=d96b83b3e7aefa1b59b70b0fdf2286d5f9109a0f&goto=item%3Fid%3D39628285#39629514"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T14:32:10"><a href="item?id=39629514">7 hours ago</a></span> <span id="unv_39629514"></span> <span class="navs">
| <a href="#39629266" class="clicky" aria-hidden="true">parent</a> | <a href="#39629212" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629514" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Valid point. Node-RED is a successful and popular tool and has a great ecosystem, especially around automation and IoT.<p>NodeRED is a standalone tool than a "language", and although it's possible, using it to integrate with (and from) existing code is not trivial.</p><p>Flyde on the other hand, takes more of a "library" stance. It is agnostic to the code running it and can be easily embedded into other codebases.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629514&goto=item%3Fid%3D39628285%2339629514" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629212"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39629212" class="clicky" href="vote?id=39629212&how=up&auth=d90d64757caca2a58deddadfc05e1b2abf74950c&goto=item%3Fid%3D39628285#39629212"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=WillAdams" class="hnuser">WillAdams</a> <span class="age" title="2024-03-07T14:07:49"><a href="item?id=39629212">8 hours ago</a></span> <span id="unv_39629212"></span> <span class="navs">
| <a href="#39629266" class="clicky" aria-hidden="true">prev</a> | <a href="#39628797" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629212" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">As a visual person (traditionally trained as a graphic artist), I've wanted this sort of thing for a long while, and I've been trying to use it for 3D.<p>Surprisingly, there are multiple specialized tools for this:</p><p>- <a href="https://www.blockscad3d.com" rel="nofollow">https://www.blockscad3d.com</a> --- an adaptation of Google's Blockly to OpenSCAD</p><p>- <a href="https://github.com/derkork/openscad-graph-editor">https://github.com/derkork/openscad-graph-editor</a> --- wires and nodes, it has the advantage of exposing _all_ of OpenSCAD's commands (the above has a subset)</p><p>- <a href="https://github.com/Tanneguydv/Pythonocc-nodes-for-Ryven">https://github.com/Tanneguydv/Pythonocc-nodes-for-Ryven</a> --- a module for using PythonOCC in Ryven --- when I finally succeeded, I found the language inscrutable, even when provided w/ quite nice examples (definitely a failing on my part, not that of the tool)</p><p>- <a href="https://github.com/graphscad/graphscad">https://github.com/graphscad/graphscad</a> --- it took a long while for the source code for this to be made available, and for a while it had compatibility problems (why was "cube" redefined?) --- probably defunct for political reasons, it had some interesting ideas, in particular the ability to have custom icons for modules</p><p>- <a href="https://www.nodebox.net" rel="nofollow">https://www.nodebox.net</a> --- if memory serves I got hung up by not easily being able to do 3D, and when doing 2D having precision problems (or maybe that was Processing.org)</p><p>and I've been using these tools to make various things:</p><p><a href="https://willadams.gitbook.io/design-into-3d/3d-project" rel="nofollow">https://willadams.gitbook.io/design-into-3d/3d-project</a></p><p>(and maybe eventually I'll finish something)</p><p>The problem I've been running into is there doesn't seem to be an answer to the question:</p><p>"What does an algorithm look like?"</p><p>I recently had occasion to mention Herman Hesse's _The Glass Bead Game_ (also published as _Magister Ludi_) and I'll bring it up again --- what is a meaningful graphical representation of a program?</p><p>The Drakon folks argued that there should be one true path but that's not really communicative and I would note that if this was a simple thing it wouldn't be decades since I last saw a physical Flowcharting Template:</p><p><a href="https://americanhistory.si.edu/collections/object-groups/flowcharting-templates" rel="nofollow">https://americanhistory.si.edu/collections/object-groups/flo...</a></p><p>(and it's pretty rare to even see a well-done electronic drawing of a flowchart since Visio made its splash and vanished into the bowels of Microsoft)</p><p>The main problem seems to be one of expressiveness not scaling up well, hence:</p><p><a href="https://blueprintsfromhell.tumblr.com/" rel="nofollow">https://blueprintsfromhell.tumblr.com/</a></p><p><a href="https://scriptsofanotherdimension.tumblr.com/" rel="nofollow">https://scriptsofanotherdimension.tumblr.com/</a></p><p>Presumably, one doesn't want to define modules/variables unnecessarily --- but the question becomes where is that dividing line?</p><p>If you define too many, then you're back to the "wall of text" which one was trying to avoid (but wrapped up in nice boxes with some lines or shapes), and if one doesn't use them (well, look at the pretty/awful images in the links above).</p><p>Ideally, a well-coded visual program would have a pleasing aesthetic appearance which is expressive and communicates flow and function, and I've tried for that at:</p><p><a href="https://willadams.gitbook.io/design-into-3d/programming" rel="nofollow">https://willadams.gitbook.io/design-into-3d/programming</a></p><p>(though I wish that there was an easy way to export an SVG version of a program)</p><p>I believe that what is needed here is some graphical equivalent to Literate Programming: <a href="http://literateprogramming.com" rel="nofollow">http://literateprogramming.com</a></p><p>Is there a nice tutorial for GUI toolkit integration which would allow easily making a graphical application with this? I have an idea I want to try it which might be a good fit.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629212&goto=item%3Fid%3D39628285%2339629212" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628797"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39628797" class="clicky" href="vote?id=39628797&how=up&auth=e7c012940269c5d05902adae580a11a8ceddb1eb&goto=item%3Fid%3D39628285#39628797"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=speed_spread" class="hnuser">speed_spread</a> <span class="age" title="2024-03-07T13:29:02"><a href="item?id=39628797">8 hours ago</a></span> <span id="unv_39628797"></span> <span class="navs">
| <a href="#39629212" class="clicky" aria-hidden="true">prev</a> | <a href="#39631154" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628797" n="3" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Looks cool, shades of Prograph, that's a good thing!<p><a href="https://en.m.wikipedia.org/wiki/Prograph" rel="nofollow">https://en.m.wikipedia.org/wiki/Prograph</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39628797&goto=item%3Fid%3D39628285%2339628797" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39633086"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39633086" class="clicky" href="vote?id=39633086&how=up&auth=db2cbe0e444fd4cc9bf31bc280e3d073514b5671&goto=item%3Fid%3D39628285#39633086"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=mypalmike" class="hnuser">mypalmike</a> <span class="age" title="2024-03-07T18:53:13"><a href="item?id=39633086">3 hours ago</a></span> <span id="unv_39633086"></span> <span class="navs">
| <a href="#39628797" class="clicky" aria-hidden="true">parent</a> | <a href="#39628855" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39633086" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I always wanted to love ProGraph - I played with it back in the pre-OSX Mac days. But I found it's very hard to "read" ProGraph code, which it would seem is the thing that visual languages are supposed to enable. It could be that my brain had already been shaped into text based programming for too long to adapt.<p>That said, I did create a visual toy language demo a few years back for the fun of it. It's kinda like a visual Lisp, or maybe upside-down ProGraph: <a href="https://github.com/mypalmike/skastic">https://github.com/mypalmike/skastic</a>
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39633086&goto=item%3Fid%3D39628285%2339633086" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39628855"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39628855" class="clicky" href="vote?id=39628855&how=up&auth=fe5d052d6ab75d0e5c2e95521ee06ef046a2a347&goto=item%3Fid%3D39628285#39628855"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T13:35:46"><a href="item?id=39628855">8 hours ago</a></span> <span id="unv_39628855"></span> <span class="navs">
| <a href="#39628797" class="clicky" aria-hidden="true">parent</a> | <a href="#39633086" class="clicky" aria-hidden="true">prev</a> | <a href="#39631154" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39628855" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Thanks!</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39628855&goto=item%3Fid%3D39628285%2339628855" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39631154"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39631154" class="clicky" href="vote?id=39631154&how=up&auth=03d71455c65c1d9ab01d927fb1165a0dd9d8812d&goto=item%3Fid%3D39628285#39631154"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=littlestymaar" class="hnuser">littlestymaar</a> <span class="age" title="2024-03-07T16:45:09"><a href="item?id=39631154">5 hours ago</a></span> <span id="unv_39631154"></span> <span class="navs">
| <a href="#39628797" class="clicky" aria-hidden="true">prev</a> | <a href="#39629452" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39631154" n="3" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">Quick feedback: put a screenshot (or even better: a gig/video) on the readme!</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39631154&goto=item%3Fid%3D39628285%2339631154" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39632435"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39632435" class="clicky" href="vote?id=39632435&how=up&auth=1cc45178fd6d56a7c62ffb8511ca87bc27ed7a87&goto=item%3Fid%3D39628285#39632435"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=gabigrin" class="hnuser">gabigrin</a> <span class="age" title="2024-03-07T18:11:41"><a href="item?id=39632435">4 hours ago</a></span> <span id="unv_39632435"></span> <span class="navs">
| <a href="#39631154" class="clicky" aria-hidden="true">parent</a> | <a href="#39629452" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39632435" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">There should be one :o
Perhaps it took time to load on your end?</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39632435&goto=item%3Fid%3D39628285%2339632435" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39635272"><td><table border="0"> <tbody><tr> <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks">
<center><a id="up_39635272" class="clicky" href="vote?id=39635272&how=up&auth=739874672151ede4df57fd8b50fa0a1de4c8d37e&goto=item%3Fid%3D39628285#39635272"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=littlestymaar" class="hnuser">littlestymaar</a> <span class="age" title="2024-03-07T22:20:25"><a href="item?id=39635272">3 minutes ago</a></span> <span id="unv_39635272"></span> <span class="navs">
| <a href="#39631154" class="clicky" aria-hidden="true">root</a> | <a href="#39632435" class="clicky" aria-hidden="true">parent</a> | <a href="#39629452" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39635272" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">You're right, I'm on a really slow connection today, <i>and you didn't put any alt text</i> ;).</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39635272&goto=item%3Fid%3D39628285%2339635272" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39629452"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39629452" class="clicky" href="vote?id=39629452&how=up&auth=5855b6090b8517333e17d77cc0dd8f75c4c5e53c&goto=item%3Fid%3D39628285#39629452"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=CyberDildonics" class="hnuser">CyberDildonics</a> <span class="age" title="2024-03-07T14:27:27"><a href="item?id=39629452">7 hours ago</a></span> <span id="unv_39629452"></span> <span class="navs">
| <a href="#39631154" class="clicky" aria-hidden="true">prev</a> | <a href="#39633261" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39629452" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">I think approaches like this can be good for people learning programming for the first time, but there are two huge aspects that mean it is unlikely to be used for anything serious.<p>1. A new language. New languages don't go anywhere 99.9% of the time and when they do it takes a massive undertaking by hundreds of people as well as very careful design over the course of decades.</p><p>2. Building visually at the expression level. Writing expressions in any modern language is very compact. In this case what takes up a single line now takes up and entire screen.</p><p>if(n>1) return fib(n-1) + fib(n-2);</p><p>Graphs are much better for working at a high level because that's where the locality isn't there are it isn't clear what data is going where. For expressions drawing lines instead of just using the same variable that was used in the previous line doesn't help clarity.
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39629452&goto=item%3Fid%3D39628285%2339629452" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39634933"><td><table border="0"> <tbody><tr> <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks">
<center><a id="up_39634933" class="clicky" href="vote?id=39634933&how=up&auth=7a548fb2c8bd61d74610c291e613baaf0f64153d&goto=item%3Fid%3D39628285#39634933"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=andoando" class="hnuser">andoando</a> <span class="age" title="2024-03-07T21:45:57"><a href="item?id=39634933">38 minutes ago</a></span> <span id="unv_39634933"></span> <span class="navs">
| <a href="#39629452" class="clicky" aria-hidden="true">parent</a> | <a href="#39633261" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="39634933" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">This is easily solved by having nodes which serve as a collection of nodes</span>
<div class="reply"> <p><font size="1">
<u><a href="reply?id=39634933&goto=item%3Fid%3D39628285%2339634933" rel="nofollow">reply</a></u>
</font>
</p></div></div></td></tr>
</tbody></table></td></tr>
<tr class="athing comtr" id="39633261"><td><table border="0"> <tbody><tr> <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks">
<center><a id="up_39633261" class="clicky" href="vote?id=39633261&how=up&auth=55930429a1cd261ea6b48ced3dd2461c377e7229&goto=item%3Fid%3D39628285#39633261"><div class="votearrow" title="upvote"></div></a></center> </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=lolive" class="hnuser">lolive</a> <span class="age" title="2024-03-07T19:07:40"><a href="item?id=39633261">3 hours ago</a></span> <span id="unv_39633261"></span> <span class="navs">
| <a href="#39629452" class="clicky" aria-hidden="true">prev</a> <a class="togg clicky" id="39633261" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span> </span>
</span></div><br><div class="comment">
<span class="commtext c00">[off-topic] I used to follow another visual language a while ago. It seems that it is still alive.<p>Tersus Studio:</p><p><a href="http://www.tersus.com/#Id=178" rel="nofollow">http://www.tersus.com/#Id=178</a></p><p>[may be some good things to take there, as an inspiration]
</p><div class="reply"> <p><font size="1">
<u><a href="reply?id=39633261&goto=item%3Fid%3D39628285%2339633261" rel="nofollow">reply</a></u>
</font>
</p></div></span></div></td></tr>
</tbody></table></td></tr>
</tbody></table>
<br><br>
</td></tr>
<tr><td><img src="s.gif" height="10" width="0"><table width="100%" cellspacing="0" cellpadding="1"><tbody><tr><td bgcolor="#ff6600"></td></tr></tbody></table><br>
<center><span class="yclinks"><a href="newsguidelines.html">Guidelines</a> | <a href="newsfaq.html">FAQ</a> | <a href="lists">Lists</a> | <a href="https://github.com/HackerNews/API">API</a> | <a href="security.html">Security</a> | <a href="https://www.ycombinator.com/legal/">Legal</a> | <a href="https://www.ycombinator.com/apply/">Apply to YC</a> | <a href="mailto:[email protected]">Contact</a></span><br><br>
<form method="get" action="//hn.algolia.com/">Search: <input type="text" name="q" size="17" autocorrect="off" spellcheck="false" autocapitalize="off" autocomplete="false"></form></center></td></tr> </tbody></table></center>
<script type="text/javascript" src="hn.js?4uDHjoC3B6DXT4Gs5QzX"></script>
</body></html>
The speaker aspires to be part of communities that empower individuals to explore their data and bring value back to themselves. They are willing to take a job in such a space and believe it's worth doing. The goal is to build tools that make it easy for the individual to work with their data directly on a web page. They plan to move to a more reactive front end using Next.js and React, designing a feed and query system possibly using natural language. The speaker also mentions working on embedding audio and ensuring embeddings are accessible. The text discusses the process of obtaining and manipulating data and emphasizes the importance of experimentation and innovation. It uses the metaphor of building a playground to illustrate the iterative nature of the process, acknowledging that initial attempts may be imperfect but can be improved upon through learning from mistakes. The writer anticipates challenges but expresses a hope to avoid negative consequences and eventually achieve success. Finally, the text concludes with a lighthearted remark and a reference to going to sleep.
80.58% similar
The speaker is excited about tomorrow but acknowledges that as a developer facing new challenges, the work is not trivial, especially given the lack of extensive documentation and the solitary nature of their current work process. They express a desire to share their learnings, possibly by writing them down, and emphasize the importance of collaboration, suggesting that "if we do this together, it will be a better world." The speaker is tired of creating misleadingly impressive demos and aims to write code and interact with large language models in a more genuine and transparent way. Lastly, they recognize the complexity of building an effective agential system, admitting their current limitations while believing in its importance, and they present open questions about processing and connecting large amounts of data to better understand who we are.
Today was another productive day. As I engage more in real-world tasks, my enthusiasm for API work, especially in reducing text-to-speech latency, grows. It's a fascinating project, and there's potential to make something genuinely beneficial. Financially, using Mac mini networks could bring in a considerable sum given the low compute costs. However, everything is still in the exploration phase, including plans to increase our capacity with an additional computer. I didn't get outside much today, missing out on slacklining, but had dinner with friends at La Vie en Rose, which was enjoyable. My meals throughout the day were simple, starting with eggs for breakfast. Looking forward, I'm eager to dive into work tomorrow, aiming to have the production API up and running by the afternoon. Managing concurrency and integrating services like fly.io are on the agenda to improve and simplify the API. Cleaning up the code and deploying a refined Docker image are also priorities to enhance the system's efficiency and functionality. It's an ongoing process, but I'm optimistic about the progress.
Feeling exhausted but content, the speaker reflects on their constant work and aspirations to improve processes, like making John's burrito preparation faster. They acknowledge that their current project may have flaws, but see potential for it to be a dynamic back-end platform with multiple uses. The speaker expresses a desire to create something novel and valuable, while also fostering a space for both public and private sharing. Amidst these professional goals, they cherish personal connections, such as a satisfying morning of surfing with friends.
79.31% similar
Today marked a significant advancement in the burrito project, where the image pipeline, established the previous day, became fully functional and integrated into a webpage, complete with an effective querying system. The visual aspect of the project, particularly the image embeddings, was both intriguing and aesthetically pleasing, although its effectiveness is still under review. The project is now at a stage where the creator is keen to move beyond personal experiments to sharing the results with others, with the immediate goal being to encourage a small group of individuals to test the developments. The focus for the week has shifted to actual user engagement through getting people to sign up and provide feedback, driven by the enthusiasm of witnessing the project's imagery features come to life.