Chunky Bacon: Ruby lernen im Browser

Chunky Bacon ist ein interaktiver Ruby-Kurs, für den man nichts installieren muss. Sie öffnen die Seite, und Ruby läuft direkt im Browser, mit ruby.wasm zu WebAssembly kompiliert. Der Kurs ist auf Deutsch und Englisch, und alles ist Open Source: github.com/Largo/chunkybacon.

Er baut auf derselben Grundlage auf wie meine Ruby Koans im Browser, ist aber ein Kurs statt einer Sammlung von Übungen. Die Lektionen beginnen bei puts "Hallo, Welt!".

So funktioniert es

Die Lektionen sind ein Notizbuch. Text und ausführbare Codezellen wechseln sich ab, eine Zelle führen Sie mit Shift+Enter aus. Alle Zellen einer Lektion teilen sich eine Binding, eine Variable aus der ersten Zelle ist also auch in der fünften noch da. Jede Zelle zeigt den Wert ihres letzten Ausdrucks als => …, puts ist zum Ansehen eines Ergebnisses nicht nötig.

Es gibt 37 Lektionen. Sie führen von der ersten Zeile Ruby über Klassen und Module, IRB und Gems bis zum HTML-Parsen mit Nokogiri, exakter Arithmetik mit BigDecimal, Web-Routing mit Sinatra und Roda, 3D-Grafik und PowerPoint-Folien mit ruby_pptx. Ein Projektteil baut einen kleinen Zeiterfasser.

Gems im Browser

Die meisten Ruby-Kurse hören dort auf, wo die Gems anfangen. Chunky Bacon hat einen Gem-Installer im Browser:

install_gem "chunky_png"

Reine Ruby-Gems werden aus einem Cache oder über einen Same-Origin-Proxy von rubygems.org geholt. Sie werden ins WebAssembly-Dateisystem entpackt, und ihre Ladepfade kommen in $LOAD_PATH. require, require_relative und autoload verhalten sich deshalb wie auf der Festplatte.

Gems mit C-Erweiterung laufen in WebAssembly nicht. Für die wichtigen gibt es Ersatz in reinem Ruby. Nokogiri kommt von meinem nokogiri-pure, einer Portierung von Nokogiri 1.19.4, bei der libxml2, libxslt und gumbo nach Ruby portiert sind. Eine Abhängigkeit von bigdecimal installiert bigdecimal-pure. Andere native Gems scheitern mit einer Erklärung, die das Gem mit dem C-Code nennt. Das ist oft eine Abhängigkeit des gewünschten Gems.

Widgets

Einige Lektionen nutzen Widgets, die unter einer Zelle erscheinen:

• show_irb ist ein echtes IRB-Terminal mit mehrzeiliger Eingabe und originalgetreuen Prompts.
• show_browser ist ein nachgebildetes Browserfenster, das direkt per Rack mit Ihrer Sinatra- oder Roda-App spricht.
• show_image zeigt PNGs, die mit chunky_png erzeugt wurden.
• show_three ist eine WebGL-Bühne für Szenen, die mit three-rb gebaut sind.

Jede Datei, die eine Zelle schreibt, etwa deck.save("chunky.pptx"), erscheint als Download-Link unter der Zelle.

Neben den Lektionen gibt es eine kleine Werkstatt für eigene Programme aus mehreren Dateien, mit require_relative zwischen den Dateien und Eingabe für gets.

Ihr Fortschritt bleibt bei Ihnen

Auf einem Server wird nichts gespeichert. Fortschritt, Code und Werkstattdateien liegen im Browser. Sie können sie als Fortschrittsdatei speichern und später wieder laden, oder in Chrome und Edge über https einen Ordner verbinden, in dem die Werkstattdateien echte Dateien sind. Die Schriften werden selbst ausgeliefert, ein Besuch löst also keine Anfragen an Dritte aus.

Beim ersten Besuch werden rund 32 MB für die Ruby-Laufzeit geladen. Danach liegen sie im Cache.

Der Fuchs

Chunky Bacon, ein eigener Cartoon-Fuchs, feuert Sie an. Der Name ist eine Hommage an why’s (poignant) guide to Ruby von why the lucky stiff. Das Maskottchen ist meine eigene Figur und keine Kopie von _why’s Füchsen.

Das Repository

Das Repository enthält die App in html/, die Lektionstexte in html/lessons.js und einen Testordner. Ein Test prüft, dass in jeder Lektion der Startcode fehlschlägt und die Lösung besteht. Ein weiterer testet den Gem-Installer offline, und Playwright-Tests spielen die Seite von Anfang bis Ende durch. Lokal starten:

docker compose up -d   # läuft auf Port 8011

Der Code steht unter der MIT-Lizenz. Die Lektionstexte und der Fuchs stehen unter CC BY-SA 4.0, beide Lizenzen erlauben kommerzielle Nutzung. Wer Ruby unterrichtet, darf den Kurs anpassen, solange angepasste Versionen unter CC BY-SA bleiben. Komponenten von Dritten behalten ihre eigenen Lizenzen, sie sind im Repository aufgelistet. Issues und Pull Requests sind willkommen.