Opal.rb

Ruby

Opal.rb

Elia Schito

#frontend-development

Opal.rb

by Elia Schito

In this engaging talk at wroc_love.rb 2016, Elia Schito introduces Opal, a Ruby to JavaScript source-to-source compiler that allows Ruby developers to write browser-compatible code in a Ruby-like syntax. He begins by addressing common challenges faced by web developers who often struggle with JavaScript, explaining that many come from Ruby backgrounds and may feel overwhelmed by JavaScript's nuances.

Key points discussed include:

- Developer Background: Schito presents 'Joe', the average Ruby developer, highlighting the skills he typically possesses and his need to deal with JavaScript despite a preference for Ruby.

- Opal Introduction: He explains Opal's purpose, positioning it as a means to enable Ruby developers to leverage their Ruby skills in web development by compiling Ruby code to JavaScript.

- Advantages of Opal: Schito discusses how Opal retains many features of Ruby, including methods and instance variables, while translating these elements efficiently to JavaScript. He emphasizes that Opal is production-ready, having been used in real applications since 2012.

- Current Status and Community: He shares that Opal has gained significant traction, boasting over 11K Ruby spec examples, and highlights active contributions from the community, positioning Opal as a viable alternative for Ruby developers.
- Practical Demonstration: The latter half of the presentation consists of a live coding demonstration where Schito builds a simple game using Opal, showcasing its functionality in real-time and revealing its ease of use in web application development.

- Caveats and Differences: He notes some significant differences between Ruby and JavaScript, such as mutable strings and numeric types, which developers should be aware of when transitioning between the two languages.

To conclude, Schito encourages developers to explore Opal as a way to bridge their Ruby expertise with modern web development practices. He opens the floor to questions, inviting feedback and engagement from the audience, reinforcing the community-oriented spirit of the presentation.

00:00:11.540 Hi everyone! I'm really pleased to be here in Poland, and I will start by quoting Angel, who just said, "You won't go and do microservices with JavaScript." Let's talk about that. Maybe it's not that crazy. Maybe you won't go writing it in JavaScript, but who knows?

00:00:24.130 This is a quotation from Mats, and it’s very true and very interesting. But in 2016, this is what we face. I don't think anyone here is going to decide between Assembly and something else, but most of us, I think, as children, had to do some JavaScript. So, let me introduce you to Joe, the average developer from the stock images of 'Mabel.' Joe has done some Rails, can use Capistrano, practice Test-Driven Development (TDD), and knows about jQuery.

00:00:55.970 He knows about HTML, CSS, and how many people face it? They are kind of like this guy. Okay, so this is Joe.

00:01:18.730 But the reality is that he has to do some JavaScript. I think most of us are web developers, right? Is there anyone here who is not a web developer? Nice, one hand! Okay, so we all have to deal with some JavaScript. We often offload the JavaScript to some front-end developer. We try to survive with JavaScript, and the reason is probably that we come from Ruby. I think we all come from Ruby.

00:01:43.989 What have you noticed when you compare JavaScript to Ruby? You know that if you instantiate a new Boolean, passing in 'true' and try to compare it with 'true,' the values can be different. There are all kinds of nuances in JavaScript, which, by the way, is a nice language. Quoting Mats again, it's just a bit more primitive than our beloved Ruby.

00:02:11.890 Probably the major problem is that it lacks a really good core library. So, I want to invite you to take a fresh look at JavaScript. This is very true because we are all used to writing applications with the metaprogramming of Active Record, callbacks, and all that stuff. Maybe we are not bored by Ruby, but we are used to it, and it presents a challenge.

00:02:43.930 I invite you to try Opal. If anything, because it's fresh, it's funny, and I don't know how many of you have ever tried UI with RubyQT or the OTC SDK? No one? Oh wow, good! I've done that too, and well, it's different. It's very different.

00:03:21.510 You encounter different challenges, such as programming with threads in Ruby—something almost no one does. By the way, I recommend that too, because if you want to have some fun, you can do cool stuff with that.

00:03:54.400 So, Opal is a Ruby to JavaScript source-to-source compiler. This means that we don't have a virtual machine or some complicated Assembly compiler. Instead, we translate concepts from Ruby to JavaScript. For example, a method in Ruby corresponds to a function in JavaScript, a class in Ruby is a prototype chain in JavaScript, and an array in Ruby will be an array in JavaScript.

00:04:44.860 This allows us to be fast because we don't have any issues with performance, yet we retain the great features of Ruby. For example, methods are distinct from instance variables. As for some numbers about Opal, we have around 3K stars, which I am proud of. We’ve passed 10K; actually, it's 11 recently, of Ruby spec examples.

00:05:52.240 If you don't know about the Ruby spec project, it started with Ruby news to test the Ruby language and to ensure Ruby implementations behave just like Ruby. The original Ruby tests are not that precise; they are more like smoke tests. They're good for what they do, but this was necessary for Ruby news.

00:06:29.150 Over time, it became a good thing for other implementations as well; JRuby uses it, and I believe that a lot of Ruby implementations rely on this.

00:06:58.579 With Opal, we have method missing with blocks, we have required and download with classes, singleton classes, modules, mixins, and a good chunk of the standard library. We also bridge a number of classes, such as Arrays, Strings, Regular Expressions, Functions, and Booleans.

00:07:32.349 This happens because when you use Opal, the class hierarchy is a prototype chain. Instance variables are just properties, and constant lookups are done through the prototype chain.

00:08:00.140 This is important because all the optimizations and features done in JavaScript by the browsers and vendors will improve performance significantly. However, there are a small number of caveats. I might add that probably the first issue will not be with Opal but will arise from the differences with Ruby 3, as our strings are JavaScript strings.

00:08:50.850 Since JavaScript strings are mutable, you can modify them, which contrasts with Ruby's frozen string literal feature that was introduced in Ruby 2.3. By using that magic comment, you can tell Ruby to freeze all strings in a file by default.

00:09:36.450 Another notable difference is that in JavaScript, numbers are all floats. Since we map numbers to JavaScript numbers, all numbers in Opal are floats too. Of course, we miss some capabilities that can be performed in a browser, like threading or opening files, but you can do some of that stuff with Node.

00:10:03.140 I still don’t know of anyone who has implemented microservices in Node using Opal, but you can do it if you want.

00:10:38.100 Opal is production-ready. I have been deploying it since 2012 in production. The site was big enough that I can claim that millions of users have used it. We have maintained the same codebase for both mobile and desktop applications without any issues.

00:11:12.450 As you can see, it used to be smaller, around 30K, and now it's bigger because we are implementing more and more features from Ruby itself.

00:11:35.640 However, the average image in your site is still significantly larger than that. So, this presentation is basically divided into two parts.

00:11:56.490 The first part I have just finished, and then I want to show you some stuff to give you a feel of how neat it is to program with Opal and how fun it is. One thing I want to add is that if you are interested in deepening your understanding of Ruby or JavaScript, this is a wonderful way.

00:12:26.210 There is a bunch of issues open, as you can imagine, on the Opal repository, more or less difficult. You basically have tasks that are already there, so you will find failing specs that you must implement to make them pass.

00:12:56.830 There are at least two or three contributors who use the project as a kata or exercise, so you will get examples that are not passing, and you need to implement the solutions.

00:13:15.490 But before the demo, let's do a quick crash course on how to use it more practically. The command line interface is more or less like the Ruby one.

00:13:51.500 So, you have a dash to pass inline evaluation, and you can add dash C to compile to JavaScript. Then you can run it just as you would typically in Ruby.

00:14:14.460 You have dash R to require files, and that's up for Kaiser, which stands for runner. You can run stuff in a server and open it in the browser.

00:14:29.720 This is a really great way to debug code. I think if there were something like this for Ruby, it would be a lot different. It's like an IDE for your program.

00:14:43.380 You do have a wrapper for jQuery, which is useful for simple operations. You can select the body and manipulate it, and we also have an Opal browser.

00:15:02.650 This is somewhat similar to how you use the browser in JavaScript. The person who implemented it has gone through the whole Mozilla Developer Network and transcribed all the documentation.

00:15:31.620 You can do the same things you can do with jQuery, but in a more Ruby-like way. Now, let's run some code.

00:16:05.010 We will open up some implementations; I won’t be implementing the full page with an engine or something like that. I already have one prepared that I created the other day.

00:16:25.090 So, if it’s buggy, it's my fault: be patient. Okay, let’s see what we have.

00:16:39.740 We have this page, which looks quite ordinary. I have a first implementation that runs in the console.

00:16:56.900 It’s really simple. You just use the arrow keys or letters to move the items.

00:17:08.370 You’ll need to track a key and then press Enter to move to the new state. Let’s see it in action.

00:17:38.030 If I do nothing, the piece comes down. Okay, it works. Let’s try to make it game over.

00:17:56.960 I’m not very good, but I think this is already funny. Now, let’s try to modify this for the browser. Let's see how that works.

00:18:12.950 I have three implementations in three different ways for Opal; we'll try to do it live, but we can always fall back to the already prepared implementations.

00:18:28.170 We require the necessary libraries, like potato and some scoring pieces for the game.

00:18:51.530 We also have a color map and the grid printer, which takes an array of arrays and allows us to manipulate outputs.

00:19:08.290 As you can see, if the cell is a string or symbol which represents a color, we get a new color from the list.

00:19:50.820 We make a note of it, taking into account that emojis will take two spaces. This establishes the grid.

00:20:35.850 After this, we instantiate the game and start the main loop. The loop will progress the game, letting the figure move down, and we will print everything using the lambdas we prepared.

00:21:24.567 When the game is over, we will alert the user. And there you have it. It's quite simple, as you can see.

00:22:08.190 Next, let’s enable the jQuery functionality. We already have a configuration for Rock that includes all the necessary components.

00:24:12.950 Now, we add the relevant scripts to our HTML to include the required libraries and start building a table in grid-like style. We place our game objects inside the cells of the table.

00:24:57.170 This looks good so far.

00:25:03.960 At this point, things might seem tedious to watch. Please let me know if you find my typos and mistakes boring, and we can switch to looking at the already prepared implementation.

00:26:04.672 Let's continue with building it. We have our table.

00:26:39.200 Now we need to select the right cell, which requires a few more lines of code.

00:27:20.430 We need to capture the keyboard events to move the pieces correctly, which is what makes the game dynamic.

00:28:06.210 One good thing is that we can jump to JavaScript easily for certain functionalities in Opal, all while keeping the syntax Ruby-like.

00:28:45.470 We will set an interval to advance the game every half a second. Let's see if it works.

00:29:23.920 Now, we encountered a runtime error. Let’s debug what went wrong.

00:30:14.070 We can inspect frozen objects to see what's going on. It's critical to trace back the lines of the instance variables.

00:30:57.340 After debugging and fixing the issues, we should now be able to see the shapes progressing and the game rendering correctly.

00:31:37.589 This will include all necessary functionality to control the pieces and win the game smoothly.

00:32:44.890 As we finish our set up, let’s review the documentation to ensure everything works as intended.

00:33:21.970 Now, we can go through the code and understand how we can integrate with HTML to manage more complex interactions.

00:34:00.390 I think we'll take a brief look at some alternative implementations, including a simple HTML DSL, and check for enhancements and optimizations.

00:35:01.189 In the end, these methods offer practical tools for those who want to expand their projects and improve their approach to browser-based applications with Opal.

00:35:45.040 Thank you for attending this talk. I am open to any questions or criticisms as we wrap up.

00:36:13.720 I hope you all enjoyed the session!

wroc_love.rb 2016