Overview of Rails 8 features relevant to WebAssembly #

Ruby on Rails 8 brings a host of new features, many of which are particularly useful when integrating WebAssembly into a modern Rails application.

WebAssembly runs efficiently in the browser, but for it to work seamlessly with Rails, we need an optimized asset pipeline, a clean JavaScript dependency management system, and real-time interactivity features that align well with WebAssembly’s capabilities.

Rails 8 introduces several updates that directly support these requirements, making it an ideal framework for building WebAssembly-powered applications.

Below are a few Rails 8 Features Relevant to WebAssembly:-

Propshaft #

One of the biggest changes in Rails 8 is the integration of Propshaft as the default asset pipeline.

Unlike Sprockets, which was known for its complex dependency resolution, Propshaft simplifies asset management by treating all assets as static files, leading to faster load times. This is particularly useful for WebAssembly, as .wasm files need to be served efficiently without unnecessary preprocessing.

Since Propshaft allows direct control over asset paths and fingerprinting, it ensures that WebAssembly modules are delivered with optimal caching and minimal overhead.

To make your WASM Module available as digested assets by Propshaft, add below to your /app/views/layouts/application.html.erb

<script>
  // Set path to your WASM Module File.
  // I usually keep these in /app/assets/wasm
  window.RAILS_ASSET_URL = "<%= asset_path('_YOUR_WASM_MODULE_FILENAME_.wasm') %>";
</script>

Note:- To make sure your WASM Modules are published as assets by Propshaft you must add this to your /config/initializers/assets.rb file:

Rails.application.config.assets.paths << Rails.root.join("/app/assets/wasm")

Importmaps #

Another major enhancement is Importmaps.

Traditionally, Rails applications relied on Webpack or ESBuild to manage JavaScript dependencies. However, these tools often introduce unnecessary complexity.

Importmaps, now a core part of Rails 8, eliminate the need for a JavaScript bundler by allowing JavaScript modules to be loaded directly from a CDN or local assets folder.

This makes it easy to integrate WebAssembly-based JavaScript libraries such as WASM modules' gluecode without setting up a complex build pipeline.

To make your WebAssembly based Javascript library available to your Rails app, add below to your /config/importmap.rb file:

#Pin WASM Modules' Glue Code
#Make sure you keep gluecode .js files in /app/javascript/wasm
pin "_YOUR_WASM_MODULE_GLUECODE_FILENAME_", to: "wasm/_YOUR_WASM_MODULE_GLUECODE_FILENAME_.js"

Hotwire (Turbo & Stimulus) and SolidCable #

Real-time updates in Rails 8 are powered by Hotwire and SolidCable.

Hotwire is Rails' default way of handling real-time updates without relying heavily on JavaScript.

WebAssembly modules often perform computations asynchronously, and integrating them into a Hotwire-powered Rails app requires seamless real-time communication.

SolidCable, a new addition to the Solid Trifecta, ensures low-latency WebSocket communication, which is crucial for applications using WebAssembly for real-time calculations, AI processing, or gaming.

By combining SolidCable with Turbo Streams, we can update the UI dynamically with the results computed inside a WebAssembly module without requiring a full page reload.

StimulusJS Controllers provide hooks to load, interact with, and execute WASM modules.

Example: Loading a WebAssembly module in a Stimulus controller:-

// app/javascript/controllers/mortgage_calculator_controller.js

import { Controller } from "@hotwired/stimulus";
import init, * as wasmModule from "_YOUR_WASM_MODULE_GLUECODE_FILENAME_"; // Load from import-mapped pin

export default class extends Controller {
  async connect() {
    console.log("MortgageCalculatorController connected!");

    try {
      // Initialize the WASM module with the Rails asset path
      await init();

      // Assign the WASM module
      this.wasm = wasmModule;

      console.log("WASM Module loaded and instantiated!");
    } catch (error) {
      console.error("Failed to load WASM module:", error);
    }
  }
}

SolidQueue #

Rails 8 also improves support for background job processing via SolidQueue.

Many WebAssembly-powered applications offload intensive computations, such as cryptography, physics simulations, or data processing, to the background.

SolidQueue provides a robust job processing system that integrates directly with Rails, making it easier to delegate tasks to WebAssembly modules running in a worker thread or background job.

Example: Using WebAssembly with SolidQueue for Background Processing:-

class ComputeJob < SolidQueue::Job
  def perform(data)
    WasmProcessor.calculate(data)
  end
end

This ensures that Rails delegates intensive computations to WebAssembly instead of blocking user interactions.

Note:- The above example is NOT tested as yet. So, it might not work as such.

Rails 8, with these new features, is perfectly positioned to leverage WebAssembly efficiently.