The future of Rails begins in the browser

With a mature community and adoption by prominent tech veterans, Ruby on Rails already has a strong foundation, and these elements define both the present state of the framework, as well as its short-term future. But the long-term future of the framework is an equation that will depend heavily on the opposite end of the equation: namely, the newcomers, those who will take their first steps on Rails.

But will those first steps look like? Imagine being able to learn and play with Rails without the need to deal with installations or development environments. What if the next generation of Rails developers could start using something easily accessible to everyone: the browser!
Sounds like science fiction? Hardly! The fact is, interactive web-based tutorials, learning materials, and playgrounds play a critical role in wider technology adoption. We’re certain this is the future–and Rails must be a part of that future.

Join us on our journey to bring the “Getting Started with Rails” experience right into your browser. We’ll do this with the help of some new technologies: WebAssembly, WebContainers and in-browser databases!

Transcript

1. Albert PazderiÄ Vladimir Dementyev The future of begins in the Rails browser
3. https://guides.rubyonrails.org/getting_started.html#prerequisites https://guides.rubyonrails.org/install_ruby_on_rails.html
4. https://rails-tutorial.evilmartians.io
7. IDE, Node.js runtimS Terminal, file syste1 npm instal All in the browserÈ no server attacheF Zero-setu development experience
8. https://bolt.new by StackBlitz but with AI writing code Zero-setu$ vibe-coding experience
11. Can we bring the same zero-setup UÄ to the Rails world? Where it could be the most beneficial (spoiler: yes, we can0 (spoiler: learning)
13. https://rails-tutorial.evilmartians.io THE TALK The Key Ingredient) The Challenges
15. C Ruby Web browsers Standalone runtimes x86 ARM WASM .wasm Compiler (e.g. LLVM) Rust
16. C Ruby Web browsers Standalone runtimes x86 ARM WASM .wasm Compiler (e.g. LLVM) Rust C Ruby Web browsers Standalone runtimes x86 ARM WASM .wasm Compiler (e.g. LLVM) Rust
17. C Ruby Web browsers Standalone runtimes x86 ARM WASM .wasm Compiler (e.g. LLVM) Rust
18. C Ruby Web browsers Standalone runtimes x86 ARM WASM .wasm Compiler (e.g. LLVM) Rust
19. C Ruby Web browsers Standalone runtimes x86 ARM WASM .wasm Compiler (e.g. LLVM) Rust
20. WASÆ module Browser Networking# File system?
21. WASM-WASÄ module
22. WASM-WASI module import "sys_call" ... call $sys_call WASI-compatible runtime Implements "sys_call"
23. https://github.com/ruby/ruby.wasm
24. Bringing Ruby to the Browser: ruby.wasm ruby.wasm WASM WASI Packaging toolchain
25. Bringing Ruby to the Browser: ruby.wasm ruby.wasm WASM WASI Packaging toolchain a Pre-compiled Ruby Runtimes
26. Bringing Ruby to the Browser: ruby.wasm ruby.wasm WASM WASI Packaging toolchain g Pre-compiled Ruby Runtimes g Gem packaging toolchain
27. Bringing Ruby to the Browser: ruby.wasm G Pre-compiled Ruby Runtimes G Gem packaging toolchain G Compatibility patches ruby.wasm WASM WASI Packaging toolchain + patches
28. The Final Ingredient: wasmify-rails wasmify-rails ruby.wasm Rails shims WASM WASI Packaging toolchain Rails config
29. The Final Ingredient: wasmify-rails wasmify-rails ruby.wasm Rails shims WASM WASI Packaging toolchain Rails config
30. The Final Ingredient: wasmify-rails wasmify-rails ruby.wasm Rails shims WASM WASI Packaging toolchain Rails config
31. https://writebook-on-wasm.fly.dev
32. wasmify-rails ruby.wasm Rails shims WASM WASI Packaging toolchain Rails config ? ?
33. https://rails-tutorial.evilmartians.io
34. https://rails-tutorial.evilmartians.io
35. wasmify-rails ruby.wasm Rails shims WASM WASI Packaging toolchain Rails config Database Web server
36. Database È SQLite.was È PGlite PGLite/SQLite.wasm Compatibility layer OFPS Indexed DB Memory
37. Database  SQLite.was"  PGlite PGLite/SQLite.wasm Compatibility layer OFPS Indexed DB Memory Same API in the browser and Node.js
38. Node.js?
40. Web Applicaiton (main JS thread) WebContainer runtimH (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtim™ (V8 based) Virtual File Systek (in memory) Service WorkeŒ (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe
41. Web Applicaiton (main JS thread) WebContainer runtimH (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtim™ (V8 based) Virtual File Systek (in memory) Service WorkeŒ (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe
42. Web Applicaiton (main JS thread) WebContainer runtimH (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtim™ (V8 based) Virtual File Systek (in memory) Service WorkeŒ (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe
43. Web Applicaiton (main JS thread) WebContainer runtimH (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtim™ (V8 based) Virtual File Systek (in memory) Service WorkeŒ (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe
44. Web Applicaiton (main JS thread) WebContainer runtimH (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtim™ (V8 based) Virtual File Systek (in memory) Service WorkeŒ (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe
45. Web Applicaiton (main JS thread) WebContainer runtimH (isolated Web Worker) WebContainer API Client Terminal UI Node.js Runtim™ (V8 based) Virtual File Systek (in memory) Service WorkeŒ (browser-level network proxy) (HTTP Traffic) (HTTP Traffic) Preview Iframe
46. WebContainer wasmify-rails ruby.wasm WASM WASI Packaging toolchain Rails config Rails shims Web server Database
47. WebContainer wasmify-rails ruby.wasm WASM WASI Packaging toolchain Rails config Rails shims Web server Database
48. THE CHallenge Express.js rails.wasm
49.  É È Ç Æ Å Ä Ã À 1Á 1 1É 1È 1Ç 1Æ 1Å 1Ä 18 module module class def self require new en" en! en" end RackuU Handlee WASIServee . (app, options1 port options[ 2 ::Rack:: ::IncomingHandler. (app1 a ::Wasmify::ExternalCommands.server(port1 register , WASIServee run ** = = "rack/wasi/incoming_handler‡ :Port WASI :wasi # Init a global handler for the ap€ $incoming_handler # Signal to the JS host that the server is reads
50. Rack::WASI::IncomingHandler ) ' & % $ # " !  10 class def en2 end Rack:: ::IncomingHandlei (req, resE request Rack::MockRequest.env_for(uri.to_s, headersD response .call(requestD WASI handle # parse headero # ..f # ..f @app # handle responsp = =
51. express.js 1. Receives HTTP request 2. Registers the request to the global scope 7 . Unpacks the data from the ruby response 8. Build & send the final response to the client 3. Invokes vm.evalAsync() & await rails.wasm 4. Reads request data from "JS.global" 6. Packages response into JS proxy object 5. Converts request into a standard Rack env hash & @app.call(env) Promise resolve trigger wm.evalAsync()
52. express.js 1. Receives HTTP request 2. Registers the request to the global scope 7 . Unpacks the data from the ruby response 8. Build & send the final response to the client 3. Invokes vm.evalAsync() & await rails.wasm 4. Reads request data from "JS.global" 6. Packages response into JS proxy object 5. Converts request into a standard Rack env hash & @app.call(env) Promise resolve trigger wm.evalAsync()
53. express.js 1. Receives HTTP request 2. Registers the request to the global scope 7 . Unpacks the data from the ruby response 8. Build & send the final response to the client 3. Invokes vm.evalAsync() & await rails.wasm 4. Reads request data from "JS.global" 6. Packages response into JS proxy object 5. Converts request into a standard Rack env hash & @app.call(env) Promise resolve trigger wm.evalAsync()
54. express.js 1. Receives HTTP request 2. Registers the request to the global scope 7 . Unpacks the data from the ruby response 8. Build & send the final response to the client 3. Invokes vm.evalAsync() & await rails.wasm 4. Reads request data from "JS.global" 6. Packages response into JS proxy object 5. Converts request into a standard Rack env hash & @app.call(env) Promise resolve trigger wm.evalAsync()
55. express.js 1. Receives HTTP request 2. Registers the request to the global scope 7 . Unpacks the data from the ruby response 8. Build & send the final response to the client 3. Invokes vm.evalAsync() & await rails.wasm 4. Reads request data from "JS.global" 6. Packages response into JS proxy object 5. Converts request into a standard Rack env hash & @app.call(env) Promise resolve trigger wm.evalAsync()
56. express.js 1. Receives HTTP request 2. Registers the request to the global scope 7 . Unpacks the data from the ruby response 8. Build & send the final response to the client 3. Invokes vm.evalAsync() & await rails.wasm 4. Reads request data from "JS.global" 6. Packages response into JS proxy object 5. Converts request into a standard Rack env hash & @app.call(env) Promise resolve trigger wm.evalAsync()
57. express.js 1. Receives HTTP request 2. Registers the request to the global scope 7 . Unpacks the data from the ruby response 8. Build & send the final response to the client 3. Invokes vm.evalAsync() & await rails.wasm 4. Reads request data from "JS.global" 6. Packages response into JS proxy object 5. Converts request into a standard Rack env hash & @app.call(env) Promise resolve trigger wm.evalAsync()
58. express.js 1. Receives HTTP request 2. Registers the request to the global scope 7 . Unpacks the data from the ruby response 8. Build & send the final response to the client 3. Invokes vm.evalAsync() & await rails.wasm 4. Reads request data from "JS.global" 6. Packages response into JS proxy object 5. Converts request into a standard Rack env hash & @app.call(env) Promise resolve trigger wm.evalAsync()
59. express.js 1. Receives HTTP request 2. Registers the request to the global scope 7 . Unpacks the data from the ruby response 8. Build & send the final response to the client 3. Invokes vm.evalAsync() & await rails.wasm 4. Reads request data from "JS.global" 6. Packages response into JS proxy object 5. Converts request into a standard Rack env hash & @app.call(env) Promise resolve trigger wm.evalAsync()
60. THE CHallenge One cannot develop without a console
61.   È Ç Æ Ä Ã Â À 1Á 1 1 1È 1Ç 1Æ 1Ä 1à 1 1À 2Á 2 2 2È 2Ç 25 import from export default class async const await this this async await this null repl E IRBRepl Y () Y prompt .vm. ( Q repG . ({ prompt, eval .eval, writer rubyWriter }Q . ( , () process. ())D 5 V (cmd, _, _, callback) Y result .vm. ( ${cmd} )D ( , result)D 5 } "node:repl" h require "irbn class IRB::Ir‡ def eval_code(codew # ..s enq enp $irb = IRB::Irb.new(nil, IRB::StdioInputMethod.neww ` 'exit' `$irb.eval_code( )` start evalAsync start on exit eval evalAsync callback = : : => =
62. https:/ /github.com/kateinoigakukun/irb.wasm
63. THE CHallenge bin/rails <whatever>
64. One-shot Interactive rails new rails generate rails routes rails server rails console
65. One-shot Interactive rails new rails generate rails routes rails server rails console Solution: delegate to Rails
66. One-shot Interactive rails new rails generate rails routes rails server rails console Solution: delegate to Rails
67.  É Ç Æ Å Ä Ã Â À 1Á 1 1É 1Ç 1Æ 1Å 1Ä 1Ã 1Â 1À 2Á 2 22 export default class this async function const await this async function return new return this ExternalCommands X (port) X . (vm) X server (vm, {skipRackup })I server. (port, () X . ( ${port} )H . ( )H })H 2 1 () X . (vm) X IRBRepl(vm). ()H 2 1 (vm) X . (vm)H 2 } server command createRackServer listen log log console command start invoke command = = : => console console = true `Express.js server started on port ` `Use Ctrl-C to stop`
68. What about the UI?
69.  É È Ç Å Ä Ã Â À 1Á 1 1É 1È 14 import from const await const await const await await await { WebContainer } 4 webcontainerInstance WebContainer. ()5 files { {file {contents }}}5 webcontainerInstance. (files)5 process webcontainerInstance. ( , [ ])5 process.exit5 webcontainerInstance. ( , [ , ])5 webcontainerInstance. ( , (port, url) (iframeEl.src url)); '@webcontainer/api' "..." 'npm' 'install' 'npm' 'run' 'dev' 'server-ready' // Instantiatinf // File syste” // `npm install‘ // `npm run dev‘ // Previe = = : : : = => = boot mount spawn spawn on 'package.json'
70. https://tutorialkit.dev/
71. TutorialKit UI WebContainer runtime rails.wasm Ruby VM: WASM + WASI Gems Native extensions System tools PGLite Rack-compatibl— web server Lesson files Previep Iframe T erminal UI App code
72. TutorialKit UI WebContainer runtime rails.wasm Ruby VM: WASM + WASI Gems Native extensions System tools PGLite Rack-compatibl— web server Lesson files Previep Iframe T erminal UI App code
73. TutorialKit UI WebContainer runtime rails.wasm Ruby VM: WASM + WASI Gems Native extensions System tools PGLite Rack-compatibl— web server Lesson files Previep Iframe T erminal UI App code
74. TutorialKit UI WebContainer runtime rails.wasm Ruby VM: WASM + WASI Gems Native extensions System tools PGLite Rack-compatibl— web server Lesson files Previep Iframe T erminal UI App code
75. TutorialKit UI WebContainer runtime rails.wasm Ruby VM: WASM + WASI Gems Native extensions System tools PGLite Rack-compatibl— web server Lesson files Previep Iframe T erminal UI App code
76. TutorialKit UI WebContainer runtime rails.wasm Ruby VM: WASM + WASI Gems Native extensions System tools PGLite Rack-compatibl— web server Lesson files Previep Iframe T erminal UI App code
77. https://rails-tutorial.evilmartians.io
79. https://bolt.new
80. github.com/palkan/rails-tutorial-template
84. THANK YOU Albert Pazderi Vladimir Dementyev Evil MartianA evilmartians.com