Chunky Bacon : apprendre Ruby dans le navigateur

Chunky Bacon est un cours Ruby interactif qui ne demande aucune installation. Vous ouvrez la page, et Ruby tourne directement dans votre navigateur, compilé en WebAssembly avec ruby.wasm. Le cours existe en allemand et en anglais, et l’ensemble est open source : github.com/Largo/chunkybacon.

Il repose sur les mêmes fondations que mes Ruby Koans in the Browser, mais c’est un cours plutôt qu’une série d’exercices, avec des leçons qui commencent par puts "Hallo, Welt!".

Comment ça marche

Les leçons sont un notebook. Texte et cellules de code exécutables alternent, et vous exécutez une cellule avec Maj+Entrée. Toutes les cellules d’une leçon partagent un même binding : une variable de la première cellule est encore là dans la cinquième. Chaque cellule affiche la valeur de sa dernière expression sous la forme => …, vous n’avez donc pas besoin de puts pour voir un résultat.

Il y a 37 leçons. Elles vont de la première ligne de Ruby aux classes et modules, à IRB et aux gems, jusqu’au parsing HTML avec Nokogiri, à l’arithmétique exacte avec BigDecimal, au routage web avec Sinatra et Roda, au graphisme 3D et aux présentations PowerPoint créées avec ruby_pptx. Un parcours projet construit un petit outil de saisie du temps.

Des gems dans le navigateur

La plupart des cours Ruby s’arrêtent là où commencent les gems. Chunky Bacon dispose d’un installateur de gems dans le navigateur :

install_gem "chunky_png"

Les gems en pur Ruby sont récupérées depuis un cache ou depuis rubygems.org via un proxy de même origine. Elles sont décompressées sur le système de fichiers WebAssembly, et leurs chemins de chargement sont ajoutés à $LOAD_PATH ; require, require_relative et autoload se comportent donc comme sur disque.

Les gems avec une extension C ne peuvent pas tourner en WebAssembly. Pour les plus importantes, il existe des remplaçants en pur Ruby. Nokogiri vient de mon nokogiri-pure, un portage de Nokogiri 1.19.4 avec libxml2, libxslt et gumbo portés en Ruby. Une dépendance à bigdecimal installe bigdecimal-pure. Les autres gems natives échouent avec une explication qui nomme la gem contenant le code C, souvent une dépendance de celle que vous avez demandée.

Widgets

Certaines leçons utilisent des widgets qui apparaissent sous une cellule :

• show_irb est un vrai terminal IRB avec saisie multiligne et prompts authentiques.
• show_browser est une fausse fenêtre de navigateur qui parle Rack directement à votre application Sinatra ou Roda.
• show_image affiche des PNG créés avec chunky_png.
• show_three est une scène WebGL pour des scènes construites avec three-rb.

Tout fichier écrit par une cellule, par exemple deck.save("chunky.pptx"), apparaît comme lien de téléchargement sous la cellule.

À côté des leçons, un petit atelier accueille vos propres programmes multi-fichiers, avec require_relative entre les fichiers et une saisie pour gets.

Votre progression reste chez vous

Rien n’est stocké sur un serveur. Progression, code et fichiers de l’atelier restent dans votre navigateur. Vous pouvez les enregistrer dans un fichier de progression et le recharger plus tard, ou, dans Chrome et Edge via https, connecter un dossier où les fichiers de l’atelier sont de vrais fichiers. Les polices sont auto-hébergées : une visite n’envoie aucune requête à des tiers.

La première visite télécharge environ 32 Mo pour le runtime Ruby. Ensuite, tout est en cache.

Le renard

Chunky Bacon, un renard de dessin animé original, vous encourage. Le nom est un hommage à why’s (poignant) guide to Ruby de why the lucky stiff. La mascotte est mon propre personnage et non une copie des renards de _why.

Le dépôt

Le dépôt contient l’application dans html/, les textes des leçons dans html/lessons.js et un dossier de tests. Un banc d’essai vérifie que, dans chaque leçon, le code de départ échoue et la solution passe. Un autre teste l’installateur de gems hors ligne, et des tests Playwright exécutent la page de bout en bout. Pour le lancer en local :

docker compose up -d   # serves on port 8011

Le code est sous licence MIT. Les textes des leçons et le renard sont sous CC BY-SA 4.0, et les deux licences autorisent un usage commercial. Si vous enseignez Ruby, vous pouvez adapter le cours, à condition que les versions adaptées restent sous CC BY-SA. Les composants tiers gardent leurs propres licences, listées dans le dépôt. Issues et pull requests sont les bienvenues.