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

Load gem from browser

Load gem from browser

Tech talk at RubyKaigi2023

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

shigeru. nakajima

May 14, 2023

More Decks by shigeru. nakajima

Other Decks in Programming


  1. 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
  2. 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.
  3. 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
  4. 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.
  5. 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
  6. 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
  7. 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
  8. 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)
  9. 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.
  10. Not like a scripting language Write code Bundling Execution Write

    code Execution Write code Compile Execution Scripting language Compiled language
  11. 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
  12. Difference between ESModule and Ruby • In Ruby, there is

    require and require_relative •require_relative uses relative paths
  13. 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.
  14. The default Fiber Stack is small •The default stack size

    for Fiber is 256 kb. •Calling require_relative twice will cause a SystemStackError.
  15. 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”
  16. 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
  17. 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.
  18. 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.