Mit HTML zur WASM UI
« | 12 Jan 2025 | »Ich liebe WASM, WebAssemblies und Emscripten. Aber wie bzw. was soll ich mit meinen Desktop-Programmen im Web machen?
Antwort: Was man im Browser immer macht: Ein UI
Meine Diagnose steht seit vielen Jahren fest:
Ein “produktives” UI braucht nur folgende Controls: Labels, Textboxes, Buttons, Checkboxes, Comboboxes, Listviews und Treeviews.
Ein Framework, das diese Elemente anbietet, kann alles bereitstellen, was man zum täglichen Arbeiten braucht.
Und tatsächlich stellt HTML die ersten 5 direkt bereit, und sowohl Listviews als auch Treeviews lassen sich sogar mit HTML 4 leicht nachbauen.
Meine Idee ist daher: WASM erzeugt UIs per
Javascript,
welches das DOM einer Seite manipuliert.
Erste Experimente
Der größte Aufwand bei dieser Idee entsteht beim Mapping und der Vermittlung
zwischen der WASM- und der Browser-Welt.
Emscripten lässt uns per emscripten_run_script_string() einen jeden
Javascript Block als C-String zum Browser schicken. Folglich braucht man nur
noch den richtigen Code zusammenbauen der per
document.createElement() neue HTML Element erzeugt und dann Eigenschaften
zuweist.
Die Praxis sieht aber viel komplizierter aus, da wir solche Scripts sowohl aus
dem Browser-UI-Thread, als auch aus einem WASM-Worker senden können müssen.
Im zweiten Fall muss der String am Heap liegen und zum UI-Thread geschickt
werden, welcher dann die Verarbeitung und Deallokierung übernimmt.
Genau hier schleichen sich gerne Bugs und Leaks ein, was oft schwer abzutesten ist.
Fazit
Mein erste Prototyp ist gebaut und beweist, dass man ein Label und eine Textbox per WASM im Browser generieren lassen kann.
Ein nächstes Problem wird nun die “Idee eines Fensters” sein, denn im Browser (und besonders am Smartphone) sind Popup-Fenster heute ein Fremdkörper.
Es zeigt sich also, dass nicht jedes Desktop-Feature leicht übertragbar sein wird.
Trotzdem gefällt mit die Vorstellung, dass man Desktop-UIs “einfach fürs Web kompilieren kann”. Und damit geht diese Analyse in die nächste Runde.