En raison de l'arrivée de l'assemblage Web , il y a eu quelques articles expliquant de manière très complexe comment y parvenir pour différentes technologies. Je crois qu'en 2023, il existe des moyens plus simples de mettre en œuvre la même chose avec moins d'effort

De quoi avons-nous besoin pour permettre au navigateur d'exécuter notre code ruby ​​?

Bref, il y a deux façons :

• Utiliser un fichier ruby ​​comme base et compiler ce fichier pour en générer le format wasm (WebAssembly). C'est la manière la plus propre car vous générez les instructions sans aucune couche au milieu. Le problème est que vous devez installer le compilateur wasm et comprendre un peu plus ce qui se passe. Nous n'utiliserons pas cette option dans cet article.
• Utiliser un package javascript capable de comprendre le code ruby ​​dans le navigateur. C'est le moyen le plus simple car nous n'avons rien à installer. Donc, parce que l'idée est de montrer que c'est faisable, nous allons l'utiliser de cette façon.

Exemple de base

Tout d'abord, pour créer notre exemple, nous allons créer un fichier appelé index.html avec la structure HTML de base :

<html>
  <head>
    <title>RubyOnTheBrowser</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
  </body>
</html>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser.script.iife.js"></script>

<script type="text/ruby">
  puts "This is ruby in the browser!"
</script>

Exemple d'événement

Maintenant, nous allons exécuter quelque chose avec des événements. Donc, nous allons créer un bouton et nous chargerons une image après avoir cliqué dessus. Donc, pour y parvenir, vous devez ajouter le code suivant :

<body>
    <button id="my_btn">Click!</button>
    <img id="load-image" width="40%">
  </body>  
  <script type="text/ruby">
    require "js"
    puts "This is ruby in the browser!"
    document = JS.global[:document]
    load_image = document.getElementById("load-image")
    button = document.getElementById("my_btn")
    button.addEventListener "click" do |e|
      load_image[:src] = "https://upload.wikimedia.org/wikipedia/commons/f/f1/Ruby_logo.png"
    end
  </script>

Exemple complet

Voici à quoi votre exemple devrait ressembler :

<html>
  <head>
    <title>RailsWasm</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser.script.iife.js"></script>    
  </head>

  <body>
    <button id="my_btn">Click!</button>
    <img id="load-image" width="40%">
  </body>
  <script type="text/ruby">
    require "js"
    puts "This is ruby in the browser!"
    document = JS.global[:document]
    load_image = document.getElementById("load-image")
    button = document.getElementById("my_btn")
    button.addEventListener "click" do |e|
      load_image[:src] = "https://upload.wikimedia.org/wikipedia/commons/f/f1/Ruby_logo.png"
    end
  </script>
</html>

Bien que nous n'ayons pas utilisé la manière la plus propre d'exécuter du code ruby ​​dans le navigateur, je pense que c'était un exemple pour montrer que c'était tout à fait faisable. Web Assembly est quelque chose qui est encore nouveau et à mon avis, il ne fournit toujours pas un moyen confortable de remplacer Javascript. Si vous êtes toujours intéressé à en savoir plus sur Web Assembly spécifiquement pour ruby, il y a une très bonne présentation avec encore plus d'exemples et d'explications sur son fonctionnement.

Merci d'avoir lu !

Si vous avez des questions ou des suggestions s'il vous plaît faites le moi savoir