Gallery of programming UIs | Hacker News Reader

Gallery of programming UIs

docs.google.com

316 pointsChris204876 comments

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.

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.

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

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?

Not sure, although MS has a few tutorials https://support.office.com/en-ie/article/Create-a-Data-Model...

so, make a Haskell editor which only shows the one line of code where your cursor is on, rest of logic is completely hidden.

With VBA, you can make a cell modify other cells.

True. Excel makes a distinction between functions and commands. Functions can't modify other cells, commands can. Since VBA can be used for "automation" (invoking UI events) it can modify cells.

Wouldn't it be a little more accurate and fair to call it the "Visicalc" model of programming, given that's who invented it?

I'm jus going to name-drop Felienne Hermans, who did an entire PhD on bringing proper software tools and best practices to Excel:

http://www.felienne.com/publications

Here is one of her more recent versions of the talk she gives on the topic:

https://vimeo.com/162206549

I think she raises especially important points when she mentions that Excel is used everywhere, that it suffers from all the technical debt problems that regular software development suffers from, and that buggy Excel sheets have big consequences (the austerity paper bug comes to mind[0]). So even if "real" programmers don't want to program in it, it still should be taken seriously given its place in the world.

https://www.bloomberg.com/news/articles/2013-04-18/faq-reinh...

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

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

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...

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

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.

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

Another relatively obscure but potentially interesting entry could be Field:

http://openendedgroup.com/field/OverviewBanners2.html

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

I also think there's something missing: quite a few of these cherry-pick their domains.

What I mean by this, is the Brett-Victor style interactive programming is always some kind of visual GUI/game/shape drawing program. The majority of computer programs will need plugins e.g. to generate output statistics/visualizations to effectively debug visually.

I've always thought that a "killer app" for a REPL or "notebook" software, would be a presentation layer that receives structured data, and then runs a whole suite of visualizations on it in parallel, and then chooses whichever display format—itself still structured data in e.g. SVG—is the smallest. In other words, the one that ends up compressing the data the best, in the process (presumably) finding the clearest signal.

I've got an idea myself, on doing something like this for the actual execution path - e.g. detecting what fields on of dict a function acts upon.

The immediate use is generation of minimal test data (the least data that runs each possible execution path), but I think in general it could be useful for debugging; consider knowing that, for example, the function "Int Foo(Dict bar)" will (conditionally) access only a certain key on bar, or will (necessarily) always require a certain key, such that this kind of information is available as a tooltip when you mouseover the parameter.

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, 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).

You may also like the simplicity of the UI for SolveSpace:

http://solvespace.com/index.pl

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

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.

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...), you already should be seeing these notes just underneath each slide.

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.

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

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...

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

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...

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

Of note, the McCLIM implementation of CLIM is still under active development, with the latest progress report from April 26th: https://common-lisp.net/project/mcclim/posts/Progress-report...

I came here to post essentially the same thing. Glad someone else brought it up.

Definitely add some pictures of Genera to the slideshow, including Zmacs and Document Examiner.

One of my formative experiences with programming er, programs, was '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 :)

http://www.filfre.net/2013/07/the-quill/

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!)

Author here. If you can't access the Google Doc I put up a slideshow here: https://docs.google.com/presentation/d/1MD-CgzODFWzdpnYXr8bE... Missing the links in the speaker notes though, so I'll come up with a better solution.

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

Blender3D Game Engine

http://cargo.smidginsoftware.com/static/images/Making-Screen...

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.

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

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.

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.

It was brilliant for creative people to use, I'd say if it wasn't for Flash we wouldn't have things like Unity editor today.

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

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.

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!

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.

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...

Here's VENSIM: 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...

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

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.

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).

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).

Very cool review. The one item I was hoping to see, but missed, was UserLand Frontier: http://www.spicynoodles.net/projects/postgresql/images/pgdem...

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.

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...

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.

Great gallery, some additional suggestions.

Oberon,

https://en.wikipedia.org/wiki/Oberon_(operating_system)#/med...

http://www.modulaware.com/mwovms.htm

Oberon System 3,

http://www.statlab.uni-heidelberg.de/projects/bertin/voyager...

http://www.ethoberon.ethz.ch/native/snaps/vnc.jpg

Active Oberon,

http://www.ocp.inf.ethz.ch/wiki/Documentation/WindowManager

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.

I'd suggest updating the link directly to the presentation: https://docs.google.com/presentation/d/1MD-CgzODFWzdpnYXr8bE...

The link appears to have been changed, it originally pointed to http://alarmingdevelopment.org/?p=1068

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

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

might want to add in NodeRED too! https://nodered.org/

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

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.

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.

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.

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

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.

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

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?

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

WolframAlpha?

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.

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.

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.

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

And Trello? (kanban)

Oh, Smalltalk <3

Might want to add in https://nodered.org/ too

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

Not sure what's the idea here.

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.

The author has created a few experimental UI/environments, and these slides demonstrate some of the inspirations for the attempt.

Reply on news.ycombinator.com