Ich stelle Ihnen hier die Idee des Live View Programming und eine Umsetzung für Java bzw. die JShell vor. Wenn Sie Gefallen an der Idee und dem Projekt finden: Sie können sich gerne an der Entwicklung beteiligen!
Wer in Python programmiert, hat meist schon von der Notizbuch-Programmierung mit Jupyter bzw. JupyterLab gehört oder sie sogar schon genutzt. Man programmiert direkt im Browser, wo eine Notizbuch-Umgebung über einen Server bereitgestellt wird. Das Notizbuch ermöglicht die Kombination von Programmcode und Dokumentation in beliebiger Abfolge, wobei die Programmentwicklung inkrementell und explorativ, d.h. in kleinen Schritten und im Stil einer Erkundung verläuft. Das Notizbuch zeigt Zwischenausgaben der Programmausführung an und Datenplots und andere visuelle und teils interaktive Darstellungen können erzeugt und eingebunden werden. Die Notizbuch-Programmierung ist z.B. in den Datenwissenschaften, im Quantencomputing und in der KI-Entwicklung weit verbreitet.1
Als ich eine besondere Variante der Notizbuch-Programmierung namens Clerk für die Programmiersprache Clojure entdeckte, war es um mich geschehen: Statt im Browser, d.h. im Notizbuch zu programmieren, bleibt man bei Clerk in der gewohnten Entwicklungsumgebung, und die Browseransicht wird währenddessen automatisch und live generiert. Diese Art des Programmierens bezeichnen die Entwickler von Clerk als Moldable Live Programming, mehr Infos dazu finden sich unter https://clerk.vision/.
Clerk für Clojure ist ein mächtiges und eindrucksvolles Werkzeug -- Hut ab vor den Entwicklern. Was mich an diesem Ansatz so fasziniert, ist seine konzeptuelle Eleganz und Einfachkeit: Es genügt ein simpler Webserver, den man programmierend ansteuern und erweitern kann, um im Browser Inhalte, gegebenenfalls sogar interaktive Inhalte anzeigen zu können. Damit kann man einen einfachen Satz an Darstellungsmöglichkeiten für Programmieranfänger:innen bereitstellen. Und erfahrene Programmierer:innen können eigene Erweiterungen für ihre Zwecke entwickeln.
Diese Grundidee wollte ich so einfach und unkompliziert wie möglich für Java und die JShell umsetzen. Ich nenne diese Idee Live View Programming (LVP). Clerk als Namen habe ich beibehalten, allerdings arbeitet das Live View Programming nicht mit einem Clerk (engl. für Sachbearbeiter, Büroangestellter, Schreibkraft), sondern mit vielen Clerks. Jeder Clerk ist für eine spezielle View in einer Live View zuständig. Dazu kommen Skills, die generelle Fähigkeiten beisteuern, die nicht an eine Live View gebunden sind.
Das Live View Programming mit seinen Clerks und Skills ist mit einem sehr schlanken Live View-Webserver umgesetzt. Es braucht nur wenige Mittel, um damit eine Notizbuch-Programmierung umzusetzen. Aber es geht noch viel mehr! Ein Beispiel ist das Literate Programming, das ganz andere Wege bei der Kombination von Code und Dokumentation geht. Ein anderes Beispiel ist ein Clerk für Turtle-Grafiken, was zur Grafik-Programmierung animiert. Ein weiteres Beispiel ist ein Clerk, der eine GUI für das Spiel TicTacToe bereitstellt. In all diesen Beispielen programmiert man wie gewohnt mit Java in der IDE oder mittels JShell-Skripten und einem Editor und instruiert den Browser, was er anzeigen soll. Das ist -- ehrlich gesagt -- ziemlich cool!
Zum Ausprobieren muss das Java JDK 21 bzw. 22 installiert (ich verwende das OpenJDK) und dieses Git-Repository heruntergeladen sein. Wer git installiert hat, kann das wie folgt machen.
git clone https://github.com/denkspuren/LiveViewProgramming.gitDa der Code mit String Templates ein Preview-Feature von Java nutzt, muss die JShell im clerk-Ordner mit der Option --enable-preview aufgerufen werden.
jshell --enable-previewDie Datei lvp.java (kurz für Live View Programming) wird in die JShell geladen und der Server für die Live View gestartet.
jshell> /open lvp.java
jshell> Clerk.view()
Open http://localhost:50001 in your browser
$38 ==> LiveView@2d38eb89
Öffnen Sie Ihren Browser (bei mir ist es Chrome) mit dieser Webadresse. Im Browser kann man nun mitverfolgen, was passiert, wenn man die Live View nutzt.
Probieren wir einen einfachen Begrüßungstext im Markdown-Format:
jshell> Clerk.markdown("Hello, _this_ is **Live View Programming** in action!")Im Browser ist "Hello, this is Live View Programming in action!" zu sehen. 😀
Als nächstes erzeugen wir eine kleine Turtle-Grafik. Die Idee, eine Grafik mit einer Schildkröte (turtle) zu programmieren, hat die Programmiersprache Logo in die Welt getragen. Mehr dazu erfahren Sie im nächsten Abschnitt.
jshell> Turtle turtle = new Turtle(200, 200)
turtle ==> Turtle@3b764bceEin Kästchen, die Zeichenfläche, von 200 x 200 Punkten ist im Browser zu sehen. In der Mitte befindet sich eine unsichtbare Schildkröte, die nach Osten ausgerichtet und mit einem Zeichenstift ausgestattet ist und die wir mit ein paar Anweisungen so umherschicken, dass schrittweise ein Quadrat entsteht.
Geben Sie die folgende Anweisung vier Mal für die Schildkröte ein.
turtle.forward(80).left(90);
turtle.forward(80).left(90);
turtle.forward(80).left(90);
turtle.forward(80).left(90);Sie sollten nun ein Quadrat im Zeichenfeld sehen. Die Schildkröte blickt am Schluss ihres Wegs wieder gen Osten. Ergänzen wir einen "Kreis", den wir aus 12 Strichen zusammensetzen.
for (int i = 1; i <= 12; i++)
turtle.right(360.0 / 12).forward(20);Links unten ist nun außerdem ein kantiger "Kreis" zu sehen. 😊
Das ist also die Idee des Live View Programming: Man kann mit Java-Code sichtbare Effekte in der Browseransicht erzeugen.
Es ist zudem möglich, Views interaktiv zu koppeln. In der Animation sieht man, wie eine Turtle-Grafik mit einem Slider verbunden ist.
Das wirkt wie Spielerei. Ohne Frage, Programmieren darf Spaß machen -- und das wird befeuert, wenn man dabei etwas sehen und mit einem optischen Feedback interagieren kann. Die Möglichkeiten des Live View Programming gehen jedoch weit über die "Spielerei" hinaus.
Mit dem Live View Programming kann man -- ganz im Sinne des Literate Programming -- eine Live View zur Dokumentation von Java-Code erzeugen; und das alles aus der Java-Datei heraus, in der man das Programm geschrieben hat. Code und Dokumentation können miteinander kombiniert werden.
In dem git-Repository findet sich die Datei logo.java. Mit der folgenden Eingabe erzeugen Sie im Browser die Dokumentation, die Sie in die Logo-Programmierung mit Clerk einführt.
Löschen Sie die Inhalte in der aktuellen Live View und führen Sie logo.java aus.
jshell> Clerk.clear()
jshell> /o logo.java // /o ist Kurzform von /openIm Browser sieht das Ergebnis so aus (Sie sehen hier nur einen Teil der Seite):
Ich finde das Ergebnis ziemlich eindrucksvoll, mich begeistert das. Die Bilder werden durch die Abarbeitung in der JShell erst erzeugt. Mit der Skill namens File können Codeauszüge an geeigneten Stellen in die Dokumentation gesetzt werden. Der Code in logo.java erklärt sich durch die hinzugefügte Dokumentation, den darin enthaltenen Code und dessen Ausführung sozusagen von selbst.
Um das besser zu verstehen, schauen Sie sich den Code in der Datei logo.java mit einem Editor Ihrer Wahl an.
Das Java-Preview-Feature der String-Templates wird offenbar noch nicht in jedem Editor (oder von einer entsprechenden Erweiterung) richtig dargestellt. Das Syntax-Highlighting kommt durch die String-Templates möglicherweise durcheinander und der Java-Code wird eventuell nicht sehr leserlich angezeigt.
Wenn Sie sich die Datei lvp.java anschauen, werden Sie feststellen, dass nicht viel Code erforderlich ist, um eine Infrastruktur für das Live View Programming aufzusetzen. In der Datei befindet sich im Wesentlichen eine Klasse und ein Interface:
- Die Klasse
LiveViewsetzt mit der MethodeonPorteinen Server auf, der eine Live View im Browser bedient. Diese Live View zeigt dieindex.htmlaus demweb-Verzeichnis an und lädt das notwendige Stückchen Client-Codescript.js.
Der Webserver nutzt Server Sent Events (SSE) als Mittel, um die Live View im Browser beliebig zu erweitern. Man kann mit der Methode sendServerEvent entweder HTML-Code, <script>-Tags oder JavaScript-Code senden oder JavaScript-Bibliotheken laden.
-
Das Interface
Clerkbietet ein paar statische Methode an, um die Programmierung von Clerks zu erleichtern. Dazu gehören die folgenden Wrapper für die MethodesendServerEventaus derLiveView:writeschickt HTML-Code über eine View an den Browser, wo der HTML-Code gerendert wirdcallschickt JavaScript-Code über eine View zur Ausführung an den Browserscriptschickt JavaScript-Code über eine View an den Browser, der ihn in ein<script>-Tag einpackt, im DOM des Browsers hinzufügt und ausführtloadfordert den Browser über eine View zum Laden einer JavaScript-Bibliothek auf. Eine JavaScript-Bibliothek wird nur genau einmal pro View geladenclearentfernt alle HTML-Tags im DOM, die mitid="events"ausgewiesen sind, d.h. es werden allewrite-Einträge gelöscht.
Interessant ist noch die statische Methode markdown in Clerk, mit der direkt Markdown-Text an den Browser der Standard-View (das ist die View zum default Port 50001) geschickt und gerendet wird.
Im Verzeichnis clerks finden sich ein paar Clerks, um Views zu erzeugen und zu bedienen. Darunter ist ein Clerk für Markdown zur Nutzung der Markdown-Notation, ein Clerk für Turtle-Grafiken und ein Clerk, der eine GUI für das Spiel Tic-Tac-Toe realisiert.
Clerks sind immer mit einer Live View assoziiert und stellen zudem den browser-seitig benötigten Code zur Verfügung, um die View zu erzeugen. Als Programmierkonvention implementiert ein Clerk stets das Interface Clerk.
Skills sind im Verzeichnis skills zu finden. Skills haben nichts mit einer View zu tun, sie stellen spezielle oder generelle Fähigkeiten zur Verfügung, die man beim Live View Programming oder im Zusammenspiel mit Clerks gebrauchen kann. File ist z.B. ein wichtiger Skill, um Text oder Code aus einer Datei "ausschneiden" zu können, was elementar für die Code-Dokumentation ist.
Solange einzelne Clerks und Skills nicht weiter dokumentiert sind (das wird noch kommen), studieren Sie am besten den Code der Clerks und Skills. In der Datei
logo.javasehen Sie ein Beispiel der Verwendung dieser wenigen grundlegenden Fähigkeiten. Das Beispiel zeigt, wie Sie mit Java-Code eine Dokumentation des eigenen Programms erstellen können, das zudem beispielhaft seine Verwendung erläutert.
Meine Vision für das Live View Programming ist zunächst, dieses Werkzeug in der Programmierungsbildung meiner Informatik-Studierenden an der THM einzusetzen.
Zum einen scheint mir Clerk für Programmier-Anfänger:innen geeignet zu sein: Es macht vermutlich mehr Sinn und Spaß, wenn man z.B. Schleifen-Konstrukte erlernt, indem man Logo-Zeichnungen generiert und am Bild erkennen kann, ob man die Schleife korrekt umgesetzt hat. Gerne würde ich das Live View Programming um die Möglichkeit erweitern, automatisiert ein Objektdiagramm zu einer gegebenen Objektreferenz zu erzeugen -- das geht mit dem Java-Reflection-API und z.B. Graphviz-Online; @RamonDevPrivate hat das bereits mit diesem Gist vorbereitet. Das Live View Programming kann also dabei helfen, den zur Laufzeit entstandenen Graphen aus Objekten und Referenzen zu verstehen. Mit solchen Erweiterungen können Clerks und Skills Teil der Entwicklungswerkzeuge beim Programmieren werden.
Zum anderen können auch erfahrene Entwickler:innen mit dem Live View Programming eine anschauliche und verständliche Dokumentation zu ihrem Code erstellen. Wenn visuelle Anteile das unterstützen können, umso besser. Man kann das Live View Programming aber ebenso für Experimente, exploratives Programmieren und Notebook-basierte Programmierung verwenden. Sicher gibt es noch viele andere, denkbare Anwendungsszenarien.
Und ich habe noch eine Vision: Dass diese Umsetzung für Java als Blaupause für die Realisierung des Live View Programming in anderen Programmiersprachen dient. Die Idee ist so einfach, dass man sie in ein, zwei Tagen portieren kann für die Lieblingssprache der Wahl.
Sie sind gerne willkommen, sich an der Entwicklung des Live View Programming with Java's JShell zu beteiligen. Schreiben Sie neue Clerks und Skills! Oder entwickeln Sie am Kern der Live View mit.
Ein paar Beiträge hat es schon gegeben:
-
Nach einem Proof of Concept (hier) ist mit der Hilfe und Unterstützung von @RamonDevPrivate (mittlerweile Co-Entwickler in diesem Repo 💪) eine erste Umsetzung eines Webservers mit Server Sent Events (SSE) entstanden! Von Ramon stammt auch der TicTacToe-Clerk.
-
@BjoernLoetters war von der Idee des Live View Programming ebenso angefixt wie ich und lieferte spontan einen beeindruckenden Server-Entwurf mit Websockets bei. Ich habe mich vorerst dennoch für eine einfachere Lösung entschieden, einen Webserver mit Server Sent Events (SSE). Für Interessierte ist der Code von Björn im Branch websockets hinterlegt. Ich empfehle das Studium seines Codes sehr, man kann viel daran über Websockets lernen!
-
Vielen Dank an @ginschel für einen ersten CSS-Vorschlag!
Wenn Sie Lust haben, beteiligen Sie sich!
Herzlichst,
Dominikus Herzberg
Footnotes
-
Wer einen Eindruck von der Notizbuch-Programmierung gewinnen möchte, kann sich z.B. meinen Simulator für Quantenschaltungen anschauen. ↩