Moldable Development with Glamorous Toolkit: live session by tangentstream

@tangentstream recently recorded a live session about getting reacquainted with Glamorous Toolkit and Moldable Development. In this sessions he explores GT after a previous try a couple of years back. The session shows in great detail how he finds his way through the environment.

We find these recordings extremely valuable because they show how people find their way through the environment. We also organize sessions with newcomers in which we answer questions and guide (some are recorded on our @gtoolkit channel). We use these inputs both to refine the environment and to find what works and does not work when it comes to teaching Moldable Development at scale.

Summary and notes

07:40: he mentions a complaint about GT but I believe he did not get to formulate it. What is that complaint? :)

08:47: he is looking for a certain page about working with GitHub. He initially finds a page that he is actually not interested in. Later he eventually find the 7' video page.

09:56: he goes side ways to find how to zoom the UI.

11:29: he discovers how spotter categories work, and how one can dive into them.

12:47: he learns the difference between expanding a page in place and spawning it to the right

14:32: a small commercial break with a description about feenk as "a consulting company that helps companies inspect and maintain legacy code ... they fund the elements of this project through consulting".

(A note: indeed, feenk works as a consulting company. Our goal is to help people make systems explainable, regardless of the language, technology or legacy status. To this end, we contribute Glamorous Toolkit and the practice of Moldable Development.)

15:03: he describes the reason for the investigation of GT: interacting with a server over HTTP.

18:28: he imports his old code from two years ago from a local git repo.

29:01: he gets to the BexParser class and remembers how he generated the AST from it.

31:19: he discovers he has an example which passes, but gets a little confused of how to find the source.

This clearly points to an opportunity for improving the user experience. In his case, he clicks on Error and this shows no examples. This happens likely because there is no indicator when pressing on Error. We should show a visual marker when clicking on the example status.

32:04: he clicks on the inspect on the top right of the object inspector and expects to inspect the selection of one view.

32:08: he finds the examples view of a class and click on the result which shows the resulting object but not the source. Still, his objects already have custom views.

32:50: he finds the BDD Graph view. This is a remarkable place for me. It's still clear that he did not yet have a mental model of how the example works, but that view made him smile! "Oh, I did this!" he says. And then he goes on to explain how the Bex language works just based on that view.

I can never get tired of seeing how such a small customization can have such a large impact on how people feel about systems.

38:57: he discovers how to inspect a selection in a view. In this case he uses the triangle between panes.

How do we teach people that it's also possible to double click to force a new pane to appear?

39:47: he eventually spawns the example in a new pane and get to the see the method that produces it.

42:57: as he has two panes now, the index of packages/classes disappeared. After a bit he discovers that a pane can be maximized and if it has a coder it shows that index again.

43:50: "test cases are examples"

45:02: he explores the SmaCC parser.

45:56: Along the way he describes why the SmaCC parser has a Source view in comparison with something like ZnClient.

46:30: He then gives the elevator pitch of the environment: making the creation of custom inspectors cheap.

59:20: He shows an SVG produced by the Bex runtime through GraphViz. That SVG helps describe how the language works.

1:02:21: He then decides to build a DOT parser in SmaCC. To this end he first turns to ChatGPT to ask it to produce a small parser for your snippet.

1:05:48: While ChatGPT produces the output slowly, he searches in GT and find that there already exists a DOT parser in SmaCC. He also describes the Mondrian library as "a little bit like d3 for Smalltalk".

1:08:30: He then look for examples for how to use the DOT parser, but get to generic examples defined in the SmaCCParser superclass which sidetracks the attention.

Note: We should review the showing of and interacting with examples.

1:16:22: Eventually he chooses another path and goes to an example he wrote. This time he finds the example method much faster. He still have difficulties distinguishing between

1:18:52: He finds the AST view showing sources

1:20:55: He builds a DOT file in VS Code and gets a preview.

Note: It's great to some moldability make its way into other environments!

1:21:55: He wants to reproduce the picture in GT. To this end, he opens a Playground but does not know how to read the file contents from a playground. So he asks ChatGPT. He gets to finding how to instantiate a FileReference AbstractFileReference subclass: #FileReference instanceVariableNames: 'filesystem' classVariableNames: '' package: 'FileSystem-Core-Public' . Reading the contents takes longer to figure out, mostly because there is a missing parenthesis. He keeps trying different ways, but eventually settles for splitting the code into simpler statements and intermediate variables.

1:30:15: The file contents are now read. But the inspector shows the Meta tab, and this likely is a little misleading for a newcomer. Ideally, the first thing a newcomer should see would be the contents of the string.

1:30:17: He finds the String view and the confidence reappears in the voice.

1:30:28: The question of how to get the FileReference from a string is still nagging him, and he asks ChatGPT for guidance which leads to asFileReference.

1:32:08: It's interesting how the exploration is not as fine

1:32:21: "What is the shortcut?" for inspection. He searches in Spotter and finds the page describing Basic shortcuts and fings Ctrl+g.

1:35:24: He puts the contents and the parser together in a small script. He gets a SmaCC exception, but it's not clear. He wants to wrap up, but still keeps at it.

1:39:10: He gets an AST from the DOT file.

1:46:34: He lays out the future steps: connect to the Bex server, get the DOT from it, visualize it in GT. Then handle posting to the server and interacting with it, including remote debugging. Essentially creating a custom development environment for Bex.