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
https://x.com/largo

Do you just want to try it out now? Just clone this repository. (Uses forked JS GEM with new JSG Syntax)
https://github.com/Largo/rubyWasmTemplate
More examples here:
https://github.com/Largo/ruby.wasm-quickstart
Online Ruby.wasm Video Player with Electron Example Code
https://github.com/Largo/PsychometricStudyVideoPlayer

This is the code for Ruby Koans Web
https://github.com/Largo/BrowserRubyKoans

JSG gem (Danger: JSG new might not work right now)
https://rubygems.org/gems/jsg

Transcript

1. Andi Idogawa Idogawa Software Miyazaki: Japans Sunny Side Switzerland スイス Twitter: @largo M: @andi@famichiki.jp idogawa.com
2. Where is Miyazaki?
3. 3 THE FRONTEND RUBYIST  Making Frontend Applications using Ruby.wasm that you can ship today.
4. 4 Ruby Koans (公案)  Learn Ruby through fixing tests.  Made by the inventor of rake: Jim Weirich (-2014)
5. 5 Ruby Koans Web! https://koans.idogawa.com
6. 6 Same Code  2010 Terminal Version 2024 Web Version
7. 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.
8. 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 👍🏻
9. 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
10. 10 Examples  Ruby Koans https://koans.idogawa.com  RunRuby.dev
11. 11 Video Player using Electron  github.com/largo/PsychometricStudyVideoplayer  Used At Miyazaki Municipal University
12. 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!)
13. 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”
14. 14 Local Storage API  Save a value in the browser  I used this to save the users code in Ruby Koans
15. 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
16. 16 How to save
17. 17 More APIs and possibilites  Webcodec API => Create a Video Editor in Ruby.wasm  Drawing with Canvas
18. 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