Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Frontend Rubyist

The Frontend Rubyist

An introduction how to use Ruby on the frontend instead of JavaScript. We will look at how to make apps with HTML, CSS and Ruby (Ruby.wasm), which run on the web and on the desktop.

Lightning Talk at Ruby Kaigi 2024 by Andi Idogawa

Do you just want to try it out now? Just clone this repository. (Uses forked JS GEM with new JSG Syntax)
More examples here:
Online Ruby.wasm Video Player with Electron Example Code

This is the code for Ruby Koans Web

JSG gem (Danger: JSG new might not work right now)


May 16, 2024

Other Decks in Programming


  1. 4 Ruby Koans (公案)  Learn Ruby through fixing tests.

     Made by the inventor of rake: Jim Weirich (-2014)
  2. 7 How can I use Ruby.wasm?  Ruby running in

    the Browser  Or Electron on the Desktop! => You could write an app like VSCode completely in Ruby, HTML and CSS.
  3. 8 Current limitations  About 10 MB when gzipped and

    downloaded by the browser  This is not an issue for an electron desktop App.  Let’s make it smaller?  1 Thread per Ruby.wasm intepreter  C Extension gems (mostly?) don’t work yet.  No File Class.  => But these are actually not big problems 👍🏻
  4. 9 Because you can do a LOT today  You

    can use the whole WebAPI:  Web Filesystem => Save and load files  Save Data in Indexed Database or Local Storage  Use gems like KRAMDOWN,  => We can make gems to make it easier to use
  5. 12 JSG Gem gem install jsg 1. jsg new projectname

     Will create everything you need 2. bundle add gem1 gem2 gem 3. jsg build 4. jsg electron (coming soon!)
  6. 13 New Syntax  I wanted the syntax to be

    closer to JavaScript JavaScript Ruby.wasm JS Gem JSG Gem document.querySelectorAll(“h1”) JS.global.document. querySelectorAll(“h1”) JSG.d.querySelectorAll(“h1”) element.innerText = “hoge” element[:innerText] = “hoge” Element.innerText = “hoge” element.style.backgroundColor = “red” element[:style] [:backgroundColor] = “red” element.style.backgroundColor = “red”
  7. 14 Local Storage API  Save a value in the

    browser  I used this to save the users code in Ruby Koans
  8. 15 How to use the File System Access API 

    Supported in Chromium Browsers  Load a file from the user  Save a file back to the user
  9. 17 More APIs and possibilites  Webcodec API => Create

    a Video Editor in Ruby.wasm  Drawing with Canvas
  10. 18 Thank you!  Start using Ruby.wasm today for projects!

     Thanks to Yuta Saito, Shigeru Nakajima, Matz and all other commiters! You are my heroes!  Let’s work together on Ruby.wasm