← Articles

clogs : des programmes Shoes sur CRuby standard

Shoes est la petite boîte à outils GUI que _why the lucky stiff a créée pour Ruby. Au lieu de classes de widgets et de gestionnaires de mise en page, vous décrivez une fenêtre en quelques lignes de Ruby : des stacks et des flows pour la mise en page, para pour le texte, button avec un bloc pour ce qui se passe au clic. Hackety Hack, un kit de démarrage en programmation avec un éditeur et des outils d’aide, a été construit dessus.

Hackety Hack a cessé de fonctionner en même temps que Shoes. Shoes 4, une réécriture sur JRuby, n’est jamais allé assez loin pour le faire tourner. Je voulais le revoir fonctionner ; dans mon fork sur github.com/Largo/hacketyhack, j’ai donc pris une autre voie et écrit une implémentation de Shoes qui tourne sur le Ruby que vous avez déjà. Cette implémentation, c’est clogs : Shoes, porté par-dessus libui.

Bonjour, Shoes

Voici l’exemple du README :

require "clogs"

Shoes.app(title: "Hello", width: 400, height: 200) do
  para "Hello, ", strong("Shoes"), "!", size: :title
  button("Push me") { @note.replace "Aha! Clicked." }
  @note = para "Nothing pushed so far"
end

Enregistrez-le sous hello.rb, puis :

gem install clogs
ruby hello.rb

La gem nécessite Ruby 3.2 ou plus récent. Elle dépend de lacci, de libui (libui-ng avec des bibliothèques partagées précompilées pour Linux, macOS et Windows) et de chunky_png, car libui ne sait pas charger un fichier image par elle-même. Pas de compilateur, pas de moteur de navigateur, pas de JVM.

Comment tout s’imbrique

clogs ne réimplémente pas le DSL Shoes. Cette partie vient de Lacci, la moitié de Scarpe indépendante de l’affichage. Lacci gère le DSL, l’arbre des drawables et les événements. clogs est un display service Lacci : il s’occupe de la mise en page, du dessin, des widgets et des entrées, et libui-ng fournit une fenêtre native et un canevas.

your Shoes program
        |
      Lacci          the Shoes DSL, drawable tree, events
        |
      Clogs          layout, painting, widgets, input
        |
      libui          one native window, one canvas

Comme il se branche sur Lacci, vous pouvez aussi le sélectionner explicitement. C’est pratique lorsque le même programme doit aussi tourner avec le backend webview de Scarpe :

SCARPE_DISPLAY_SERVICE=clogs ruby my_app.rb

Une décision de conception mérite d’être connue : clogs dessine tout le document Shoes dans un seul canevas libui, widgets compris. libui ne permet pas de placer un contrôle natif à une position arbitraire, et c’est exactement ce dont Shoes a besoin. La contrepartie : les boutons et champs de texte ressemblent à des widgets Shoes plutôt qu’à des widgets natifs, et ils ne bénéficient ni de l’accessibilité de la plateforme ni des méthodes de saisie. Les contrôles natifs de libui restent utilisés là où ils conviennent : menus, boîtes de message, sélecteurs de fichiers et dialogues ask/confirm.

Ce qui fonctionne

Selon le README : mise en page, texte, liens, drawables graphiques, images, widgets, événements, animation et dialogues. La vidéo, le son, le flou et les fenêtres multiples ne fonctionnent pas. La matrice fonctionnalité par fonctionnalité dans libui_shoes_coverage.md indique ce qui a été testé, et sur quoi : libui-ng de la gem libui 0.2.4 sous Linux avec Ruby 3.3.

La gem contient examples/kitchen_sink.rb, un tour d’horizon de ce que clogs sait dessiner. En voici un extrait raccourci :

require "clogs"

Shoes.app(title: "Clogs kitchen sink", width: 640, height: 620) do
  stack(width: 620, height: 170) do
    background rgb(255, 255, 255)
    border rgb(200, 200, 210), strokewidth: 2

    fill rgb(220, 60, 60)
    stroke rgb(60, 0, 0)
    rect 20, 20, 120, 60

    fill rgb(60, 120, 220)
    oval 170, 20, 100, 60

    nostroke
    fill rgb(250, 200, 40)
    star 320, 20, 6, 34, 16
  end
end

Deux variables d’environnement rendent les applications Shoes scriptables. C’est ainsi que clogs se teste lui-même, et vous pouvez vous en servir pour faire une capture d’écran d’une application en CI :

CLOGS_EXIT_AFTER_MS=800 CLOGS_SCREENSHOT=shot.png ruby hello.rb

Depuis la 0.1.0

La gem sur RubyGems est la version 0.1.0 d’août 2026. Le travail a continué depuis dans le dossier clogs/ du dépôt :

Et Hackety Hack ?

L’IDE fonctionne de nouveau. Dans le dépôt, ruby hacketyhack.rb ouvre Hackety Hack sur clogs : l’animation d’accueil, les onglets latéraux et l’onglet Home s’affichent tous. Onze des douze exemples Shoes d’origine tournent sans modification. Les correctifs de compatibilité Shoes 3 dont Hackety Hack a besoin se trouvent dans l’arborescence de Hackety Hack (lib/compat/shoes3.rb), pas dans la gem.

Il reste des aspérités. L’éditeur accepte désormais du texte mais n’est pas terminé, et les fonctions en ligne pointent vers un serveur qui n’existe plus.

Si vous avez un vieux programme Shoes qui traîne, essayez-le et dites-moi ce qui casse. Le code est sous licence MIT et se trouve sur github.com/Largo/hacketyhack. Et si la version navigateur a éveillé votre curiosité, j’ai aussi écrit sur jsg, un petit outil pour les projets ruby.wasm.