Building interactive Ruby gem tutorials with Wasm – yes, right in the browser!

What if you could experiment with a gem instantly? No environment setup, no need to install a library, clone a repo, or read tons of docs. That could accelerate adoption—especially for new gems finding an audience. Well, it's possible! My talk is on bringing Ruby gems into browsers via WebAssembly!

Transcript

1. Albert Pazderin Building interactive gem tutorials with – yes, right in the ! RUby WASM browser
3. + gem “very_cool_gem” > rails new test-app
4. FRICTION = = + gem “very_cool_gem” > rails new test-app
5. → → → →
8. ｡◕‿◕｡ ME
9. ｡◕‿◕｡ &
10. ｡◕‿◕｡
11. Authentication? Authorization? Payments? Pagination? Admin Interface? Devise Pundit Kaminari ActiveAdmin ActiveMerchant
12. Authentication? Authorization? Payments? Pagination? Admin Interface? Devise Pundit Kaminari ActiveAdmin ActiveMerchant OmniAuth Sorcery Clearance Authlogic Rodauth CanCanCan ActionPolicy Pagy WillPaginate Administrate RailsAdmin Rolify Acl9 Consul Stripe Pay Braintree ... Paypal Monetize
14. Great ecosystem → paradox of choice Too many options → hard to choose the right one
15. Time-to-value = * number-of-options FRICTION
18. IDE, Node.js runtime Terminal, file system npm install All in the browser, no server attached Zero-setup development experience
21. LOCAL-FIRST
23. C Ruby Web browsers Standalone runtimes x86 ARM WASM .wasm Compiler (e.g. LLVM) Rust
24. Node.js Runtime (V8 based) +
25. Node.js Runtime (V8 based)
26. Web Applicaiton (main JS thread) WebContainer runtime (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtime (V8 based) Virtual File System (in memory) Service Worker (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe Editor
27. Web Applicaiton (main JS thread) WebContainer runtime (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtime (V8 based) Virtual File System (in memory) Service Worker (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe Web Applicaiton (main JS thread) WebContainer runtime (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtime (V8 based) Virtual File System (in memory) Service Worker (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe Editor
28. Web Applicaiton (main JS thread) WebContainer runtime (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtime (V8 based) Virtual File System (in memory) Service Worker (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe Editor
30. Web Applicaiton (main JS thread) WebContainer runtime (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtime (V8 based) Virtual File System (in memory) Service Worker (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe Editor
32. +
33. Ruby interpreter Compiler (e.g. LLVM) ruby.wasm
34. Web Applicaiton (main JS thread) WebContainer runtime (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtime (V8 based) Virtual File System (in memory) Service Worker (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe ruby.wasm ?
37. Svyat
41. Ruby on Web Server WASM Ruby on WASM
42. Rails on WASM Vova on WasmCon
43. https:/ /github.com/palkan/wasmify-rails
45. Rails on WASM Ruby on Web Server WASM
48. Rails on WebContainers Rails on WASM
49. Web Applicaiton (main JS thread) WebContainer runtime (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtime (V8 based) Virtual File System (in memory) Service Worker (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe ruby.wasm
52. https://writebook-on-wasm.fly.dev
53. TutorialKit.rb
55. https:/ /github.com/Bakaface/tutorialkit.rb
59. npm run build:wasm
63. ruby.wasm
64. npm run install && npm run dev
71. rails-tutorial.evilmartians.io
73. https:/ /github.com/Bakaface/tutorialkit.rb
74. What’s it good for? UI component libraries Rails engines & admin panels Online courses & tutorials* RubyUI *beware of the WebContainers licensing!
76. TODO:
77. TODO: ▢ UX/DX improvements
78. TODO: ▢ UX/DX improvements ▢ Tutorials for Martian gems (action_policy, anyway_config, ...)
79. TODO: ▢ UX/DX improvements ▢ Tutorials for Martian gems (action_policy, anyway_config, ...) ▢ Other Ruby frameworks (Sinatra, Roda, etc.)
80. TODO: ▢ UX/DX improvements ▢ Tutorials for Martian gems (action_policy, anyway_config, ...) ▢ Other Ruby frameworks (Sinatra, Roda, etc.) ▢ Pure Ruby pipeline