[WasmCon 2024] From client to server: Ruby on Rails on WebAssembly

Ruby on Rails is a famous “batteries included” framework for the rapid development of web applications. Its full-stack promise comes in a server-oriented, or HTML-over-the-Wire flavor: a server oversees everything from database interactions to your application UI/UX. And whenever there is a server involved, the network and its unpredictability come into play. No matter how much you enjoy developing with Rails, it would be hard to achieve the same level of user experience as with client-side and especially local-first frameworks. And here comes Wasm.

With the help of WebAssembly, we can do a radical shift—bring the Rails application right into your browser, and make it local-first!

In my talk, I want to discuss the challenges of making a classic web framework Wasm compatible, the techniques we can use to run server-first applications in the browsers and what are the use cases.

Transcript

1. Vladimir Dementyev Evil Martians FROM SERVER TO CLIENT Ruby on Rails on WebAssembly
2. palkan_tula palkan 2 rubyonrails.org
3. palkan_tula palkan 2 rubyonrails.org No Wasm detected !
4. palkan_tula palkan 3 github.com/palkan
5. palkan_tula palkan 3 github.com/palkan Still no Wasm !
7. Wasm! Wasm! Wasm! !
8. palkan_tula palkan 5 stackblitz.com
9. palkan_tula palkan 6 runruby.dev
10. palkan_tula palkan 7 ruby-lang.org
11. palkan_tula palkan 8 rubyonrails.org
12. palkan_tula palkan 9 rubyonrails.org
13. palkan_tula palkan Ruby VM Rails Components 10
14. palkan_tula palkan Ruby VM Gems Rails Components 11
15. palkan_tula palkan Ruby VM Gems Rails Components 12 Native extensions
16. palkan_tula palkan Ruby VM Gems Rails Components 12 Native extensions ruby.wasm handles this! !
17. palkan_tula palkan Ruby VM Gems Native extensions System tools Rails Components 13
18. palkan_tula palkan Ruby VM Gems Native extensions System tools Database Rails Components 14
19. palkan_tula palkan Ruby VM Gems Native extensions System tools Database Rails Components 14 Web Server
20. palkan_tula palkan Ruby VM Gems Native extensions System tools Database Rails Components 14 Web Server Storage
21. palkan_tula palkan Ruby VM Gems Native extensions System tools Database Rails Components 14 Web Server Storage Queue
22. palkan_tula palkan Ruby VM Gems Native extensions System tools Database Rails Components 14 Web Server Storage Queue API
23. palkan_tula palkan Ruby VM Gems Native extensions System tools Database Rails Components 14 Web Server Storage Queue API ??? !
24. palkan_tula palkan Framework = Abstractions + Infrastructure 15 Pure code Pluggable dependencies
25. palkan_tula palkan Good Framework = (Abstractions) + (Infrastructure) 16 Pure code Pluggable dependencies
26. palkan_tula palkan Ruby VM Gems Native extensions System tools Web Server Database Queue Storage API Rails Components 17
27. palkan_tula palkan Ruby VM Gems Native extensions System tools Web Server Database Queue Storage bundler active_storage rack active_record active_job API net/http Rails Components 17
28. palkan_tula palkan bundler active_storage rack active_record active_job net/http Rails Components 18 Abstractions Not Abstractions
29. palkan_tula palkan bundler active_storage rack active_record active_job net/http Rails Components 18 Abstractions Not Abstractions Just patch them! "
30. palkan_tula palkan Rails architecture design and Ruby openness make Rails on Wasm possible 19
31. palkan_tula palkan 20 rubyonrails.org
32. palkan_tula palkan 20 rubyonrails.org your browser
33. palkan_tula palkan rails new Demo: ReviewCon 21 Build a new full stack app
34. palkan_tula palkan rails new rails g scaffold ... Demo: ReviewCon 22 Build a new full stack app Scaffold models, controllers, views
35. palkan_tula palkan rails new rails g scaffold ... bolt.new Demo: ReviewCon 23 Ask AI to polish UI # Build a new full stack app Scaffold models, controllers, views
36. palkan_tula palkan wasmify:install Demo: ReviewCon 24 Rails on Wasm toolkit
37. palkan_tula palkan wasmify:install wasmify:pwa wasmify:pack Demo: ReviewCon 25 Rails on Wasm toolkit Generate a boot app (JS) Compile the whole app into app.wasm
38. palkan_tula palkan wasmify:install wasmify:pwa wasmify:pack on_wasm? Demo: ReviewCon 26 Compile the whole app into app.wasm Rails on Wasm toolkit Generate a boot app (JS) Make application Wasm-aware
39. palkan_tula palkan Running an entire Rails application within your browser is reality! 27 $ reviewcon2024.netlify.app
40. palkan_tula palkan Running an entire Rails application within your browser is reality! 27 Tell me more! ! $ reviewcon2024.netlify.app
41. palkan_tula palkan Ruby VM Gems Native extensions System tools Web Server Database Queue Storage bundler active_storage rack active_record active_job API net/http Rails Components 28
42. palkan_tula palkan sqlite.wasm Database 29 Database active_record config/database.yml database.yml default: &default adapter: sqlite3 production: # ... wasm: adapter: sqlite3_wasm development: <<: *default test: <<: *default database: storage/test.sqlite3 1 2 3 4 . 20 21 22 23 24 25 . 28 29 30 31
43. active_record/connection_adapters/sqlite3_wasm_adapter.rb sqlite3_wasm_adapter.rb module ActiveRecord module ConnectionAdapters class SQLite3WasmAdapter < SQLite3Adapter class ExternalInterface # ... def exec(...) JS.global[js_interface].exec(...) end end end end # ... end 1 2 3 4 . 20 21 22 23 24 25 . 229 230 Most functionality is inherited Query execution is delegated to a JS object
44. src/active_record.js active_record.js export function registerSQLiteWasmInterface(worker, db, opts = {}) { const name = opts.name || "sqlite4rails"; worker[name] = { exec: function (sql) { let cols = []; let rows = db.exec(sql, { columnNames: cols, returnValue: "resultRows" }); return { cols, rows, }; }, changes: function () { return db.changes(); }, }; } 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
45. palkan_tula palkan sqlite.wasm pglite Database 32 Database active_record config/database.yml database.yml default: &default adapter: sqlite3 production: # ... wasm: adapter: pglite development: <<: *default test: <<: *default database: storage/test.sqlite3 1 2 3 4 . 20 21 22 23 24 25 . 28 29 30 31
46. palkan_tula palkan Ruby VM Gems Native extensions System tools Web Server Database Queue Storage bundler active_storage rack active_record active_job API net/http Rails Components 33
47. palkan_tula palkan Service Worker Serve HTTP 34 pwa/rails.sw.js rails.sw.js // ... const initVM = async (progress, opts = {}) => { if (vm) return vm; if (!db) { await initDB(progress); } vm = await initRailsVM("/app.wasm"); return vm; }; const rackHandler = new RackHandler(initVM}); self.addEventListener("fetch", (event) => { // ... return event.respondWith( rackHandler.handle(event.request) ); }); . 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 Web Server rack Write your Rack-compatible server in JS
48. src/rack.js rack.js export class RackHandler { async process(request) { let vm = await this.vmSetup(); const railsURL = request.url; const railsHeaders = {}; for (const [key, value] of request.headers.entries()) { railsHeaders[`HTTP_${key.toUpperCase().replaceAll("-", "_")}`] = value; } try { const command = ` request = Rack::MockRequest.env_for( "${railsURL}", JSON.parse(%q[${JSON.stringify(railsHeaders)}]).merge( method: :${request.method} ) ) response = Rack::Response[*Rails.application.call(request)] status, headers, body = *response.finish {status:, headers:, body:} `; let res = vm.eval(command).toJS(); let { status, headers, body } = res; const resp = new Response(body, { headers, status, }); return resp; } catch (e) { this.logger.error(e); return new Response(`Application Error: ${e.message}`, { status: 500, }); } } } 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
49. src/rack.js rack.js export class RackHandler { async process(request) { let vm = await this.vmSetup(); const railsURL = request.url; const railsHeaders = {}; for (const [key, value] of request.headers.entries()) { railsHeaders[`HTTP_${key.toUpperCase().replaceAll("-", "_")}`] = value; } try { const command = ` request = Rack::MockRequest.env_for( "${railsURL}", JSON.parse(%q[${JSON.stringify(railsHeaders)}]).merge( method: :${request.method} ) ) response = Rack::Response[*Rails.application.call(request)] status, headers, body = *response.finish {status:, headers:, body:} `; let res = vm.eval(command).toJS(); let { status, headers, body } = res; const resp = new Response(body, { headers, status, }); return resp; } catch (e) { this.logger.error(e); return new Response(`Application Error: ${e.message}`, { status: 500, }); } } } 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 Boring code that translates requests/ responses from JS to Ruby and back !
50. palkan_tula palkan HTTP: challenges Serving files Handling multipart form data / uploads Managing cookies 36 Web Server rack Base64 and custom Rack middleware Cookie Store API FormData and Data URIs
51. palkan_tula palkan HTTP: the future wasi:http/proxy (WASI 0.2) 37 Web Server rack Implement incoming_handler right in your framework
52. palkan_tula palkan Ruby VM Gems Native extensions System tools Web Server Database Queue Storage bundler active_storage rack active_record active_job API net/http Rails Components 38
53. palkan_tula palkan Other Storage (uploads, assets) Background threads Outgoing HTTP Image processing 39 Storage active_storage Queue active_job API net/http File System API, OPFS Broadcast Channel API (multiple VMs) fetch() now, wasi/http future wasm-vips, magic-wasm
54. palkan_tula palkan Guides Recipes Ideas Wasmbook % 40 https://writebook-on-wasm.fly.dev How to get started with Wasm How to solve particular problems Why and when you may need it
55. Why?
56. palkan_tula palkan Rails on Wasm: Why? Joy of problem solving Pushing boundaries Practical applications 42 Of both Rails and Wasm Programming for happiness You can probably make some money out of it
57. palkan_tula palkan TLR=Try-Learn-Reproduce Offline-aware apps email clients, task boards Data-paranoid apps truly own your data Local-first desktop apps music players, notes 43 Rails on Wasm: Why? Tutorials, online playgrounds, bug reproductions Better offline experience Better data control Bring web frameworks productivity to desktop dev
58. palkan_tula palkan Leave the server bubble, go wherever you want with Wasm! 44
59. Thank you Demo: reviewcon2024.netlify.app Slides: evilmartians.com/events Twitter: @palkan_tula, @evilmartians