DEV Community: RAHUL DHOLE

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

RAHUL DHOLE — Mon, 03 Mar 2025 11:38:16 +0000

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.

Try It Yourself

You can try the Ruby WASM calculator in your browser by visiting the following link:

Try the Ruby WASM Calculator

Source Code

You can view the full source code for this project on GitHub:

Source Code on GitHub

How to Increase Free Tier Memory on AWS EC2

RAHUL DHOLE — Fri, 11 Oct 2024 13:05:38 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/aws-ec2-ram

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

roadauth-rails api jwt cors 2024

RAHUL DHOLE — Wed, 14 Aug 2024 23:45:59 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/rodauth-jwt

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

Kubernetes Cluster Setup Guide 2024

RAHUL DHOLE — Sun, 16 Jun 2024 15:19:10 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/k8s-setup

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

Docker container | Resolving "Permission Denied" Woes: A Decade-Long Struggle Unraveled

RAHUL DHOLE — Fri, 26 Apr 2024 21:32:18 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/docker-non-root-user-perms

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

Docker Devtools Stage | Powerlevel, OhMyZSH, tmux, fuzzy finder, autocomplete etc

RAHUL DHOLE — Thu, 25 Apr 2024 22:21:36 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/devtools

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

SOCKS5 Proxy Quickstart

RAHUL DHOLE — Wed, 24 Apr 2024 02:50:18 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/sock5-proxy

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

Proxmox Recovery

RAHUL DHOLE — Wed, 24 Apr 2024 02:47:51 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/proxmox-recovery

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

Proxmox WiFi Connection Story

RAHUL DHOLE — Wed, 24 Apr 2024 02:43:48 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/proxmox-wifi

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

Proxmox DNS Management

RAHUL DHOLE — Wed, 24 Apr 2024 02:33:08 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/proxmox-dns

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

pfSense Quickstart

RAHUL DHOLE — Wed, 24 Apr 2024 02:27:09 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/pfsense-quickstart

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.

pfSense basic firewall setup

RAHUL DHOLE — Wed, 24 Apr 2024 02:23:53 +0000

dev.to rahuldhole.com This article has moved to my personal site

This article moved

I’m consolidating all my technical writing under my personal domain to keep things organised and maintain updated versions of my posts.

👉 Read the latest version here:

https://rahuldhole.com/blog/pfsense-basic-firewall-setup

Future updates, improvements, and discussions will only happen on my website.

Why the move?

I’m building a small ecosystem of experiments, tools, and technical writing under my personal domain.

You can explore more here:

🌐 https://rahuldhole.com
⚙️ https://gist.rahuldhole.com

Thanks for reading on dev.to 🙌

If you enjoyed this article, check out the updated version on my site.