7GUIs

https://eugenkiss.github.io/7guis/tasks/

by dsego • 6 years ago

507 56 6 years ago

eugenkiss.github.io

diggan3• 6 years ago

I'd love to see one website/git repository with implementations from every major framework (desktop+web) implementing these 7 GUIs, and have some benchmarks additionally to some E2E tests. Would make it easy to see at a glance what kind of complexity you would get exposed to as a user of that framework. Anyone know any collection? Closest to that that I know about is http://todomvc.com/ but it's biased in a way that it's very trivial example, geared towards MV* frameworks/libraries and only for web.

I fist became familiar with 7GUIs after getting into statecharts of the various flavors, and xState (statecharts in JS) has some of the tasks from 7GUIs implemented: https://xstate.js.org/docs/tutorials/7guis/counter.html

bussierem• 6 years ago

You might be looking for something like this?

https://github.com/gothinkster/realworld

diggan3• 6 years ago

Yes, that looks like a building block towards what I would want to exist indeed. Thanks for sharing!

Pulled down some of repositories listed and ran the provided Postman collection against them. None of them passes all the tests, so seems it's missing a bit of testing infrastructure and possibly centralization, to ensure they all pass the tests.

Once that would be in place, it would be easy to add benchmarking to it, to be able to do some honest comparisons.

At least it works as a baseline for seeing the complexity of frameworks, so it's still useful.

pdamoc• 6 years ago

there are a lot of implementations (some of them obsolete):

https://eugenkiss.github.io/7guis/implementations

otabdeveloper4• 6 years ago

I poked around, and it seems nobody managed to implement the spreadsheet task.

I guess this says a lot, not sure though if about the implementors or the frameworks.

dmix• 6 years ago

Isn’t this the whole idea? Unless you mean more widely used as a baseline test like TodoMVC is.

aninteger• 6 years ago

IUP's version:

https://webserver2.tecgraf.puc-rio.br/iup/en/7gui/7gui.html

k__• 6 years ago

Nice!

For web dev I would also add a plain "convert static HTML to a framework based UI", without any interactions as a step zero.

netcyrax• 6 years ago

If this became popular enough, wouldn't GUI frameworks just optimize for these 7 use cases? And then the benchmark wouldn't be so useful.

Minor49er• 6 years ago

Wouldn't that make them even more useful since these 7 are supposed to represent the most common types of GUI components?

coldtea2• 6 years ago

That makes more sense for an e.g. processor benchmark, where people compete to cheat and sell more units.

That's not exactly the case in GUI frameworks - where the different axes of evaluation (ex. expressiveness etc) would require lots of changes to logic and API of the framework (as this is not about mere performance).

And even if this did happen, optimizing for those 7 use cases would make them (a) better than what they are now, (b) better for 7 very common cases, which cover most of everything.

orthoxerox• 6 years ago

https://xkcd.com/810/

benbristow• 6 years ago

Heads up - The 'Flight Booking Java example in Sodium' link seems to take you to a fake McAfee virus scanning page.

spdegabrielle• 6 years ago

The Racket (site)[https://racket-lang.org/] / (GitHub)[https://github.com/racket] implementations are not listed sadly:

https://github.com/mfelleisen/7GUI

marvy• 6 years ago

Might be worth filing an issue; a glance at the repo suggests that the list is still being actively maintained.

amelius• 6 years ago

How about a full-fledged rich text editor, with collaborative editing (not uncommon nowadays)?

jmnicolas• 6 years ago

That would be too long to implement. The way I see it is you do these exercises for every GUI frameworks you want to try.

arendtio• 6 years ago

I think on the front of collaborative editing we have too many open (research) questions regarding what the best algorithm for solving 'conflicts' is (OT, CFRD, etc.), so that the actual GUI toolkit doesn't matter so much.

Is there anything similar that covers other fundamental and common task such as I/O,networking, json, xml, webservice, string manipulation and so on? Or in other words what today is considered as batch processing/system integration?

exacube• 6 years ago

for distributed systems, the assignments from https://pdos.csail.mit.edu/6.824/ are fantastic. reading material tool, if you want to study and not just do

H8crilA• 6 years ago

UX seems to create an insane volume of different ways for doing the very same thing. In other areas of software engineering you just look at the standard library or commonly used libraries and that's enough. I would imagine that's caused by lack of "science" in the process, in the sense that you can't really measure things.

I am trying to imagine how many syscalls would the Linux kernel have if it was designed like the web ecosystem. And more importantly how many of them would stop working after just 1-2 years ...

asp_net• 6 years ago

JFYI: Unfortunately, Eugen, the author of 7GUIs, has passed away.

R.I.P.

Edit: Source: https://github.com/eugenkiss/7guis/issues/28#issuecomment-51...

pengaru2• 6 years ago

Huh, he looks relatively young in his github profile photo, I wonder what happened.

cpach2• 6 years ago

There are many possible reasons. But if his family hasn’t stated anything publicly, perhaps we should not inquire further out of respect for them.

lostdog3• 6 years ago

The circle drawing and spreadsheet tasks are very interesting, because most GUI frameworks and tutorials just focus on laying out standard widgets and make it difficult to create custom components. Gtk and QT help you when your interface is a bunch of checkboxes and text inputs and buttons, but as soon as you want to plot a curve or make a custom tooltip or a chessboard, all it gives you is a canvas and some pixel commands.

Web-based tools, on the other hand, have clearer ways to float divs around, or draw with svg elements, or even if you're just using a canvas they help you lay out your data in a convenient way.

Am I missing something about GUI frameworks? As soon as you want to make something complex like Audacity (and audio and waveform editing tool), the frameworks stop being helpful and are just a way to get a blank window.

joshuak• 6 years ago

Actually this is exactly why we use QML. QML makes it easy to create new GUI primitives that can be called in the same way as the standard library widgets.

The coding flow is also nice, in that you can start buy embellishing an element inline, and then when it reaches your complexity tolerance or you find other uses for the same component you can literally cut and paste your code into a new file remove hard coded layout and add imports and you've got your new custom GUI widget.

detaro2• 6 years ago

You make a waveform display widget (where indeed, drawing the waveform is something you implement), and position that using the frameworks layouting options, position sub-elements using the framework tools, use event-handling mechanisms the framework provides, ... Just because you need one piece with custom rendering doesn't mean the framework isn't helpful for everything else, and often it brings tools for that too - e.g. plenty of Qt apps use SVG support for rendering graphics that fit the SVG model well, it has its own graphicsview features that do a lot more than a plain canvas, ...

gmueckl2• 6 years ago

Well, I don't think you had a good look at toolkits like Qt. They provide a lot more than just a bumch of widget and window frames. There are application framework style features in there like a very capable undo stack, abstractions over resource loading, MVC pattern implementations, plugin loading, ...

Also, advanced toolkits like WPF and Qt allow you to build upon existing controls and extent and nest them in really interesting ways to create powerful UIs.

You can also do pretty crazy fringe stuff easily like adding arbitrary widgets to context menus. Arbitrary widgets within list view or tree view items are probably more useful. The trick is to take as much of that composability as you can for your use case and build upon it.

(I am sure other mature toolkits have similar properties, but Ibam not familiar with them to the same extent)

detaro2• 6 years ago

Addendum, but I'm really getting curious now: How did you come to this flawed impression of GUI frameworks? Why did you think people used them if they were so useless?

lostdog3• 6 years ago

Glad you asked!

I don't usually do GUI-related work, but each time I do I typically want to do something complex like plotting charts or drawing diagrams. Each time, I look for a tutorial, but I never find something helpful. The results I get are similar to this QPainter tutorial: https://doc.qt.io/qt-5/qtwidgets-painting-basicdrawing-examp... . They show you that painting is possible, but figuring out how to get interactivity is left as an exercise to the reader.

Compare that to working with d3 or react, where the mouse and keyboard events are easy to create. For example, the first time I used d3, I created a bar chart, and it took just a few minutes of googling to add tooltips on hover and other behaviors when clicking on the bars. I honestly do not know a straightforward way to draw a bar chart with hover affects in QT or Gtk.

So how do I assume other people use them? Well, for the above problem you could write your own mouse picker to map from mouse location to the expected bar location. Having to write your own mouse picker certainly works, but it changes the task from something you can crank out in a few hours to needing to allocate a day or two to set up the infrastructure you need to write a good custom widget. This is also why I assumed people use Electron nowadays: you can get unusual UIs without the rigamarole of making a custom widget. So yes, I know it's possible to make GUIs that don't just compose standard widgets, but I assumed it's arduous.

I'm glad you asked. I didn't realize how controversial my original comment was (it was in negative points for a while). But what am I missing here? Have I just been unable to find a good tutorial? If you were trying to do the "Circle Drawer" example, what tutorial or examples would you follow to get it done quickly?

boterock• 6 years ago

Would love to see immediate mode GUI toolkits like Dear ImGUI [1] in the implementations section.

[1] https://github.com/ocornut/imgui

xixixao• 6 years ago

What extensions can people think of? What is #8, #9 on this progression?

A different angle would be to introduce server-single-client interop to each application (starting with counter). Then multiplayer.

Another one is to show how easy it is to take one instance and add another on the screen. Any singletons preventing this? How easy it is to then connect the two instances / drive them from another source of data.

akiselev2• 6 years ago

Off the top of my head:

#8 Error handling: on an exception, does the whole app crash? What parts of it become unusable? What are the reset paths?

#9 Data consistency indicators: how functional is the UI when in a fallible state like server updates? (In multiplayer games this would be stuff like client side prediction and reconciliation) What is the recovery path so that data isn't lost across many users? CRDTs and their competitors solve it for document editing but what about general purpose GUIs?

#10 User driven layout: Plugins, configurable UI elements, and a panel manager like you'd find in most IDEs.

#11 Automation/accessibility: mapping UI actions to command line calls or a scriptable layer (former for technical fields like EDA packages, latter for more GUI centric stuff like line of business app). Automation and accessibility are two distinct factors but the implementation details align almost perfectly.

Bonus #12: Remote execution for secure GUIs and ultra high processing power collaboration - think stuff like graphical CAD/FEA simulator with an entire bridge assembly. This is usually only possible with X or if you stream something like display lists/GL calls from a browser engine on the server to a client renderer.

I've seen #8-10 absolutely tear through every UI architecture I've ever seen and #11 is important because it's a nonstarter (or should be) for any serious application that goes out to the public, especially as the ADA's reach expands. The latter requires deep integration with any platform it's on so sadly would eliminate all but the big well funded GUI packages.

#12 has broad implications on how humans interface with computers but I've never seen it implemented at the GUI framework level - think WASM style bytecode for streaming UI state updates (I think ember.js's renderer works this way?).

AndriyKunitsyn• 6 years ago

I don't quite get #8. An exception should be handled where we expect it, depending on a reason for the exception. If something totally unexpected happened, it's better to let the whole app crash than to let it continue running in a corrupted state (unless it's a software for nuclear plants), isn't it?

IggleSniggle• 6 years ago

My intuition is that phoenix-live-view (Elixir streaming web GUI) would be a perfect match for #12 but I haven’t actually used it so what do I know.

29athrowaway• 6 years ago

With Visual Basic you could do these 7 things very, very quickly.

sossles• 6 years ago

True for most, but it wouldn't be so great on the spreadsheet one due to the data structures involved. c# would be my pick.

nixpulvis3• 6 years ago

I decided to try out drawing these GUIs on my new e-ink tablet: https://i.ibb.co/n6Xbd69/5-FDDAD87-F397-4-A0-C-92-B0-1243-B8...

scroot2• 6 years ago

What is sad here is that you are drawing on a computer (and a pretty advanced one at that), and you can draw buttons, but you can't make them "do" anything.

nixpulvis3• 6 years ago

I appreciate how much of the interface was written for this tablet (I can even SSH into it over USB-C), but the OS still seems pretty locked down, which is sad indeed.

mikewarot• 6 years ago

What are reasonable times for completion of each of the tasks? My rusty Lazarus/Free Pascal coding times so far are:

  1) Counter - 10 minutes
  2) TempConv - 30 minutes

Code is up on github: https://github.com/mikewarot/7guis

The only tricky bit I see is expression evaluation in the spreadsheet, the rest is straightforward.

7GUIs

Related Stories