Chunky Bacon: imparare Ruby nel browser
Chunky Bacon è un corso interattivo di Ruby che non richiede alcuna installazione. Si apre la pagina e Ruby gira direttamente nel browser, compilato in WebAssembly con ruby.wasm. Il corso è in tedesco e in inglese, e tutto è open source: github.com/Largo/chunkybacon.
Si basa sulle stesse fondamenta dei miei Ruby Koans in the Browser, ma è un vero corso e non una raccolta di esercizi, con lezioni che partono da puts "Hallo, Welt!".
Come funziona
Le lezioni sono un notebook. Testo e celle di codice eseguibili si alternano, e una cella si esegue con Shift+Enter. Tutte le celle di una lezione condividono lo stesso binding, quindi una variabile della prima cella è ancora disponibile nella quinta. Ogni cella mostra il valore della sua ultima espressione come => …, perciò non serve puts per vedere un risultato.
Le lezioni sono 37. Vanno dalla prima riga di Ruby a classi e moduli, IRB e gem, fino al parsing HTML con Nokogiri, all’aritmetica esatta con BigDecimal, al routing web con Sinatra e Roda, alla grafica 3D e alle presentazioni PowerPoint create con ruby_pptx. Un percorso a progetto costruisce un piccolo strumento di rilevazione delle ore.
Gem nel browser
La maggior parte dei corsi di Ruby si ferma dove iniziano le gem. Chunky Bacon ha un installatore di gem che funziona nel browser:
install_gem "chunky_png"
Le gem in puro Ruby vengono scaricate da una cache oppure da rubygems.org tramite un proxy sulla stessa origine. Vengono estratte nel filesystem WebAssembly e i loro percorsi di caricamento finiscono in $LOAD_PATH, così require, require_relative e autoload si comportano come su disco.
Le gem con un’estensione in C non possono girare in WebAssembly. Per quelle importanti esistono sostituti in puro Ruby. Nokogiri arriva dal mio nokogiri-pure, un port di Nokogiri 1.19.4 in cui libxml2, libxslt e gumbo sono stati portati in Ruby. Una dipendenza da bigdecimal installa bigdecimal-pure. Le altre gem native falliscono con una spiegazione che indica la gem contenente il codice C, spesso una dipendenza di quella richiesta.
Widget
Alcune lezioni usano widget che compaiono sotto una cella:
show_irbè un vero terminale IRB con input su più righe e prompt autentici.show_browserè una finta finestra del browser che parla Rack direttamente con la vostra app Sinatra o Roda.show_imagemostra i PNG creati con chunky_png.show_threeè uno stage WebGL per scene costruite con three-rb.
Ogni file scritto da una cella, per esempio deck.save("chunky.pptx"), appare come link di download sotto la cella.
Accanto alle lezioni c’è un piccolo laboratorio per i vostri programmi composti da più file, con require_relative tra i file e input per gets.
I vostri progressi restano con voi
Nulla viene salvato su un server. Progressi, codice e file del laboratorio restano nel vostro browser. Potete salvarli in un file di avanzamento e ricaricarlo più tardi oppure, in Chrome ed Edge via https, collegare una cartella in cui i file del laboratorio sono file veri. I font sono ospitati in proprio, quindi una visita non genera richieste verso terzi.
La prima visita scarica circa 32 MB per il runtime di Ruby. In seguito resta in cache.
La volpe
Chunky Bacon, una volpe originale in stile cartone animato, vi fa il tifo. Il nome è un omaggio a why’s (poignant) guide to Ruby di why the lucky stiff. La mascotte è un mio personaggio e non una copia delle volpi di _why.
Il repository
Il repository contiene l’app in html/, i testi delle lezioni in html/lessons.js e una cartella di test. Un harness verifica che in ogni lezione il codice iniziale fallisca e la soluzione passi. Un altro testa l’installatore di gem offline, e i test Playwright eseguono la pagina end-to-end. Per avviarlo in locale:
docker compose up -d # gira sulla porta 8011
Il codice è sotto licenza MIT. I testi delle lezioni e la volpe sono CC BY-SA 4.0, ed entrambe le licenze consentono l’uso commerciale. Se insegnate Ruby, potete adattare il corso, a condizione che le versioni adattate restino sotto CC BY-SA. I componenti di terzi mantengono le proprie licenze, elencate nel repository. Issue e pull request sono benvenute.