Robin Schreiber, Robert Krahn, Daniel H. H. Ingalls, Robert Hirschfeld

• Defining Graphical User Interfaces (GUIs) through functional abstractions can reduce the complexity that arises from mutable abstractions. Recent examples, such as Facebook's React GUI framework have shown, how modelling the view as a functional projection from the application state to a visual representation can reduce the number of interacting objects and thus help to improve the reliabiliy of the system. This however comes at the price of a more rigid, functional framework where programmers are forced to express visual entities with functional abstractions, detached from the way one intuitively thinks about the physical world. In contrast to that, the GUI Framework Morphic allows interactions in the graphical domain, such as grabbing, dragging or resizing of elements to evolve an application at runtime, providing liveness and directness in the development workflow. Modelling each visual entity through mutable abstractions however makes it difficult to ensure correctness when GUIs start to grow more complex. Furthermore, byDefining Graphical User Interfaces (GUIs) through functional abstractions can reduce the complexity that arises from mutable abstractions. Recent examples, such as Facebook's React GUI framework have shown, how modelling the view as a functional projection from the application state to a visual representation can reduce the number of interacting objects and thus help to improve the reliabiliy of the system. This however comes at the price of a more rigid, functional framework where programmers are forced to express visual entities with functional abstractions, detached from the way one intuitively thinks about the physical world. In contrast to that, the GUI Framework Morphic allows interactions in the graphical domain, such as grabbing, dragging or resizing of elements to evolve an application at runtime, providing liveness and directness in the development workflow. Modelling each visual entity through mutable abstractions however makes it difficult to ensure correctness when GUIs start to grow more complex. Furthermore, by evolving morphs at runtime through direct manipulation we diverge more and more from the symbolic description that corresponds to the morph. Given that both of these approaches have their merits and problems, is there a way to combine them in a meaningful way that preserves their respective benefits? As a solution for this problem, we propose to lift Morphic's concept of direct manipulation from the mutation of state to the transformation of source code. In particular, we will explore the design, implementation and integration of a bidirectional mapping between the graphical representation and a functional and declarative symbolic description of a graphical user interface within a self hosted development environment. We will present Transmorphic, a functional take on the Morphic GUI Framework, where the visual and structural properties of morphs are defined in a purely functional, declarative fashion. In Transmorphic, the developer is able to assemble different morphs at runtime through direct manipulation which is automatically translated into changes in the code of the application. In this way, the comprehensiveness and predictability of direct manipulation can be used in the context of a purely functional GUI, while the effects of the manipulation are reflected in a medium that is always in reach for the programmer and can even be used to incorporate the source transformations into the source files of the application.…
• Das Definieren von graphischen Benutzeroberflächen mittels funktionaler Abstraktionen, kann die Komplexität der Verwaltung des Zustandes der Anwendung erheblich reduzieren. Aktuelle Beispiele, wie Facebook's Framework *React*, zeigen auf, wie das modellieren der visuellen Schnittstelle als eine funktionale Projektion vom Zustand der Anwendung zur graphischen Repräsentation, die Anzahl der agierenden Objekte erheblich reduzieren und so die Verlässlichkeit des Systems erhöhen kann. Der Preis für die so erreichte Stabilität, ist eine relativ statische graphische Repräsentation, die sich zur Laufzeit nicht dynamisch anpassen lässt und in der jede visuelle Entität nur mittles funktionaler Abstraktionen beschrieben werden kann, was nicht unserem intuitiven Verständnis der Welt entspricht. Im Gegensatz dazu, erlaubt das Rahmenwerk Morphic mittles Interaktionen wie Ziehen, Greifen oder Skalieren von visuellen Elementen, die grahische Darstellung der Anwendung zur Laufzeit in einer unmittelbaren ("live") und direkten Art und Weise weiterDas Definieren von graphischen Benutzeroberflächen mittels funktionaler Abstraktionen, kann die Komplexität der Verwaltung des Zustandes der Anwendung erheblich reduzieren. Aktuelle Beispiele, wie Facebook's Framework *React*, zeigen auf, wie das modellieren der visuellen Schnittstelle als eine funktionale Projektion vom Zustand der Anwendung zur graphischen Repräsentation, die Anzahl der agierenden Objekte erheblich reduzieren und so die Verlässlichkeit des Systems erhöhen kann. Der Preis für die so erreichte Stabilität, ist eine relativ statische graphische Repräsentation, die sich zur Laufzeit nicht dynamisch anpassen lässt und in der jede visuelle Entität nur mittles funktionaler Abstraktionen beschrieben werden kann, was nicht unserem intuitiven Verständnis der Welt entspricht. Im Gegensatz dazu, erlaubt das Rahmenwerk Morphic mittles Interaktionen wie Ziehen, Greifen oder Skalieren von visuellen Elementen, die grahische Darstellung der Anwendung zur Laufzeit in einer unmittelbaren ("live") und direkten Art und Weise weiter zu entwickeln. Um diese Flexibilität zu erreichen, modelliert Morphic allerdings jedes graphische Objekt mittels veränderlichem Zustand, was das Garantieren der Fehlerfreiheit von graphischen Oberfläche, insbesondere bei sehr komplexen Schnittstellen, deutlich erschwehrt. Hinzu kommt, dass die dynamischen Anpassungen zur Laufzeit dazu führen, dass sich die Oberfläche mehr und mehr von ihrer ursprünglichen symbolischen Definition entfernt, da Morphic von selbst die Änderungen in der Laufzeit nicht im Quellcode reflektieren kann. Die Frage ist also ob es eine Kombination beider Ansätze gibt, welche es vermag die Vorteile zu erhalten und Nachteile wenn möglich auszugleichen. Als Lösung für dieses Problem schlagen wir vor das Konzept der direkten Manipulation aus Morphic auf Transformationen im Quellcode zu übertragen. Hierfür werden wir das Design, die Implementierung und Integration einer bidirektionalen Abbildung zwischen graphischer Darstellung und einer funktionalen, deklarativen symbolischen Beschreibung in einer selbsterhaltenden Entwicklungsumgebung erörtern. Wir werden Transmorphic vorstellen, eine funktionale Variante des Morphic Frameworks, in der visuelle und strukturelle Eigenschaften in einer strikt funktionalen und daher deklarativen Art und Weise definiert werden. Innerhalb von Transmorphic hat der Entwickler die Möglichkeit verschieden Morphs zur Laufzeit mittels direkter Manipulation zusammenzusetzen, was direkt zu Änderungen im Quellcode der Anwendung übersetzt wird. Auf diese Weise kann die verständliche und nachvollziehbare direkte Interaktion aus Morphic, im Kontext einer vollständig funktional beschriebenen graphischen Benutzeroberfläche verwendet werden.…