Mastering Building Web Assembly Apps using Rails This Book is NOT complete and the Examples might NOT work Written by Chetan Mittal Edition: Beta. This Book Is Available To Subscribed Members Only. Subscribe Now!

Open What is WebAssembly, and why does it matter?

What is WebAssembly, and Why Does it Matter?

As a long-time software developer, I’ve seen the web evolve from static pages to highly interactive, complex applications powered by frameworks like Rails, React, and Vue.

Yet, despite all the advancements, one major challenge remains — performance especially when it comes to handling complex computations, real-time interactions, and heavy data processing in web applications.

JavaScript, while powerful, has inherent limitations due to being an interpreted language. That’s where WebAssembly (WASM) comes in.

WebAssembly is a binary instruction format that runs alongside JavaScript, enabling near-native performance for web applications.

Unlike JavaScript, which is parsed and interpreted at runtime, WebAssembly is compiled beforehand, leading to significantly faster execution times.

The beauty of WebAssembly lies in its ability to run code written in languages like Rust, C, and C++ directly in the browser, unlocking new possibilities for

Open Key advantages of WebAssembly in modern web development

Key Advantages of WebAssembly in Modern Web Development

WebAssembly is more than just a JavaScript alternative—it’s a paradigm shift in how we build high-performance web applications. While JavaScript remains the backbone of client-side web development, WebAssembly extends its capabilities by introducing near-native execution speeds.

WebAssembly executes at speeds comparable to native applications because:

• It is compiled ahead of time instead of being interpreted like JavaScript.
• It runs in a sandboxed execution environment, ensuring security while maintaining efficiency.
• It has direct access to low-level CPU and memory operations, unlike JavaScript, which operates through higher-level abstractions.

To illustrate this, let’s compare JavaScript and WebAssembly for a large numerical computation task:

Example: Fibonacci Sequence Calculation in JavaScript

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibo

Open How WebAssembly complements Ruby on Rails

How WebAssembly Complements Ruby on Rails

When working with Ruby on Rails, performance concerns often arise—particularly when handling real-time updates, background processing, or CPU-intensive operations. While Rails is excellent for handling business logic, ActiveRecord queries, and web requests, it’s not always the best tool for high-performance computing.

WebAssembly (WASM) fills this gap by extending Rails applications with native-like speed. Instead of relying on JavaScript or background jobs for every computation-heavy task, we can offload performance-intensive logic to WebAssembly while keeping the benefits of Hotwire, Turbo Streams, and Solid Trifecta (SolidQueue, SolidCache, SolidCable).

---

Rails Strengths and Limitations

Before we discuss WebAssembly’s role in Rails apps, let’s acknowledge what Rails does well and where it struggles:

✅ Strengths:

• Rapid development with convention over configuration
• Robust ORM with ActiveRecord
• Rea

Open Overview of Rails 8 features relevant to WebAssembly

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 loa

Open Setting up your development environment

Setting Up Your Development Environment

Before we begin writing WebAssembly modules or integrating them into Rails 8, we need to set up a proper development environment.

This involves installing Rails 8, configuring Rust for WebAssembly, setting up Importmaps, Propshaft, and TailwindCSS, and ensuring that our system is ready to handle .wasm assets efficiently.

---

1. Install Ruby on Rails 8

First, ensure you have Ruby 3.3 installed:

ruby -v

If you don’t have Ruby 3.3, install it using:

rbenv install 3.3.6
rbenv global 3.3.6

Now, make sure you’re running the latest version of Rails 8. If not, install it:

gem install rails -v 8.0.1

To verify the installation, check the Rails version:

rails -v

Now, create a new Rails app with TailwindCSS:

rails new wasm_app --css=tailwind
cd wasm_app

---

2. Install Rust and WebAssembly Toolchains

Since WebAssembly is commonly written

Open Mortgage Calculator

Mortgage Calculator

https://github.com/cmittal790/mortgage-calculator-wasm-rails

Introduction to Rust for WebAssembly development

Setting up Rust and WebAssembly toolchains

Writing a simple Rust function and compiling it to WASM

Using `wasm-pack` to generate a WebAssembly package

Testing and debugging the compiled WebAssembly module

Serving WebAssembly files via Propshaft

Loading and executing WebAssembly modules in Rails views

Using Importmaps to manage WebAssembly-related JavaScript dependencies

Communicating between WebAssembly and Rails using Turbo Streams

StimulusJS controllers for WebAssembly interactions

Understanding SolidQueue, SolidCache, and SolidCable

How WebAssembly Benefits from SolidQueue for Background Processing

How SolidCache Improves WebAssembly Performance in Rails Apps

Real-Time WebAssembly Updates with SolidCable and Turbo Streams

Integrating the Solid Trifecta With WebAssembly

Identifying performance bottlenecks in Rails applications

Using WebAssembly for complex calculations

Handling asynchronous operations with WebAssembly in Turbo-powered UIs

Case study: Real-Time Data Visualization with WebAssembly in a Rails 8 Dashboard

Setting up a Hetzner VPS for deployment

Using Kamal 2 for deploying Rails 8 applications

Configuring Kamal to serve WebAssembly files efficiently

Optimizing WebAssembly performance in production environments

Why WebAssembly enhances Progressive Web Apps (PWAs)

Creating an offline-ready WebAssembly module

Using Service Workers for caching WebAssembly resources

Implementing a WebAssembly-powered feature in a Rails PWA

Debugging WebAssembly modules within a Rails environment

Optimizing WebAssembly performance for real-world applications

Reducing WASM file size and improving load times

Profiling and benchmarking WebAssembly execution

Upcoming WebAssembly features

How WebAssembly fits into the future of Rails

Advanced use cases: AI, gaming, and server-side WebAssembly

Why AI in WebAssembly?

Running Machine Learning models inside WebAssembly

Case study: Using WebAssembly for fast image recognition in a Rails app