Slide 1
Slide 1 text
WA
RB
Using Ruby in the
browser is wonderful
2024/05/17
ledsun
(中島滋：株式会社ラグザイア)
於 RubyKaigi 2024
Slide 2
Slide 2 text
Self-introduction
•ledsun@ github or X
•Based in Tokyo
•I am programing web
applications by Ruby on Rails
and JavaScript
WA
RB
Slide 3
Slide 3 text
I am member of
•Platinum sponsor
WA
RB
Slide 4
Slide 4 text
Today I will talk
1. What is ruby.wasm
2. What did I do for ruby.wasm
3. What I am going to do
WA
RB
Slide 5
Slide 5 text
Using Ruby in
the browser is
wonderful
WA
RB
Slide 6
Slide 6 text
What is ruby.wasm
WA
RB
Slide 7
Slide 7 text
1. Virtual Machine of CRuby
is running on the browser
2. Glue between CRuby and
JavaScript
WA
RB
Slide 8
Slide 8 text
Virtual Machine of
CRuby is running on
the browser
WA
RB
Slide 9
Slide 9 text
Glue between
CRuby and JavaScript
WA
RB
Slide 10
Slide 10 text
What JavaScript has
that Ruby does not
•new operator
•It is method in Ruby
•property call
•It is method in Ruby
WA
RB
Slide 11
Slide 11 text
What JavaScript can
do and Ruby can not
•Read external resources
•Timer and Sleep
WA
RB
Slide 12
Slide 12 text
ruby.wasm provide glue between
CRuby and JavaScript
•JS.global
•The globalThis in JavaScript
•JS.eval
•Eval JavaScript code
•JS::Object
•Wrapper for JavaScript Object
WA
RB
Slide 13
Slide 13 text
The ruby.wasm is
1. Virtual Machine of CRuby
is running on the browser
2. Glue between CRuby and
JavaScript
WA
RB
Slide 14
Slide 14 text
Self-introduction Part 2
•Sending pull requests for the Glue
•Create JavaScript objects with the new
method
•JS::RequireRemote
WA
RB
Slide 15
Slide 15 text
Create JavaScript
objects with the
new method
WA
RB
Slide 16
Slide 16 text
WA
RB
The new operator does not exist in Ruby. Instead, call the
JavaScript code that calls the new operator
Slide 17
Slide 17 text
JS::RequireRemote
•require_relative compatible
•Specified by feature name
without extension
•Relative path resolution
•Prevent double loading
WA
RB
Slide 18
Slide 18 text
Let’s move it
WA
RB
Slide 19
Slide 19 text
WA
RB
Demo on VSCode
Terminal
Slide 20
Slide 20 text
WA
RB
Demo
Slide 21
Slide 21 text
WA
RB
Download Ruby scripts
Slide 22
Slide 22 text
WA
RB
Slide 23
Slide 23 text
JS::RequireRemote makes
domain logic compartible
WA
RB
Slide 24
Slide 24 text
Only three modified
files are related to IO.
WA
RB
Slide 25
Slide 25 text
To use require_relative, a
monkypacth is needed
WA
RB
Slide 26
Slide 26 text
In ruby.wasm, we now
have most of the tools
to create applications.
WA
RB
Slide 27
Slide 27 text
(We are halfway through
the presentation. Speakers
will take a break for a
drink of water. Please wait
a moment.)
WA
RB
Slide 28
Slide 28 text
What's next?
WA
RB
Slide 29
Slide 29 text
Do you know what is
the most fun to create
on the front end?
WA
RB
Slide 30
Slide 30 text
Front-end framework
WA
RB
Slide 31
Slide 31 text
SproutCore, Cappuccino, Knockout,
Backbone.js, AngularJS, Ember.js,
Agility.js, Derby, Spine, knockback.js,
Meteor, CanJS, Flight, React, Polymer,
Reactive.js, Durandal, Riot, Vue.js,
Ampersand.js, mercury, Mithril, Cycle.js,
aurelia-framework, Angular, Preact,
Inferno, choo, Lightning Web
Components, Hyperapp, Svelte
WA
RB
No one can stop having
fun making them.
Slide 32
Slide 32 text
I want to build a
front-end framework
in Ruby.
WA
RB
Slide 33
Slide 33 text
I am building a
framework with
reference to Ruby
on Rails.
WA
RB
Slide 34
Slide 34 text
See
https://ledsun.github.i
o/kakikata/
WA
RB
Since a framework cannot be
created by itself, it is built into
applications.
Slide 35
Slide 35 text
Features
1. Auto loader
2. Rendering
3. Event binding
WA
RB
Slide 36
Slide 36 text
WA
RB
You think you've already
seen require_relative
work, right?
Auto loader
Slide 37
Slide 37 text
WA
RB
There is no
require_relative.
Slide 38
Slide 38 text
WA
RB
In Rails, it is equivalent to
the classic autoloader,
implemented using
const_missing.
Slide 39
Slide 39 text
Unfortunately, it does
not handle structured
names as well as the
classic autoloader in
Ruby on Rails.
WA
RB
Slide 40
Slide 40 text
Rendering
WA
RB
Slide 41
Slide 41 text
WA
RB
Slide 42
Slide 42 text
WA
RB
Slide 43
Slide 43 text
WA
RB
Resolve the template file
path from the name and load
the template file.
Slide 44
Slide 44 text
Event binding
WA
RB
I'm aware of the Rails route.
This isn't very similar.
Slide 45
Slide 45 text
WA
RB
It is rather similar to jQuery.
Slide 46
Slide 46 text
WA
RB
Slide 47
Slide 47 text
These functions could
be written in 120 lines.
Ruby is really
wonderful.
WA
RB
Slide 48
Slide 48 text
https://github.com/ledsun/
orbital_ring
WA
RB
Slide 49
Slide 49 text
I named this
framework
“Orbital Ring”.
WA
RB
Slide 50
Slide 50 text
Orbital Ring is a science fiction
idea that if a ring is built in
satellite orbit and an orbital
elevator is hung from it, it will
be easy to go back and forth
between the ground and space.
WA
RB
Slide 51
Slide 51 text
I like the name
"Orbital Ring" because
it contrasts with "Rail".
WA
RB
Slide 52
Slide 52 text
If you have any ideas for
applications or
frameworks using
ruby.wasm, please let
me know.
WA
RB
Slide 53
Slide 53 text
WA
RB
Presented by
終