Debido a la llegada del ensamblaje web , hubo un par de publicaciones que explicaban de manera muy compleja cómo lograrlo para diferentes tecnologías. Creo que en 2023 hay formas más fáciles de implementar lo mismo con menos esfuerzo

¿Qué necesitamos para permitir que el navegador ejecute nuestro código Ruby?

En resumen, hay dos formas:

• Usando un archivo ruby ​​como base y compilando ese archivo para generar el formato wasm (WebAssembly) del mismo. Esta es la forma más limpia porque está generando las instrucciones sin ninguna capa en el medio. El problema es que necesita instalar el compilador wasm y comprender un poco más lo que está sucediendo. No vamos a utilizar esta opción en este post.
• Usando un paquete javascript que puede entender el código ruby ​​en el navegador. Esta es la forma más fácil porque no necesitamos instalar nada. Entonces, debido a que la idea es mostrar que es factible, lo usaremos de esta manera.

Ejemplo básico

En primer lugar, para crear nuestro ejemplo vamos a crear un archivo llamado index.html con la estructura HTML básica:

<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>

Ejemplo de evento

Ahora, ejecutaremos algo con eventos. Entonces, vamos a crear un botón y cargaremos una imagen después de hacer clic en él. Entonces, para lograr eso, debe agregar el siguiente código:

<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>

Ejemplo completo

Así es como debería verse tu ejemplo:

<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>

A pesar de que no usamos la forma más limpia de ejecutar el código Ruby en el navegador, creo que este fue un ejemplo para mostrar que es totalmente factible. Web Assembly es algo que todavía es nuevo y, en mi opinión, todavía no proporciona una forma cómoda de reemplazar Javascript. Si aún está interesado en aprender más sobre Web Assembly específicamente para Ruby, hay una muy buena presentación con aún más ejemplos y explicaciones sobre cómo funciona.

¡Gracias por leer!

Si tiene alguna pregunta o sugerencia, por favor hágamelo saber.