Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

ruby
javascript
compile
opal

How to generate JavaScript Ruby

Educative Answers Team
svg viewer

Why is Ruby preferred over JavaScript?

All web applications boil down to JavaScript, but developers often prefer languages other than JavaScript to develop their application because, at times, developing specific applications in JavaScript can become a bit tedious. There are a couple of reasons a programmer might prefer Ruby over JavaScript while developing an application:

  • Ruby is easy to learn and code.
  • Ruby is preferred to develop server-side applications over JavaScript.
  • Ruby is a completely object-oriented language; whereas, JavaScript is object-oriented but classless.

Fortunately, we have a transpilersource-to-source compiler that translates the source code of a language into another language. that lets us convert code written in Ruby into JavaScript. This transpiler is Opal.

Opal is a Ruby to JavaScript source-to-source compiler/transpiler. It comes packed with the Ruby corelib, is fast at runtime ,and has a small footprint. Opal lets you run your Ruby code on the browser by translating it to JavaScript. It serves as a useful tool for programmers who are comfortable with developing on Ruby and do not want to switch JavaScript.

svg viewer

Transpiling with Opal

First, you need to install the Opal gem by running the following command:

gem install opal

Next, transpile your code from an .rb file to a .js file by running the following command:

opal --compile {Name of .rb file} > {Name of .js file}

And voila, the compiled .js file can be used directly in the HTML <script> tag. Make sure you set the page encoding inside your <head> tag to utf-8:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src={Name of .js file}></script>
    …
  </head>
  <body>
    …
  </body>
</html>

Example

Look at this simple code that adds, subtracts, multiplies, and divides the numbers 5 and 6:

#addition
value = 5 + 6 
puts "Adding 5 and 6: #{value}"

#subtraction
value = 5 - 6 
puts "Subtracting 5 and 6: #{value}"

#multiplication
value = 5 * 6 
puts "Multiplying 5 and 6: #{value}"

#division
value = 5 / 6 
puts "Dividing 5 and 6: #{value}"

When this code is transpiled using Opal, it will look something like this:

/* Generated by Opal 1.0.3 */
(function(Opal) {
  function $rb_plus(lhs, rhs) {
    return (typeof(lhs) === 'number' && typeof(rhs) === 'number') ? lhs + rhs : lhs['$+'](rhs);
  }
  function $rb_minus(lhs, rhs) {
    return (typeof(lhs) === 'number' && typeof(rhs) === 'number') ? lhs - rhs : lhs['$-'](rhs);
  }
  function $rb_times(lhs, rhs) {
    return (typeof(lhs) === 'number' && typeof(rhs) === 'number') ? lhs * rhs : lhs['$*'](rhs);
  }
  function $rb_divide(lhs, rhs) {
    return (typeof(lhs) === 'number' && typeof(rhs) === 'number') ? lhs / rhs : lhs['$/'](rhs);
  }
  var self = Opal.top, $nesting = [], nil = Opal.nil, $$ = Opal.const_get_qualified, $ = Opal.const_get_relative, $breaker = Opal.breaker, $slice = Opal.slice, value = nil;

  Opal.add_stubs(['$+', '$puts', '$-', '$*', '$/']);
  
  value = $rb_plus(5, 6);
  self.$puts("" + "Adding 5 and 6: " + (value));
  value = $rb_minus(5, 6);
  self.$puts("" + "Subtracting 5 and 6: " + (value));
  value = $rb_times(5, 6);
  self.$puts("" + "Multiplying 5 and 6: " + (value));
  value = $rb_divide(5, 6);
  return self.$puts("" + "Dividing 5 and 6: " + (value));
})(Opal);

Upon inspection of the code generated by Opal, you can see that Opal first created a function for the arithmetic operations written in the Ruby code, and then used these functions to mimic the Ruby code.

You can play around with the Opal transpiler by writing your Ruby code and compiling it to JavaScript using this online transpiler.

RELATED TAGS

ruby
javascript
compile
opal
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring