Using Ruby WASM with Vue.js for Client-Side Computation

#ruby #webassembly #vue

In this article, we explore how to run Ruby code directly in the browser using WebAssembly (WASM) and integrate it with Vue.js for creating interactive web applications. The main focus is on how Ruby functions can be executed in the browser and how they interact with Vue for dynamic behavior.

What is Ruby WASM?

Ruby WASM is a way to compile Ruby code into WebAssembly, allowing it to run directly in the browser with near-native performance. This allows you to execute Ruby logic in the browser without needing a backend server, making your web applications faster and more responsive.

gist.githack.com

Integrating Ruby Functions in Vue.js

In our project, we build a simple calculator using Ruby WASM and Vue.js. While Vue.js handles the UI and dynamic interaction, Ruby WASM is responsible for performing the calculations.

Setting up Ruby WASM

Ruby code can be compiled into WebAssembly using tools like ruby-wasm, which enables Ruby functions to be run in the browser. We define our Ruby functions as follows:

We create a Calculator class with methods for basic arithmetic operations (add, subtract, multiply, divide).
These Ruby functions are exposed to the JavaScript global scope so that they can be invoked by the Vue.js application.

Here’s a basic overview of the process:

Ruby Functions: The Calculator class contains methods like add, subtract, multiply, and divide. These methods take two numbers and an operation string as input and return the result.
Exposing Ruby Functions: We use JS.global[:calculate] to expose the Ruby calculate method to JavaScript. This makes it accessible from the Vue.js instance running in the browser.

Vue.js Handling User Interaction

Vue.js is used to create an interactive interface for the user to input numbers, select an operation, and trigger the calculation. Here’s how Vue.js interacts with Ruby WASM:

User Input: The user enters two numbers and selects an operation (add, subtract, multiply, or divide) using Vue's two-way binding with v-model.
Triggering Calculation: When the "Calculate" button is clicked, Vue calls the calculate() method, which interacts with Ruby WASM.
Waiting for WASM: Vue ensures that Ruby WASM is fully loaded before calling the calculate() method. If Ruby WASM isn’t initialized yet, the app waits and displays a message to the user.
Fetching Result: Once Ruby WASM is ready, the calculate() function is called with the user inputs, and the result is returned back to Vue.js. If there's an error (e.g., division by zero), it’s caught and displayed in the UI.

Handling Errors

Ruby WASM allows us to raise errors, such as division by zero, and Vue.js handles these errors gracefully. The result or error message is displayed dynamically in the UI, giving the user immediate feedback.

Example Flow

The user inputs numbers, selects an operation, and clicks the "Calculate" button.
Vue checks if Ruby WASM is initialized.
The Ruby calculate function is invoked, performing the requested operation.
The result is displayed on the page, or an error message appears if something went wrong.

This integration allows us to offload computational logic to Ruby while maintaining an interactive and responsive UI with Vue.js.