Das Live View Programming (LVP) bietet Ihnen für die Java-Programmierung Views und Skills an. Views sind dazu da, um mediale Inhalte im Web-Browser darzustellen, also Texte, Bilder, Grafiken, Videos, inteaktive Animationen etc. Skills stellen nützliche Fähigkeiten bereit, die man in Kombination mit Views (z.B. zur Dokumentation von Code) gebrauchen kann.
All diese Views und Skills nutzt man programmierend mit Java. Mit jeder Code-Änderung wird die Ansicht im Browser live aktualisiert. Es ist – ehrlich gesagt – ziemlich cool, wenn man die Veränderungen dann im Browser sieht. Probieren Sie die Demo aus!
Wenn Sie das Live View Programming ausprobieren möchten, ist Folgendes zu tun:
- Stellen Sie sicher, dasss Sie mit einem aktuellen JDK (Java Development Kit) arbeiten; es empfiehlt sich das TemurinJDK
- Laden Sie die aktuelle
.jar-Datei herunter, die Ihnen als Asset zum aktuellen Release als Download angeboten wird; die Datei hat den Namenlvp-<Version>.jar - Laden Sie
demo.java-Datei herunter, die Ihnen ebenfalls als Asset zum aktuellen Release als Download angeboten wird.
Sie können die .jar-Datei auch selber generieren, wenn Sie zudem die Versionsverwaltungssoftware Git und das Build-Werkzeug Maven installiert haben:
- Laden Sie das Git-Repository herunter mit
git clone https://github.com/denkspuren/LiveViewProgramming.git - Nach dem Maven-Durchlauf finden Sie die
.jar-Datei imtarget-Verzeichnismvn clean package
Passen Sie den Beispielaufruf an die aktuelle Version an:
java -jar lvp-<Version>.jar --log --watch=demo.java
Wenn Sie die Version lvp-0.5.0.jar heruntergeladen haben, lautet der Aufruf:
java -jar lvp-0.5.0.jar --log --watch=demo.java
| Argument | Alias | Bedeutung | Beispiel |
|---|---|---|---|
| --watch=DATEI | -w | Zu überwachende Datei oder Verzeichnis | --watch=path/to/ --watch=demo.java |
| --pattern=PATTERN | -p | Dateinamensmuster (z.B. *.java) | --pattern=*.java |
| --log[=LEVEL] | -l | Log-Level (Error, Info, Debug) | --log=Debug |
| PORT | Portnummer für den Server | 50001 |
Mehrere Argumente können kombiniert werden, z.B.:
java -jar lvp-<Version>.jar --watch=src --pattern=*.java --log=Debug 50001
Die Datei demo.java dient als einfaches Beispiel für den Einstieg in das Live View Programming (LVP).
Damit LVP funktioniert, muss der Server die Datei beobachten (watchen) – sobald Änderungen erkannt werden, wird der Code automatisch neu ausgeführt und die Ausgabe aktualisiert.
Innerhalb einer void main()-Methode lassen sich interaktive Inhalte erzeugen, indem man Methoden des Clerk-Interfaces verwendet. Diese Inhalte werden anschließend im Browser angezeigt.
Beispiel:
import lvp.Clerk;
void main() {
Clerk.markdown("# Hello World");
}Dieser einfache Aufruf rendert eine Markdown-Überschrift direkt im Browser. Weitere Ausgaben, Grafiken oder Interaktionen können durch zusätzliche Clerk-Methoden, Views oder Skills ergänzt werden.
Error starting server: Address already in use: bind
Wenn der Port blockiert ist, kann unter Windows mit folgendem Befehl die PID des blockierenden Prozesses ermittelt werden:
netstat -a -n -o | findstr ":50001"
Beispielausgabe:
TCP 127.0.0.1:50001 0.0.0.0:0 LISTENING 11840
Die letzte Spalte der Ausgabe zeigt die PID (Prozess-ID) des Prozesses, der den Port verwendet.
Für Linux oder Mac kann folgender Befehl verwendet werden, um den Prozess zu finden, der den Port blockiert:
lsof -i:50001
Die PID kann genutzt werden, um den entsprechenden Prozess im Task-Manager zu finden oder ihn direkt zu beenden. In PowerShell kann der Prozess mit folgendem Befehl beendet werden:
Stop-Process 11840
Um den Prozess unter Linux oder Mac zu beenden, kann folgender Befehl verwendet werden:
kill -9 11840
Dabei ist 11840 durch die ermittelte PID zu ersetzen.
Das Live View Programming versteht sich als ein Angebot, in ein bestehendes Programm Views einzubauen und zu verwenden, die im Web-Browser angezeigt werden. Es macht nicht nur Spaß, wenn man zum Beispiel Grafiken im Browser erzeugen kann -- man sieht auch die Programmierfehler, die einem unterlaufen. Wenn man etwa in der Turtle-View eine Schildkröte mit einem Stift über die Zeichenfläche schickt, zeigt sich unmittelbar, ob man Wiederholungen über Schleifen richtig aufgesetzt oder die Rekursion korrekt umgesetzt hat. Die visuelle Repräsentation gibt über das Auge eine direkte Rückmeldung. Feedback motiviert und hilft beim Verständnis.
Für Fortgeschrittene kommen andere Aspekte hinzu, die von einer Visualisierung profitieren. Zum Beispiel lassen sich Datenstrukturen sehr gut mit Hilfe von Graphen darstellen. Mit der Dot-View können Graphen, die in der DOT-Sprache beschrieben sind, im Browser gerendert werden. Die Dot-View wird beispielsweise von dem ObjectInspector genutzt, einem Skill, den das LVP bereitstellt. Der ObjectInspector bekommt ein Java-Objekt übergeben, reflektiert das Objekt und erstellt ein Objektdiagramm, das sich von diesem Objekt über die Referenzen zu anderen Objekten ergibt. Das Objektdiagramm wird in der Dot-Sprache beschrieben und mit Hilfe der Dot-View zur Anzeige gebracht. Das ist eine sehr hilfreiche visuelle und leicht zugängliche Form der Objekt-Introspektion.
Mit LVP kann man jedoch noch sehr viel mehr machen. Mit der Markdown-View kann man Markdown-Texte im Browser anzeigen. Zusammen mit der Text-Skill können beispielsweise Code-Abschnitte aus einer Java-Datei ausgeschnitten und im Markdown-Text in einem Code-Block eingefügt werden. Man kann also ein Java-Programm erstellen, das seine eigene Dokumentation in Markdown enthält, wobei die in der Dokumentation angezeigten Code-Fragmente immer aktuell sind. Das ist eine besondere Form des Literate Programming.
Das LVP kann man auch dafür einsetzen, um Anwendungen zu schreiben. Die Views werden zusammen mit interaktiven Elementen, wie Buttons, Slidern etc. als graphische Oberfläche verstanden und ausgelegt. Damit lassen sich vor allem Konzeptstudien und Prototypen entwickeln.
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 Webbrowser, 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, wobei Datenplots und andere visuelle und teils interaktive Darstellungen erzeugt und eingebunden werden können. Die Notizbuch-Programmierung ist z.B. in den Datenwissenschaften, im Quantencomputing und in der KI-Entwicklung weit verbreitet.1
Die Notizbuch-Programmierung hat die Besonderheit, dass sie mit der Aktualisierung von Dokumentations- und Code-Zellen ein eigenes Ausführungsmodell über das der verwendeten Programmiersprache legt. Das ist nicht immer wünschenswert und gewollt!
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. Die Browseransicht wird während des Programmierens 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. Auch hier stülpt Clerk der Sprache Clojure auf sehr elegante Weise ein Ausführungsmodell über. Aber davon kann man absehen, und es offenbart sich eine ganz simple Idee: Es bedarf eines einfachen Webservers, den man programmierend ansteuern und erweitern kann, um im Webbrowser Inhalte anzeigen und Interaktionen verarbeiten zu können. Diese Grundidee, die ich als Live View Programming bezeichne, wollte ich so einfach und unkompliziert wie möglich für Java realisieren.
Das Live View Programming belässt die Kontrolle, was wann im Browser wie angezeigt wird, bei der Programmiersprache. Das macht das Live View Programming leicht verstehbar und stellt die Notizbuch-Programmierung nicht in den Mittelpunkt. Man gewinnt Freiheiten, kann aber, wenn man möchte, mit LVP auch Notizbuch-Programme schreiben, nur eben auf etwas andere Art.
Der entstandene Live View Server kann nach seinem Start über ein Interface namens Clerk (engl. für Sachbearbeiter, Büroangestellter, Schreibkraft) angesteuert werden; der Name soll an die Inspirationsquelle erinnern.
Der Live View Server ist denkbar einfach konzipiert. Über das Clerk-Interface können bereitgestellte oder selbst programmierte Views aktiviert und anschließend genutzt werden. Und die Skills bieten zudem nützliche Hilfsmittel an. Auch hier kann man auf bereitgestellte Skills zurückgreifen oder eigene programmieren.
Wenn man Programme in Notizbuch-Form oder als Literate Program dokumentieren möchte, bedarf es nicht mehr als der Markdown-View und der Text-Skill.
Für Anwendungs- oder Darstellungszwecke kann man z.B. die Turtle-View für die Erstellung von Turtle-Grafiken nutzen. Für die Abbildung von Graphen, die mit ihren Kanten und Knoten oft in der Informatik verwendet werden, gibt es die Dot-View. Zum Beispiel nutzt der Skill zur Objekt-Introspektion die Dot-View.
Da das Live View Programming nicht wie die Notizbuch-Programmierung eine bestimmte Art der Dokumentation und des Gebrauchs vorgibt, ist es an einem selbst, die Views und Skills in geeigneter Weise für einen bestimmten Zweck zu verwenden.
Das Live View Programming kommt seit dem Sommersemester 2024 in der Programmierausbildung an der THM zum Einsatz. Ich möchte herausfinden, wie das Live View Programming beim Erlernen von Java eine Hilfe und Unterstützung sein kann und wie sich damit Programmierprojekte für die Studierenden gestalten und durchführen lassen. Das sieht alles sehr vielversprechend aus. Die weitere Entwicklung des Live View Programming läuft seitdem parallel weiter, wann immer es die Zeit erlaubt.
Einige haben schon Beiträge zum LVP geliefert, meist sind es Studierende von mir. Die Contributors sind in dem GitHub-Repo ausgewiesen. Vielen Dank dafür!
Derzeit arbeiten Ramon und ich an einer neuen Architektur für das Live View Programming. Der Umbau soll im Spätsommer 2025 abgeschlossen sein. Dann ist die Möglichkeit zum Mitmachen wieder eröffnet. In der Zwischenzeit müssen wir Sie vertrösten.
- Ramon ist seit den Anfangstagen als Co-Entwickler (💪) an der Umsetzung des Live View Programming beteiligt.
- Nach einem Proof of Concept von mir hat Ramon den Live View Webserver mit Server Sent Events (SSE) gebaut und viele wichtige Beiträge geliefert! Server Sent Events machen die Architektur des Servers sehr einfach und kommen der Idee entgegen, primär Views anzubieten.
- @BjoernLoetters hatte eine alternative Lösung mit Websockets eingebracht, die jedoch deutlich komplizierter ausfällt. Auch wenn der SSE-Webserver "gewonnen" hat, empfehle ich das Studium des Codes von Björn sehr, man kann viel daran über Websockets lernen!
- Mein Prototyp zum Java Live Reloading gab den Anstoss, eine neue Architektur umzusetzen und sich von der JShell als interaktives Medium zu verabschieden.
- Die angestrebte und hier skizzierte neue Architekturbasis ist aus dem Dialog zwischen Ramon und mir hervorgegangen. Sie wird das LVP mit ganz neuen Fähigkeiten ausstatten.
Herzlichst,
Dominikus Herzberg
Footnotes
-
Wer einen Eindruck von der Notizbuch-Programmierung gewinnen möchte, kann sich z.B. meinen Simulator für Quantenschaltungen anschauen. ↩