opal-rails VS opal-jquery

Opal itself aims just at creating a Ruby runtime and a couple of life improvements, but there exist a couple of helper gems, for instance Opal-Browser (for an idiomatic API to interact with DOM and other browser APIs), Opal-Rails (for integrating with a Sprockets pipeline of Rails), Opal-RSpec (to test your frontend application). There exist a number of libraries and bindings to JS libraries for Opal.

For Rails integration we provide opal-rails, a Gem, that after inclusion will transparently handle .rb files in your JavaScript asset directory (via Sprockets). To interface with a web browser, you would also need to use opal-browser. As an alternative you can use Hyperstack, which deeply integrates React, Rails and Opal.

Opal itself is a low-level thing, not depending on Rails whatsoever. We provide an official Gem for integration with Rails that integrates everything nicely and allows you to have .rb files in your JavaScript assets directory. Unlike Rails, Opal is not opinionated, to interface with web browser APIs properly you need to either use a library that wraps DOM directly, use a similar one that wraps jQuery or use Hyperstack, a fully-fledged Rails-integrated framework based on React that also allows you to share your models between frontend and backend. It's also possible to not use any of those and interface JavaScript APIs directly using an API that looks like this: $$[:document][:location].replace("https://opalrb.com/") or simply embed JavaScript with a backtick notation: `document.location.replace(#{@url})`.

It's possible to build a framework on top of Opal Ruby, like notably Hypestack, which uses uses Opal and React. There are also some wrappers like opal-jquery, and I even created opal-d3 once upon a time, but I don't actively maintain it anymore.

You can use opal-jquery, which is a wrapping layer over jQuery and in its API it combines the best worlds of jQuery and Ruby.

Next, let's refactor the code to utilize Opal jQuery in Ruby instead of plain Opal. This simplifies the code in app/assets/javascript/application.js.rb quite a bit:

Opal itself is a low-level thing, not depending on Rails whatsoever. We provide an official Gem for integration with Rails that integrates everything nicely and allows you to have .rb files in your JavaScript assets directory. Unlike Rails, Opal is not opinionated, to interface with web browser APIs properly you need to either use a library that wraps DOM directly, use a similar one that wraps jQuery or use Hyperstack, a fully-fledged Rails-integrated framework based on React that also allows you to share your models between frontend and backend. It's also possible to not use any of those and interface JavaScript APIs directly using an API that looks like this: $$[:document][:location].replace("https://opalrb.com/") or simply embed JavaScript with a backtick notation: `document.location.replace(#{@url})`.