Load gem from browser

Tech talk at RubyKaigi2023
https://rubykaigi.org/2023/presentations/ledsun.html#day3

Talk about
1. What is ruby.wasm
2. I want use gem in ruby.wasm
3. Way to approach
4. Strategy
5. Implementation status
6. Difficulties in implementation
7. Future Ambitions

Transcript

1. Shigeru Nakajima @ 2023/05/13 Luxiar co.,ltd
2. Self-introduction •ledsun@github or twitter •I am programing various applications. •Ruby x Rails •C# x Windows Form •PHP x Laravel •JavaScript
3. I am a member of • For 15 years. • Platinum sponsor
4. Today I will talk about 1. What is ruby.wasm 2. I want use gem in ruby.wasm 3. Way to approach 4. Strategy 5. Implementation status 6. Difficulties in implementation 7. Future Ambitions
5. What is ruby.wasm •Ruby scripts run in the browser.
6. Wordle Search •Do you know Wordle? • https://www.nytimes.com/games/wordle/index.html •Wordle Search •https://wordle-search.onrender.com/ • I created this application that searches for words according to the Wordle hints.
7. Source code for Wordle Search
8. What is ruby.wasm •Ruby scripts run in the browser. •Other sample applications can be found at the following URL • https://github.com/ruby/ruby.wasm/wiki/Showcase
9. I want use gem ruby.wasm •CSV gem can be used. •Third party gem cannot be used •File system limitations of ruby.wasm •ruby.wasm can only use the read-only file system that ruby.wasm has prepared in advance.
10. Way to approach •A look back at the history of JavaScript. •JavaScript had the same problem. ruby.wasm CRuby browser Node.js gem npm Ruby JavaScript
11. Modules in JavaScript •In the past •JavaScript had no concept of modules, only script tags in the browser. • Node.js ( 2009 ) • Node.js brought modules to JavaScript. •import-maps ( 2021 ) • 12 years of trial and error
12. First approach in JavaScript •Browserify ( 2011 ) •Bundle all dependent JavaScript files before execution. •Then the file system becomes unnecessary. Bundled.js Browserify Index.js a.js b.js Browsers refer only this file
13. Browserify also changes the format of the module. •The browser had no module for JavaScript •Using iife to create a scope and reproduce the movement of the module •ES module was introduced to standardize module syntax (2015)
14. import was not compatible. •import is an ESmodule instruction equivalent to Ruby's require. • Browsers • import "https://code.jquery.com/jquery- 3.6.0.min.js" •Node.js • import “jquery” • import “./jquery” There is a difference between file systems and URLs.
15. Import-maps •import-maps defines a map of file system or module names and URLs.
16. Two approaches •Bundling before execution •Resolve dynamically at runtime using maps
17. My Choice •Bundling before execution •Resolve dynamically at runtime using maps Write code Bundling Execution
18. Not like a scripting language Write code Bundling Execution Write code Execution Write code Compile Execution Scripting language Compiled language
19. Makes me want to tune out the bundling •Webpack dev-server •Use cache for faster bundling •esbuild • Rebuild in another programming language for faster bundling
20. Strategy •How to implement import-maps for ruby.wasm
21. Difference between ESModule and Ruby • In Ruby, there is require and require_relative •require_relative uses relative paths
22. Relative paths are compatible with file systems and URLs •require_relative does not require import- maps. File system URL
23. Two-step strategy 1. require_relative 2. require and import-maps
24. Implementation Status •Demo •Simple loads work. •Recursive loads do not work.
25. Difficulties in Implementation 1. Fetch API returns Promise, but Ruby has no Promise. 2. The default Fiber Stack is small. 3. Requires URL of running Ruby script.
26. Fetch API returns Promise, but Ruby has no Promise
27. Use evalAsync to wait for Promise
28. The default Fiber Stack is small •The default stack size for Fiber is 256 kb. •Calling require_relative twice will cause a SystemStackError.
29. Setting it to 20 mb solves this problem
30. Requires URL of running Ruby script •Relative paths point to different URLs depending on the path of the running Ruby script. a.rb b/b.rb c.rb b/c.rb require_relative “c.rb” require_relative “c.rb”
31. Requires URL of running Ruby script •I created a stack that holds the Ruby scripts running on the JavaScript side. b/b.rb a.rb a.rb a.rb
32. Future Ambitions •Imagine after implementing require and import-maps. •Deployment is required to use the gem. • “gem install” on the server. • I want UNpkg for ruby.wasm.
33. UNpkg •UNpkg is a CDN for modules published in the NPM repository.
34. UNpkg image for ruby.wasm
35. Easier Ruby Programming for Browsers 1. require_relative allows for multi-module applications. 2. require enables the use of third-party gems. 3. UNpkg allows third-party gems to be used without bundle install.
36. Thank you for your attention.