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