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

Load gem from browser

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

shigeru. nakajima

May 14, 2023
Tweet

More Decks by shigeru. nakajima

Other Decks in Programming

Transcript

  1. Shigeru Nakajima @ 2023/05/13
    Luxiar co.,ltd

    View Slide

  2. Self-introduction
    [email protected] 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