How to generate JavaScript Ruby
Educative Answers Team
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
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.
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
View all Courses
