I’m kind of seeing a visual approach to programming as a programming language agnostic way of coding.
For that, I a big fan of flow based programming as the agnostic part. For the implementation, I’m thinking of Node-Red which is a visual implementation of flow based programming.
To become programming language agnostic, I’ve started on the Erlang-Red project which takes the frontend of Node Red and bolts it onto an Erlang backend.
Eventually the visual flow code will be programming languages independent.
I haven’t had luck with visual programming. I miss the easy to refactor things, copy/paste/move… in big projects for me at least tends to get messy. Anybody who has used labview for some years will probably agree.
I have dreamed about a programming language which would be basically text, but the editor would present it as a kind of flow chart. Maybe can be done with any existing programming language? But I found some troubles with language extensions… maybe someday someone much smarter than me can implement that in a meaningful way.
Not flow chart, but the closest in terms of UX improvement is live programming. Smalltalk and Lisp have that, as well as JS in the browser. Basically you can run any snippets you run and redefine almost everything. It's quite different workflow from the default Edit-Compile-Run.
That's one of the reason people love Emacs. Once you've loaded the software, you can rebuild it from the inside out without ever shutting it down. You think of a feature, you build it directly, piece by piece, instead of creating a new project, etc,...
Node-RED offers good abstractions for organising visual code:
- subflows for grouping common code that can be reused
- link nodes for defining "gotos" visually and also making code reusable
- flow tabs that group a set of nodes in a single tab and where link nodes can be used to jump into these tabs
- node packages that define new nodes but also encapsulate NodeJS code into a single visual element, i.e. a node.
Having said that, many textual tools and ideas are still missing their visual equivalence
- how to do version control of visual code
- how to compare visual code between versions
- how to work collaboratively on the same code base
- what is refactoring in a visual program? moving and aligning is a form of refactoring that can lead to better understanding
- how to label visual elements in a consist manner, i.e., coding conventions - what is the equivalent to the 4 versus 2 spaces/tabs debate in visual programming?
But just as many questions remain unanswered in the AI/Vibe coding scene, so that doesn't mean visual programming isn't to taken seriously, it's just means its not trivial.
I think visual programming should be taken more seriously and thought through. I like to say that we went from punchcards to keyboards and somehow we stopped there - when it comes to programming. At the same time we went from phones with operators to dial phones to push button phones to smart phones with touch screens. Why not the same for programming?
What makes programming so inherently keyboard bound?
For that, I a big fan of flow based programming as the agnostic part. For the implementation, I’m thinking of Node-Red which is a visual implementation of flow based programming.
To become programming language agnostic, I’ve started on the Erlang-Red project which takes the frontend of Node Red and bolts it onto an Erlang backend.
Eventually the visual flow code will be programming languages independent.