Hi, has anyone already tried to build a “Visual Elm” based on the concept of node graphs (aka flowcharts)? A short search didn’t bring up anything useful.*
From my experience this usually doesn’t work very well, because most programming language are too complex to model them visually (especially JavaScript). However, with Elm I think it might actually be usable!
Functional (data in, data out)
Typed (edges must only connect ports of the same type)
Runtime system (exactly 4 functions necessary: init, view, update, subscriptions)
There are also already some projects this could be build upon:
I spent some time thinking about that (“Visual Elm”, not node graphs!) and prototyped some areas. Also, my focus is on design systems, codebase understanding, and maintenance, not authoring.
As you rightly point out, node graphs, state machines visualizations, “3d cities,” node editors, and other stuff you list are not that useful beyond toy examples. Lots of eye candy for .
Elm wouldn’t be a better candidate than any other language. Graph visualizations are the low hanging fruit for showing call graphs, control flow, and such. That works for all programming languages.
One useful thing that you could do automatically is render all interactions as state charts. But that’s a property of TEA, not Elm itself. It would work for other languages that implement that architecture, like TCA/Swift, whatever F# has. XState ostensibly does that for React, but requires some manual coding (IIUC) that makes it useless in the same way as storybook. Stately is the commercialized eye candy of XState, that I suspect is not that useful either.
Rete Studio seems to be directly inspired by the current fashion in game industry (tools like Unreal’s Blueprint or Blender’s node editor). It’s visual candy that misses the point of these tools.
“Visual Elm” evokes memories of Visual Basic 6, a gem unjustly destroyed by Microsoft’s “Elvis” macho program managers of the late nineties.
VB falls under something that was called RAD in the nineties. That would likely be a better starting point for studying the state of the art.
Are you considering developing something or joining one of the existing efforts?
Unfortunately not related to node graphs, but when I think about “Visual Elm”, I always think about this demo https://youtu.be/-TFL6E1uSHE?t=128 of “Structured Code Editing” By Ravi Chugh.
It looks really cool to drag around SVG nodes (which updates the program code), and to both use a pointer-based approach to insert code or do refactorings, or use the keyboard to enter code.
The demo he showed was extended to Sketch-n-Sketch but there seems to be no progress since 2019. The editor was renamed to deuce, but I also saw no recent news about that.
One of his phd students, Brian Hempel demoed maniposynth (video), a tool that allows to switch between text editing and a GUI to create code in 2023.
I don’t think they are exactly what you are looking for, but maybe they could be an inspiration source.
As there is no project exactly matching my description, I guess I’d have to start a new one. The main question is which libraries / frameworks I should base it on.
I’d probably use one of the existing JavaScript libraries via a web component to get going. The contenders:
If their integration turns out to be too complicated, I’d probably fork Elm Graph Editor.
Or maybe for additional performance it might be a good idea to use something like Rust’s egui node graph.
I love Sketch’n’Sketch, but I still wonder if there is not a more graphical representation of code that works well. Something where the UI ideally doen’t allow you to write invalid programs or at least not invalid syntax.
Thanks a lot for the link to Maniposynth! Haven’t seen that one yet!
.