opal

Ruby ♥︎ JavaScript

4,829

331

4,829

143

View on GitHub View on NPM

Top Related Projects

Quick Overview

Opal is a Ruby to JavaScript source-to-source compiler and runtime. It allows developers to write Ruby code that can be executed in web browsers, enabling the use of Ruby for both server-side and client-side development. Opal aims to provide a seamless Ruby experience for web applications.

Pros

Enables writing Ruby code for client-side web development
Provides access to JavaScript APIs and DOM manipulation through Ruby syntax
Supports a large subset of Ruby's core library and standard library
Allows for easy integration with existing JavaScript libraries and frameworks

Cons

Performance may not be as optimal as native JavaScript in some cases
Not all Ruby features and libraries are fully supported
Debugging can be challenging due to the compilation process
Learning curve for developers unfamiliar with Ruby-to-JavaScript compilation concepts

Code Examples

Basic Ruby-to-JavaScript compilation:

# Ruby code
puts "Hello, Opal!"

# Compiled JavaScript
Opal.puts("Hello, Opal!");

DOM manipulation with Opal:

require 'opal'
require 'native'

document.querySelector('#my-element').inner_html = "Updated with Opal"

Using JavaScript libraries with Opal:

require 'native'

$$.jquery('#my-element').hide()

Creating a simple class:

class Person
  attr_reader :name

  def initialize(name)
    @name = name
  end

  def greet
    puts "Hello, I'm #{@name}!"
  end
end

person = Person.new("Alice")
person.greet

Getting Started

To get started with Opal, follow these steps:

Install Opal via RubyGems:
```
gem install opal
```

Create a simple Ruby file (e.g., app.rb):

require 'opal'

puts "Hello from Opal!"

Compile the Ruby file to JavaScript:
```
opal app.rb > app.js
```
Include the compiled JavaScript in your HTML file:
```
<script src="app.js"></script>
```

For more advanced usage and integration with build tools, refer to the official Opal documentation.

Competitor Comparisons

coffeescript

16,501

Unfancy JavaScript

Pros of CoffeeScript

More established and widely adopted in the JavaScript community
Simpler syntax with significant whitespace, leading to cleaner and more readable code
Extensive documentation and large ecosystem of tools and libraries

Cons of CoffeeScript

Declining popularity in recent years as JavaScript has evolved
Requires an additional compilation step, which can complicate the build process
Some developers find the syntax too different from JavaScript, leading to a steeper learning curve

Code Comparison

CoffeeScript:

square = (x) -> x * x
list = [1, 2, 3, 4, 5]
squares = (square num for num in list)

Opal (Ruby-like syntax):

def square(x)
  x * x
end
list = [1, 2, 3, 4, 5]
squares = list.map { |num| square(num) }

Both Opal and CoffeeScript aim to improve upon JavaScript by offering alternative syntaxes. CoffeeScript provides a more concise and expressive language that compiles to JavaScript, while Opal allows developers to write Ruby-like code that can run in the browser. The choice between the two depends on the developer's preference for Ruby-style or CoffeeScript-style syntax, as well as the specific project requirements and ecosystem compatibility.

parser

1,583

A Ruby parser.

Pros of Parser

Focused specifically on Ruby parsing, providing a more specialized and potentially more accurate tool for Ruby code analysis
Offers a pure Ruby implementation, making it easier to integrate into Ruby-based projects without external dependencies
Provides a more comprehensive set of AST node types, allowing for more detailed code analysis

Cons of Parser

Less actively maintained compared to Opal, with fewer recent updates and contributions
Limited to parsing Ruby code, while Opal offers a broader range of features including Ruby-to-JavaScript compilation
May have a steeper learning curve for users not familiar with Ruby's abstract syntax tree (AST) structure

Code Comparison

Parser example:

require 'parser/current'
ast = Parser::CurrentRuby.parse("puts 'Hello, world!'")
puts ast.type  # :send

Opal example:

require 'opal'
js_code = Opal.compile("puts 'Hello, world!'")
puts js_code  # Opal.puts("Hello, world!")

While Parser focuses on generating an AST for Ruby code analysis, Opal compiles Ruby code to JavaScript, demonstrating their different primary use cases.

mruby

5,295

Lightweight Ruby

Pros of mruby

Lightweight and embeddable, suitable for resource-constrained environments
Closer to standard Ruby syntax and behavior
Supports native extensions and C integration

Cons of mruby

Smaller ecosystem and fewer available libraries
Less comprehensive Ruby language support
Requires compilation, not as easily portable across platforms

Code Comparison

mruby:

def fibonacci(n)
  return n if n <= 1
  fibonacci(n - 1) + fibonacci(n - 2)
end

puts fibonacci(10)

Opal:

def fibonacci(n)
  n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2)
end

puts fibonacci(10)

Key Differences

mruby is designed for embedding in C applications, while Opal transpiles Ruby to JavaScript
Opal focuses on web development and browser compatibility, mruby targets embedded systems and IoT devices
mruby has a smaller footprint and faster execution, Opal leverages existing JavaScript ecosystems

Use Cases

mruby: Embedded systems, game scripting, IoT devices
Opal: Web applications, Ruby-to-JavaScript migration, browser-based Ruby development

Community and Ecosystem

mruby has a smaller but dedicated community, focused on embedded and low-level applications
Opal has a larger ecosystem, with better integration for web development frameworks and tools

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Opal

Opal is a Ruby to JavaScript source-to-source compiler.
It also has an implementation of the Ruby corelib and stdlib.

Community:

Code:

Sponsors:

Usage

See the website for more detailed instructions and guides for Rails, jQuery, Sinatra, rack, CDN, etc. https://opalrb.com.

Compiling Ruby code with the CLI (Command Line Interface)

Contents of app.rb:

puts 'Hello world!'

Then from the terminal

$ opal --compile app.rb > app.js # The Opal runtime is included by default
                                 # but can be skipped with the --no-opal flag

The resulting JavaScript file can be used normally from an HTML page:

<script src="app.js"></script>

Be sure to set the page encoding to UTF-8 inside your <head> tag as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="app.js"></script>
    â¦
  </head>
  <body>
    â¦
  </body>
</html>

Just open this page in a browser and check the JavaScript console.

Compiling Ruby code from Ruby

Opal.compile is a simple interface to just compile a string of Ruby into a string of JavaScript code.

Opal.compile("puts 'wow'")  # => "(function() { ... self.$puts("wow"); ... })()"

Running this by itself is not enough; you need the opal runtime/corelib.

Using Opal::Builder

Opal::Builder can be used to build the runtime/corelib into a string.

Opal::Builder.build('opal') #=> "(function() { ... })()"

or to build an entire app including dependencies declared with require:

builder = Opal::Builder.new
builder.build_str('require "opal"; puts "wow"', '(inline)')
File.binwrite 'app.js', builder.to_s # must use binary mode for writing

Compiling Ruby code from HTML (or using it as you would with inline JavaScript)

opal-parser allows you to eval Ruby code directly from your HTML (and from Opal) files without needing any other building process.

So you can create a file like the one below, and start writing ruby for your web applications.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.opalrb.com/opal/current/opal.js"></script>
    <script src="https://cdn.opalrb.com/opal/current/opal-parser.js" onload="Opal.load('opal-parser')"></script>

    <script type="text/ruby">
      puts "hi"
    </script>

  </head>
  <body>
  </body>
</html>

Just open this page and check the JavaScript console.

NOTE: Although this is possible, this is not really recommended for production and should only be used as a quick way to get your hands on opal.

Running tests

Setup the project:

$ bin/setup

The test suite can be run using:

$ bundle exec rake

This command will run all RSpec and MSpec examples in sequence.

MSpec

MSpec tests can be run with:

$ rake mspec

Alternatively, you can just load up a rack instance using rackup, and visit http://localhost:9292/ in any web browser.

RSpec

RSpec tests can be run with:

$ rake rspec

Automated runs

A Guardfile with decent mappings between specs and lib/corelib/stdlib files is in place. Run bundle exec guard -i to start guard.

Code Overview

What code is supposed to run where?

lib/ code runs inside your Ruby env. It compiles Ruby to JavaScript.
opal/ is the runtime+corelib for our implementation (runs in browser).
stdlib/ is our implementation of Ruby's stdlib. It is optional (runs in browser).

lib/

The lib directory holds the Opal parser/compiler used to compile Ruby into JavaScript. It is also built ready for the browser into opal-parser.js to allow compilation in any JavaScript environment.

opal/

This directory holds the Opal runtime and corelib implemented in Ruby and JavaScript.

stdlib/

Holds the stdlib currently supported by Opal. This includes Observable, StringScanner, Date, etc.

Browser support

Internet Explorer 11
Firefox (Current - 1) or Current
Chrome (Current - 1) or Current
Safari (Current - 1) or Current
Opera (Current - 1) or Current

Any problems encountered using the browsers listed above should be reported as bugs.

(Current - 1) or Current denotes that we support the current stable version of the browser and the version that preceded it. For example, if the current version of a browser is 24.x, we support the 24.x and 23.x versions.

12.1x or (Current - 1) or Current denotes that we support Opera 12.1x as well as the last 2 versions of Opera. For example, if the current Opera version is 20.x, then we support Opera 12.1x, 19.x and 20.x but not Opera 15.x through 18.x.

Contributors

This project exists thanks to all the people who contribute.

Versioning

Opal will broadly follow semver as a version policy, trying to bump the major version when introducing breaking changes. Being a language implementation we're also aware that there's a fine line between what can be considered breaking and what is expected to be "safe" or just "additive". Moving forward we'll attempt to better clarify what interfaces are meant to be public and what should be considered private.

Backers

Thank you to all our backers! ð [Become a backer]

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of CoffeeScript

Cons of CoffeeScript

Code Comparison

Pros of Parser

Cons of Parser

Code Comparison

Pros of mruby

Cons of mruby

Code Comparison

Key Differences

Use Cases

Community and Ecosystem

Convert designs to code with AI

README

Opal

Usage

Compiling Ruby code with the CLI (Command Line Interface)

Compiling Ruby code from Ruby

Using Opal::Builder

Compiling Ruby code from HTML (or using it as you would with inline JavaScript)

Running tests

MSpec

RSpec

Automated runs

Code Overview

lib/

opal/

stdlib/

Browser support

Contributors

Versioning

Backers

Sponsors

Donations

Sponsored Contributions

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days