
Gallery of programming UIs - Chris2048
https://docs.google.com/presentation/d/1MD-CgzODFWzdpnYXr8bEgysfDmb8PDV6iCAjH5JIvaI/preview?slide=id.g1da0625f1b_0_56
======
osullivj
No Excel? It's the most widely used visual, grid based functional programming
environment. MS claim more than a billion Office users. Any time one of them
edits a formula in Excel they're programming. Would also be nice to see
AVS/Express in there. Jeff Vroom built the AVS VPE more than 20 years ago.

~~~
runeks
Not only is Excel functional programming, it's _lazy_ , _pure_ functional
programming: each cell (variable) can only define itself, and so cannot change
the content of other cells. Evaluation is controlled by the Excel runtime
system, which doesn't evaluate cell expressions unless they're scrolled into
view, or needed to evaluate a cell that's scrolled into view.

Exactly like Haskell. If Excel were impure, it would mean an expression in one
cell would have the power to alter the value of another cell. So, in effect, a
cell becomes a synonym for the expression it contains, rather than a --
possibly mutable -- reference to the value its expression evaluates to.

~~~
Chris2048
I'll also mention excel now supports models, for proper table relations,
avoiding the INDEX/MATCH function nonsense.

~~~
derefr
Huh; never heart about this! Is there a good walkthrough of this functionality
for people who already work with relational databases and just want a compare-
and-contrast?

~~~
Chris2048
Not sure, although MS has a few tutorials [https://support.office.com/en-
ie/article/Create-a-Data-Model...](https://support.office.com/en-
ie/article/Create-a-Data-Model-in-Excel-87e7a54c-87dc-488e-9410-5c75dbcb0f7b)

------
lachenmayer
I threw my own hat into the ring with my undergraduate thesis, in which I
wanted to create an editor for Elm which took advantage of all the niceties
that strongly-typed functional reactive programming affords. I also took a
closer look at some of the projects mentioned here (Light Table, Lamdu,
Tangible Values, Scratch/Hopscotch, Inventing on Principle etc...). You can
find its (now totally obsolete) remains here:
[https://github.com/lachenmayer/arrowsmith](https://github.com/lachenmayer/arrowsmith)

The idea was basically: you should be able to use different editing UIs for
values of different types. The lowest common denominator is code as text, but
you should be able to switch on different editing UIs for numbers, colours,
graphics, record types etc. The second half of this video shows off some demos
for all of these:
[https://www.youtube.com/watch?v=csRaVagvx0M](https://www.youtube.com/watch?v=csRaVagvx0M)

I also had some (far too) ambitious plans for stuff like type-driven drag &
drop editing (mainly for function application), which I unfortunately didn't
get to implement, but you can read about them in the report:
[https://github.com/lachenmayer/arrowsmith/blob/master/report...](https://github.com/lachenmayer/arrowsmith/blob/master/report.pdf)

By far the most intellectually stimulating work I've ever done! We're
definitely not there yet, to paraphrase Alan Kay :~)

------
jonathanedwards
Author here. This doc is just my personal curation of notable/interesting UIs
for programming, as inspiration for my own research. Not attempting to be
comprehensive, and being somewhat opinionated on the level of generality
required to be called "programming". Thanks for all the links, I'll check them
out.

~~~
larsbrinkhoff
Maybe look into colorForth, where the colors are not just syntax highlighting,
but part of the language semantics.

------
gavinpc
Wow. _This_ is the hardest problem in programming. This is a very thought-
provoking tour of nearly forty-years' worth of valiant efforts to tackle it.

Add Sketchpad, and you'll have half a century.

[https://en.wikipedia.org/wiki/Sketchpad](https://en.wikipedia.org/wiki/Sketchpad)

~~~
i336_
I get happy when I see SketchPad on here. I consider it the hands-down best
software system that ever existed.

If anyone has any ideas as to where/how I might be able to track down the
actual SketchPad code I would _love_ to hear it.

The [https://en.wikipedia.org/wiki/TX-2](https://en.wikipedia.org/wiki/TX-2),
the machine SketchPad ran on, had 460KB of 36-bit memory, and _it. ran. at.
400kHz._ \- yes, 400k instructions per second.

The CAD system that introduced the idea of the GUI, clipboard, OOP, and so
many other things, ran only a little faster than the masked-ROM calculators
you can buy for a couple dollars at the store down the road nowadays. It's
kind of mind-blowingly awe-inspiring and yet unbelievably depressing.

I took the above from what I said last time SketchPad was mentioned
([https://news.ycombinator.com/item?id=13938330](https://news.ycombinator.com/item?id=13938330)).

~~~
i336_
Update: Someone got in touch via email to let me know about something
interesting that was only donated 3 months ago:
[http://www.computerhistory.org/collections/catalog/102726903](http://www.computerhistory.org/collections/catalog/102726903)

On the one hand, _this is the source code to SketchPad!!!_

On the other hand... the scan quality is extremely low, and I'm planning on
contacting the CHM to see if they can schedule a rescan at some point in the
future - basically before the paper wears out, as there are currently no TX-2
emulators.

But this is awesome.

------
i336_
NOTE! NOTE! NOTE!

Some of the slides have annotations attached to them! These provide extra
detail, or links to research papers.

Tap/click the gear icon at the bottom and select "Speaker notes", or press S.

Alternatively, if you clicked to open this in the editor view
([https://docs.google.com/presentation/d/1MD-
CgzODFWzdpnYXr8bE...](https://docs.google.com/presentation/d/1MD-
CgzODFWzdpnYXr8bEgysfDmb8PDV6iCAjH5JIvaI/edit)), you already should be seeing
these notes just underneath each slide.

------
DougWebb
I'm definitely in the "prefer to read" camp. A lot of these, especially the
more graphical ones (that aren't just fancy syntax highlighting) seem way too
disjointed for me. I don't want my code floating around in separate
bubbles/windows, I want to see it in-context, and I want to be able to see a
lot of it at once.

I do think that visual representations of code can be very helpful for
analysis, especially if you can see the code running in the visual
representation while you're debugging it. But for editing, I want the text
view.

The other thing that looks really handy is the ability to use proper
mathematical symbols, when that's appropriate for what you're doing. The point
of those symbols, afterall, is to be a concise textual representation of the
concepts. The problem is our input tools; a keyboard and mouse are really not
suitable for a written language developed for hand-held pens and paper. That
might change soon; the latest touch screens might make it possible to have a
notebook-sized pad with very-high-precision pen input as a common third input
device, next to our keyboards and mice. If that becomes common, languages and
IDEs that make use of it might become common as well.

~~~
digi_owl
I wonder if this is related to the object vs procedure approach to
programming.

------
erikj
I think Symbolics' Dynamic Windows and CLIM could be added to this gallery as
well, as early examples of presentation-based user interfaces:

[https://dspace.mit.edu/bitstream/handle/1721.1/41161/AI_WP_2...](https://dspace.mit.edu/bitstream/handle/1721.1/41161/AI_WP_219.pdf)

ftp://publications.ai.mit.edu/ai-publications/2004/AIM-2004-005.pdf

~~~
lispm
Really old screenshots of applications and the development tools from the MIT
Lisp Machine, here the MIT CADR of June 1980, similar as sold as LM-2 by
Symbolics:

[http://bitsavers.informatik.uni-
stuttgart.de/pdf/symbolics/L...](http://bitsavers.informatik.uni-
stuttgart.de/pdf/symbolics/LM-2/LM_Screen_Shots_Jun1980.pdf)

This is pre Dynamic Windows, which was introduced several years later.

------
sjclemmy
One of my formative experiences with programming er, programs, was 'The Quill'
([https://en.wikipedia.org/wiki/The_Quill](https://en.wikipedia.org/wiki/The_Quill))
for the ZX Spectrum. Perhaps not a true programming environment but I have
fond memories of writing an adventure called 'The Jewels of Zenagon.' Fun
times :)

~~~
digi_owl
[http://www.filfre.net/2013/07/the-quill/](http://www.filfre.net/2013/07/the-
quill/)

~~~
sjclemmy
Oh wow - that was illuminating. I was 11 or 12 when I got the quill.
Adventures were all the rage. I remember the Hobbit being just way too hard.
My favourite adventure game was the Lords of Time. I remember being ecstatic
when I worked out that the lodestone was a magnet and could be used to get the
key. (I don't remember much else about it!)

------
jonathanedwards
Author here. If you can't access the Google Doc I put up a slideshow here:
[https://docs.google.com/presentation/d/1MD-
CgzODFWzdpnYXr8bE...](https://docs.google.com/presentation/d/1MD-
CgzODFWzdpnYXr8bEgysfDmb8PDV6iCAjH5JIvaI/pub?start=false&loop=false&delayms=3000)
Missing the links in the speaker notes though, so I'll come up with a better
solution.

~~~
viral_krieger
Thank you, some of the slides were stuck "Loading" for me.

------
slezyr
Blender3D Game Engine

[http://cargo.smidginsoftware.com/static/images/Making-
Screen...](http://cargo.smidginsoftware.com/static/images/Making-Screenshot-
Snail.jpg)

~~~
teleclimber
I keep hearing about Blender's UI. What's the deal with that? I see all sorts
of things in that screenshot but I'm not sure what I'm looking at. Is there a
good description of the UI somewhere for those interested in UIs (as opposed
to actually making something in 3D).

Thanks.

~~~
HelloNurse
In the bottom middle of the screenshot, above the empty timeline, there is a
graphical editor for events in the game engine.

------
jaimex2
I'd love to see Macromedia Flash added. Yes, Flash outstayed its welcome on
the web but man was it fun and direct to program in.

~~~
Matthias247
Just wanted to say the same. Flash had an interesting model, with the mixture
of having a timeline, objects on a canvas and the ability to add scripts to
various things.

------
nzonbi
Another programming UI: I have been designing a graphic based programming
language: xol. In xol code is represented with graphical elements instead of
text. A prototype of the first version (partially working code editor) can be
seen here: [https://github.com/lignixz/xra9](https://github.com/lignixz/xra9)

There is already a second version design, 2x better looking, not revealed yet.
I also have some additional ideas that may improve the language further.

~~~
chazu
I've only glanced at your project as I need to minimize my HN time this
morning but it looks fascinating and I hope to circle back around to it soon!

~~~
nzonbi
thanks! The next version, not revealed yet, look beautiful, has some
fundamental improvements in design, and has a different, better user
interface. I wish I could find some funding entity, that wants to partner to
complete this project.

------
thanatropism
Also missing: the system dynamics paradigm, where boxes are accumulators and
arrows are flows. Many packages like this have existed and still exist.

This is (a recent iteration) of Stella: [http://sdwise.com/wp-
content/uploads/2013/11/System-Dynamics...](http://sdwise.com/wp-
content/uploads/2013/11/System-Dynamics-modeling-app-STELLA-Modeler-for-
iPad.jpg)

Here's VENSIM: [http://www.makrosimulation.de/Screenshot-
Staatpublish.jpg](http://www.makrosimulation.de/Screenshot-Staatpublish.jpg)

Matlab's SIMULINK is kind of a generalization of this paradigm (less
convenient because of too many choices to make):
[http://ctms.engin.umich.edu/CTMS/Content/Suspension/Simulink...](http://ctms.engin.umich.edu/CTMS/Content/Suspension/Simulink/Control/figures/susp_model.png)

------
vanderZwan
The second-to-last slide mentions schematic tables, an idea idea proposed for
Subtext 2 by Jonathan Edwards (who seems to be the author of these slides).
Here is a video of him explaining the concept:

[https://vimeo.com/140738254](https://vimeo.com/140738254)

Of all the UI interfaces, I thought this was one of the few that made the
screen look _less_ cluttered and easier to follow. I would have loved to see
it elsewhere, even if only as a debugging tool.

------
tluyben2
Thanks Jonathan, that is just excellent again. I, these days, dedicated myself
to get myself out of my chair (I program standing up for around 7 years now
but that's not enough getting older); my goal is being able to walk while
programming. And so many interfaces you have here can never even aspire to do
that. I finally am at a point with something (after 10 years of having this
same goal behind me and about 40 failed attempts with prototypes) that I can
say it is not slower than sitting down while walking (I am well aware this is
also related to getting older; I am capable of doing far more in my head than
I was 20 years ago). And it is interesting to see how all these interfaces
depend on your being stationary and some not even only stationary but
stationary in front of a quite massive screen (visual programming often needs
rather large surfaces for anything trivial).

~~~
Chris2048
Is there such a thing as a treadmill that only moves when you walk (like a
hamster wheel).

Walking can actually help me think (pacing around when thinking, or trying to
visualize), but it is an absent, inattentive walk - having to keep up the
treadmill pace would be distracting (as might certain other UI interactions).

------
zeveb
Very cool review. The one item I was hoping to see, but missed, was UserLand
Frontier:
[http://www.spicynoodles.net/projects/postgresql/images/pgdem...](http://www.spicynoodles.net/projects/postgresql/images/pgdemo.jpg)

It was a really neat outliner which was extended to provide a pretty neat
scripting environment, and eventually a web server. I used it to run a web
site from my dorm room in the late 90s.

It's interesting to see org-mode (another outliner) now be another example of
an awesomely extensible outline-based software system.

------
arca_vorago
Nice to see Epics Unreal Engine 4 blueprints in there. Right now I am heavily
relying on blueprints instead of c++ as I wait for some features to mature,
and the interface is really growing on me. I just find it easier and faster
tot prototype in.

[https://docs.google.com/presentation/d/1MD-
CgzODFWzdpnYXr8bE...](https://docs.google.com/presentation/d/1MD-
CgzODFWzdpnYXr8bEgysfDmb8PDV6iCAjH5JIvaI/pub?start=false&loop=false&delayms=3000#slide=id.g1d7c11dd1b_0_286)

------
dickbasedregex
I was building a project a few years ago where I really needed some resources
on visual-programming UI's and couldn't find much of any information on the
topic. This is nice. I saved this.

------
pjmlp
Great gallery, some additional suggestions.

Oberon,

[https://en.wikipedia.org/wiki/Oberon_(operating_system)#/med...](https://en.wikipedia.org/wiki/Oberon_\(operating_system\)#/media/File:OberonScreen.PNG)

[http://www.modulaware.com/mwovms.htm](http://www.modulaware.com/mwovms.htm)

Oberon System 3,

[http://www.statlab.uni-
heidelberg.de/projects/bertin/voyager...](http://www.statlab.uni-
heidelberg.de/projects/bertin/voyager01.html)

[http://www.ethoberon.ethz.ch/native/snaps/vnc.jpg](http://www.ethoberon.ethz.ch/native/snaps/vnc.jpg)

Active Oberon,

[http://www.ocp.inf.ethz.ch/wiki/Documentation/WindowManager](http://www.ocp.inf.ethz.ch/wiki/Documentation/WindowManager)

------
specialist
Ridiculously comprehensive. A great start. Thank you.

Maybe wiki-fy this? So that people can add source links?

Mid 90s, I spent some time trying to make a "structured editor" for VRML-97,
where the scene graph and the textual representation were linked (two way
editing). I didn't get very far. I'm glad others continue to work on these
ideas.

------
l1n
I'd suggest updating the link directly to the presentation:
[https://docs.google.com/presentation/d/1MD-
CgzODFWzdpnYXr8bE...](https://docs.google.com/presentation/d/1MD-
CgzODFWzdpnYXr8bEgysfDmb8PDV6iCAjH5JIvaI/edit?usp=sharing)

~~~
Chris2048
The link appears to have been changed, it originally pointed to
[http://alarmingdevelopment.org/?p=1068](http://alarmingdevelopment.org/?p=1068)

I am not the blog author, so wished to give credit.

------
interfixus
Early Delphi versions were influential and in widespread use. They might
deserve an honorable mention.

------
njstraub
might want to add in NodeRED too! [https://nodered.org/](https://nodered.org/)

------
AriaMinaei
Computer programs are vastly under-utilised when it comes to programming
computers.

------
jstewartmobile
This was kind of depressing. It seems like almost everything aside from
IPython and Mathematica in this list is still worshiping at the altar of PARC.
That, and two of the most common UIs for GSD (Vim and Emacs) aren't even on
the list.

On a personal note, I'm particularly hostile to the Squeak/LabView style of
flowchart programming. Once you get something even slightly non-trivial going,
you can just _feel_ your life force being drained by all of the scrolling and
zooming and dragging and futzing.

~~~
zild3d
Never used squeak, but LabView and Simulink are actually nice to use for large
and complex systems. You use sub-routines to build abstraction layers. If you
want to design an entire system without any abstractions, sure that would be a
pain, but I suppose you can do the same in any language, it's just bad design.

For example, you create a high pass filter using all the necessary components
and flows, and then you abstract it out as a black box called High Pass
Filter, and can re-use as needed throughout the system.

~~~
jstewartmobile
You know what else allows for functional decomposition, but without having to
carefully use the select tool around irregular shapes and connectors?

Text files. They're pretty neat.

~~~
pjmlp
I rather have my IDEs with their graphical code navigation features,
regardless how the information is stored.

------
maaaats
I would have liked a summary of the idea/usage/strengths of the various
screenshots. Just by looking at them I can understand _something_ , but I
think there may be many interesting concepts here.

------
tibu
How about Notepad / Notepad++ / VS Code / Atom / etc ?

------
vmeson
Can anyone provide a link to the "versions and diffs" tool for reviewing git
history? Is this a separate program or just highlighting various UIs that
several git tools use?

------
bbrik
This is a great collection! There are a lot of replies adding other examples.
I am gonna add Controller Mate, which I use daily.

------
_FKS_
WolframAlpha?

------
zem
greenfoot (slide 29) seems to have a lot of nice UI ideas. i could definitely
see using it as an ide to explore a new codebase.

------
solomatov
I don't understand why IntelliJ family of products aren't included here. Also,
you include mbeddr, but don't include JetBrains MPS which it's based on.

~~~
treve
Another way to phrase this:

> Have you considered adding the IntelliJ family of products? If so, how come
> you didn't include them?

Same message, less hostile. Also, it's worth noting that OP is not the author
of the blog post, so your question might still fall on deaf ears.

~~~
Chris2048
Author knows of this page, but in any case, isn't Mbeddr a reasonable
demo/representation of MPS?

------
galfarragem
And Trello? (kanban)

------
ekvintroj
Oh, Smalltalk <3

------
njstraub
Might want to add in [https://nodered.org/](https://nodered.org/) too

------
ensiferum
Hmm, seems a bit incoherent collection of screenshots of IDEs, editors,
desktop environments and whatnot.

Not sure what's the idea here.

~~~
edejong
I'm guessing the purpose is to get a feel for possibilities within the space
of programming languages. A tool to get the mind thinking outside of the usual
IDE-box.

