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
   

   View Slide

2. Self-introduction
   •ledsun@github or twitter
   •I am programing various applications.
   •Ruby x Rails
   •C# x Windows Form
   •PHP x Laravel
   •JavaScript
   

   View Slide

3. I am a member of
   • For 15 years.
   • Platinum sponsor
   

   View Slide

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
   

   View Slide

5. What is ruby.wasm
   •Ruby scripts run in the browser.
   

   View Slide

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.
   

   View Slide

7. Source code for Wordle Search
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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.
    

    View Slide

15. Import-maps
    •import-maps defines a map of file system
    or module names and URLs.
    

    View Slide

16. Two approaches
    •Bundling before execution
    •Resolve dynamically at runtime using maps
    

    View Slide

17. My Choice
    •Bundling before execution
    •Resolve dynamically at runtime using maps
    Write code Bundling Execution
    

    View Slide

18. Not like a scripting language
    Write code Bundling Execution
    Write code Execution
    Write code Compile Execution
    Scripting language
    Compiled language
    

    View Slide

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
    

    View Slide

20. Strategy
    •How to implement
    import-maps for
    ruby.wasm
    

    View Slide

21. Difference between ESModule and Ruby
    • In Ruby, there is require and require_relative
    •require_relative uses relative paths
    

    View Slide

22. Relative paths are compatible with file
    systems and URLs
    •require_relative does not require import-
    maps.
    File system URL
    

    View Slide

23. Two-step strategy
    1. require_relative
    2. require and import-maps
    

    View Slide

24. Implementation Status
    •Demo
    •Simple loads work.
    •Recursive loads do not work.
    

    View Slide

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.
    

    View Slide

26. Fetch API
    returns
    Promise, but
    Ruby has no
    Promise
    

    View Slide

27. Use evalAsync to wait for Promise
    

    View Slide

28. The default Fiber Stack is small
    •The default stack size for Fiber is 256 kb.
    •Calling require_relative twice will cause a
    SystemStackError.
    

    View Slide

29. Setting it to 20 mb solves this problem
    

    View Slide

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”
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

33. UNpkg
    •UNpkg is a CDN for modules published in
    the NPM repository.
    

    View Slide

34. UNpkg image for ruby.wasm
    

    View Slide

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.
    

    View Slide

36. Thank you for
    your attention.
    

    View Slide