
Opal: Ruby in Your Browser – the Basics - bentanweihao
http://www.sitepoint.com/opal-ruby-browser-basics/
======
davidw
I'm not terribly convinced by these things that compile to javascript. I don't
much care for javascript, but I'd rather take the bull by the horns than deal
with a bunch of generated code, _especially_ in any kind of commercial setting
where it's going to be a lot easier to hire JS people rather than people who
are _both_ X-lang and JS experts.

That said, it's very much a cool hack, and worth doing on that basis alone.

~~~
xxxmadraxxx
I'm inclined to agree. I'm not one of those Javascript bashers. It's a handy
enough language and tweaking/hacking/breaking JS enabled webpages is the way a
lot of us amateur coders dip a toe in the water.

Unfortunately I think JS is having a lot of responsibility heaped on its
slightly creaky shoulders these days, due to the growth in mobile intarwebsing
and every man and his dog looking for a quick way to build the app that is
going to bring them fame and fortune. As a result of this, we're seeing a lot
of these frameworks which compile [arguably!] 'better' fuller-featured
languages down into JS.

Personally I'd rather a scenario where people could code in _< insert language
of choice>_ and embed this in HTML as easily and ubiquitously as JS can be
embedded. A bit of a pipe-dream I know, but wouldn't it be great if we could
exploit the cross-platform accessibility of web apps, without having to turn
everyone into a Javascript hacker?

~~~
sciguy77
> Personally I'd rather a scenario where people could code in <insert language
> of choice> and embed this in HTML as easily and ubiquitously as JS can be
> embedded.

That would indeed be amazing. Anyone want to build it? :P

------
nnq
If one needs to write code like:

    
    
        `#{context}.lineTo(#{x}, #{height})`
    

...you're doing it wrong. Please do figure out a way to "automagically" make
things work without `...` or just don't bother.

`...` should be a last resort option for when you just need to do something
that can't be done any other way, not something that should be peppered over
the entire code.

~~~
dham
Yea. They have a canvas wrapper that this guy did not use so you don't have to
do that. With that being said, this project
[https://github.com/rubys/ruby2js](https://github.com/rubys/ruby2js) is more
appealing to me. Sure it doesn't pass more RubySpec tests than Rubinius like
Opal does, but it works.

The Angular interoperability is especially appealing to me. It also generates
readable javascript.

~~~
ylluminate
Use opal-browser ([https://github.com/opal/opal-
browser](https://github.com/opal/opal-browser)). Great stuff.

------
toddan
Why is it so hard for browsers to implement a common set of byte-code. Then we
all get what we want and it would make it much simpler to port your favorite
language to the browser.

This compile to javascript trend seems so brittle and frail.

~~~
teacup50
We may finally see this, if only as a side effect of Eich's departure from
Mozilla.

Google and Mozilla are the only mainstream browser vendors that have an
incentive to offer a bytecode alternative to the JavaScript status quo,
whereas Apple and Microsoft would simply be undermining their respective
platform positions.

This means that Mozilla _could_ have worked with Google to form a bloc; Chrome
and Firefox would have been the only browsers to support better web
technology, and that might have been enough to force Microsoft and Apple's
hand.

Instead, Eich stuck to his "JavaScript First" guns for _years_ , wasting
market opportunities and in the process, serving as the swing vote that held
the entire web back.

I hope that the next CEO of Mozilla realizes that for platforms like Firefox
OS to have a snowball's chance in hell, they need to work with Google to move
past HTML/CSS/JS.

~~~
xrd
Chrome (or rather Chromium) will soon have Dart support built into it. There
you go.

------
ylluminate
We're using this on a large'ish project at the moment and thrilled with the
productivity gains. Right now we're using Rails 4.1RC2 + Opal and thrilled
with the readability that we now have across the board. This is good sized
project for several thousand concurrent users and was to test the waters
before using for something larger on our plate.

~~~
jrmiii
I'm curious what kind of features you have on the client side that you're
using this for.

~~~
ylluminate
Quite a few with some diversity. Right now there are a mapping functions /
integration with Google Maps and various social functions, including heavy
communications (mostly text at the moment). We have a bit of animation and
using the opal-jquery plugin as well, which is quite nice. The opal-browser
library also gives a nice Nokogiri feel to working with the DOM.

------
adamthegoalie
How is this "Ruby in Your Browser", per se? You're just saying that you've
used Ruby to build a web page now in the browser, correct?

I ask because I'm seeking something more like a Ruby on Rails Implementation
waiting for you in your browser, in effect, when you arrive at the service's
website, which you can then take with you if you'd like, as a VM, in any
number of ways.

~~~
ylluminate
Well, funny enough you can do rails with opal (they implemented Active Support
([https://github.com/opal/opal-activesupport](https://github.com/opal/opal-
activesupport)), which was kind of an answer to DHH and another before him
thinking it couldn't be done, BUT... the real power comes from using it with
something like rails. For example, we use it with rails 4.1rc2 at present to
have ruby everywhere. So instead of just .js files or coffeescript, we have
.js.rb files that pass through opal. Amazing readability improvements and a
great feelings just going straight ruby across the board. There are some
really slick little frameworks like `lissio` and `vienna` as well that offer
`sinatra` like solutions right on opal.

The maker of `lissio` also started hacking on a little project that is not
complete, but gives an idea of a WIP lissio project here:
[https://github.com/meh/gwentoo](https://github.com/meh/gwentoo)

Just kinda nice to see how it goes together and how very flexible it is.

------
noisedom
Nice work. I too wish browsers had native support for Ruby.

Like have others have said, I'm really turned off by the `...` js evaluations
all over the code. I wonder why that opal-jquery gem doesn't have cleaner ways
for interacting with the DOM. Is that the only way you can do it?

------
melvinram
I looked at this just a few days ago but decided not to pursue it any further
because of how much junk JS it needs to generate and how readable that junk JS
would be during debugging.

~~~
dham
You might want to look at
[https://github.com/rubys/ruby2js](https://github.com/rubys/ruby2js)

~~~
ylluminate
Opal is much more mature and useful. I took a good long look at this before,
but we decided on pursuing things with Opal instead.

------
kasperbn
Very cool project. Like others say, it can be a pain to debug generated code
in opal, clojure, elixir etc. But that's also true of the code generated by
the C compiler. This is a chicken-and-egg thing. Either consumer hardware gets
so fast that it's feasible to implement the language vm's in javascript or
browsers will support other mechanisms for implementing them. But only when
these projects are used by many people, which will happen when the code is
easy to debug.

~~~
ylluminate
Opal debugging seems to be better than some of the other ones I've played
with.

------
TheAceOfHearts
One big problem with this is that you still end up having to use raw JS
anyway. Debugging is usually a big hassle too.

~~~
adambeynon
Opal creator here. Debugging in Opal is no problem at all with source maps. I
only need to look at generated code when Im working on improving the
compiler/fixing bugs. Developing end apps always results in using the chrome
debugger stepping through source-mapped code.

About the raw JS, to use my current app as an example, I have one line of
inline JS (using `...` notation) which is just to initialize FastClick.
Writing a ruby wrapper wasn't worth it for one method call. Anytime I see more
then 1 line of inline JS inside a file, a ruby wrapper ends up being a much
better idea, or indeed using the `Native` class which handles all the corner
issues of calling native JS libs.

I think the problem with Opal is the documentation, which needs huge
improvements, to show the proper/realistic development experience with it.

~~~
jrmiii
What kind of client side coding are you using it for?

~~~
adambeynon
Various projects. Two recent ones are a POS system running on the iPad. The
app is wrapped using Cordova for native scanner/receipt printer access, but
the rest is built in Opal with a Sinatra backend. So lots of client models,
lots of UI rendering using our opal-haml integration. Considering the POS
system is dealing with thousands of product lines, performance on the iPad is
great. Also, testing using rspec for all the opal client side code as the
models are shared on the backend. Testing the same code using the same specs
on both client and server is really nice, and saves a huge amount of
duplication. It all comes from some extensions to Vienna which treats the opal
stuff as a view layer replacement. Hoping to blog most of it soon, including
the Cordova integration.

------
Sovietaced
This is amazing but I agree with others, dealing with generated code can be
tricky in production environments.

~~~
ylluminate
Def. give this a try. You'll change your tune a bit.

