Visual Abstractions for Framework, Tool and Language Design (Wintersemester 2021/2022)

Dozent: Prof. Dr. Robert Hirschfeld (Software-Architekturen) , Tom Beckmann (Software-Architekturen) , Marcel Taeumel (Software-Architekturen) , Dr. Jens Lincke (Software-Architekturen) , Stefan Ramson (Software-Architekturen) , Patrick Rein (Software-Architekturen) , Toni Mattis (Software-Architekturen) , Fabio Niephaus (Software-Architekturen)

Allgemeine Information

• Semesterwochenstunden: 4
• ECTS: 6
• Benotet: Ja
• Einschreibefrist: 01.10.2021 - 31.10.2021
• Lehrform: Projekt / Seminar
• Belegungsart: Wahlpflichtmodul
• Lehrsprache: Deutsch

Studiengänge, Modulgruppen & Module

Beschreibung

Today, many tools exist that help visualize or investigate code and its runtime data. However, most often these tools are only loosely connected to the source code. In this seminar, students will explore benefits of a tight integration between user interface elements and source code for explorability, approachability, and expressiveness through use of what we call visual abstractions. We expect that complex APIs will become both easier to understand for beginners and easier to use by experts by offering visual structures that go beyond textual source code. These APIs could be from domains such as visualization, machine learning, sound synthesis, or others.

Figure 1. A unit test from a card game implementation. Cards are replaced by visual representations. Watches are placed to inspect the game board at two points during the test, allowing the programmer to compare visually between the actual state of the board and the expected state as defined in the test.

Visual abstractions take a similar role as macros in a language such as C. Macros allow extending programming languages without requiring changes to the language's implementation and instead generate code during compilation. Similarly, visual abstractions stand in the place of a section of the source and allow changing the code through a user interface. For example, code that declares a state machine may be replaced by an editable visualization of that state machine. Visual abstractions are part of a prototypical research development environment called Sandblocks [1], which integrates various programming languages through the TreeSitter project [2, 4] that is, for example, also used by Github for language integration.

Figure 2. Left: a visual statemachine editor. Note that it is embedded within code and also contains code nested inside of it (for transitions and triggers). Right: the textual description of the same statemachine in code. Visual abstractions match against code expressions such as the one on the right and replace these with visualizations such as the one on the left.

Students will either pick from a list of suggested APIs that could benefit from visual abstractions and develop an appropriate implementation or suggest their own topics (language + API + opportunities for visual abstractions). Suggested topics will be presented during the first week of lectures, students’ own suggestions can be handed in during the following week. The host language of the implementation will be Squeak/Smalltalk, but a variety of target languages [3] for visual abstractions is supported.

Figure 3. On the right, a code snippet for a drawing method is shown, with a color picker opened on a parameter.. On the left, a block palette is providing a look into the drawing API with pre-filled values, such that users can drag-and-drop methods onto their code.

For example, APIs that could support visual abstractions may include the following:

• python/matplotlib: a visual toolbox for configuring charts (e.g. “add subplot”, “scatter points”)
• regular expressions: inline debugging tools and explanation similar to regex101.com
• smalltalk/baseline: a visual configuration tool for baseline classes
• js/d3: a visual toolbox for configuring d3 graphics
• expressjs/go/…: primitives accessible via drag-and-drop for common web server tasks; live visualization of requests hitting routes during development, …
• … 

It is expected that students independently explore possible opportunities of the visual abstraction concept. All participants will meet every two weeks for a short, informal presentation of progress within the seminar. At the end of the semester, students will present their results in a final presentation.

Presentation Slides: https://www.hpi.uni-potsdam.de/hirschfeld/cloud/s/GJfFLzfYWAsA7rX/download/visual-abstractions-2021.pdf

[1] https://github.com/tom95/sandblocks
[2] https://tree-sitter.github.io/tree-sitter/
[3] https://tree-sitter.github.io/tree-sitter/#available-parsers
[4] https://tree-sitter.github.io/tree-sitter/playground

Voraussetzungen

• Good general programming skills
• Experience with a framework/library that can map to visual abstractions or willingness to invest learning the API in one of the proposals

Leistungserfassung

Grading will take place based on the work on one of the projects. To complete the course, the following requirements are to be fulfilled:

To obtain the six credits, the following requirements are to be fulfilled:

• Work on a project topic, regular demonstration of progress, quality of code (50%)
• Final presentation of results (30%)
• Documentation of topic, its background, results, and software design decisions (20%)

One week before the final presentation, students will submit a draft of their current slides for feedback. One day before the final presentation, students will submit

• sources (e.g. PPTX) of the presentation slides,
• a PDF version of the presentation,
• current state of the project’s source code, and
• a short screencast (mp4)

All source code created during this seminar will be licenced under the MIT license.

Termine

Note: there will be no recordings of digital meetings. Also see: Code of Conduct

Presentation of Topic Proposals / Kick-Off

• 28th October 2021, 13.30
• Hybrid: A1.1 / https://uni-potsdam.zoom.us/j/63403565023 (PW: 45249765)

Submission of own topics, choice of topics by students

• Until 31st October 2021,  23:59 (E-Mail)

Assignment of topics

• 3rd November 2021 (E-Mail / Slack)

Presentation slides (same link as above): https://www.hpi.uni-potsdam.de/hirschfeld/cloud/s/GJfFLzfYWAsA7rX/download/visual-abstractions-2021.pdf

Zurück