00:00:18.710
Six years ago, my third son was just born. At the same time, I encountered one of the top language designers across the ocean, a beloved person to all of us. He was discussing something that changed the way I look at coding and programming, especially regarding open-source and my day job.
00:00:34.050
He revealed insights that uncovered something I always felt inside, especially since the first time I met Ruby. If there's one thing I'd like you to take from this presentation, I want to share this message with you in a clear and comprehensible way, allowing you to enjoy programming with Ruby.
00:01:02.100
So, what about Ruby? That's why we're all here. Some of us have been working with this language for many years. As Nick mentioned earlier, it's not uncommon to encounter frustration while working with Ruby, and it's not always a smooth experience. Yet, we are sticking with this language for a reason; there is something that resonates with us. This language has introduced many innovations in programming and has fostered a vibrant and creative community.
00:01:45.290
For example, we know that languages like Elixir and Swift are heavily inspired by Ruby, and even older programming languages like PHP and Java are adopting features reminiscent of Ruby. Numerous frameworks have been developed that mimic Rails, not just in technical aspects but in their approaches to code generation and ease of use.
00:02:18.820
Why Ruby? There are many valid reasons, and they are all true. One compelling aspect is its beauty; a well-written Ruby program is not only great to read but also visually appealing, generating a spark of joy.
00:02:40.480
We enjoy the freedom that Ruby offers. As DHH discussed in an excellent talk titled 'Why Ruby,' he emphasized this freedom to the extent that he wanted to rename 'monkey patching' to 'freedom patching' to change the negative connotations associated with it. Six years ago, Matz gave a talk explaining Ruby as a kind of fantasy world.
00:03:01.800
To me, that fantasy world is also our everyday reality. We use Ruby without questions about its structure, much like we expect the roof of a building to stay intact without worry. A significant amount of work has been poured into Ruby, and the gems we utilize daily show the direction and efforts of many people aimed at making our lives easier.
00:03:25.570
Matz conveyed how we stand on the shoulders of giants—specifically garbage collectors. I appreciate this humility in his approach, viewing his contributions as a service to the community, underscored by the fact that we receive each new Ruby release as a present during Christmas.
00:04:03.610
This presents us with a sense of joy, similar to entering a well-prepared room, feeling cared for by someone. This core philosophy became clear to me during that presentation, contributing to why I cherish this language. We can discuss areas for improvement, but fundamentally, Ruby is a great language.
00:04:41.950
This is why I care so deeply about Ruby that I started exploring a JavaScript implementation for the language about seven years ago. At that time, I was looking for ways to utilize Ruby on the front end, as I was feeling frustrated with JavaScript.
00:05:01.750
I love JavaScript; I write it extensively and greatly admire Brendan Eich, its inventor. However, as Matz pointed out, Ruby is a higher-level language that provides more pleasurable features, often more concise and elegant.
00:05:36.080
This led me to develop the Opal project, a Ruby implementation in JavaScript, which I've maintained for about five years. I started working with Ruby back in 2006.
00:05:48.560
Now, let's delve into Opal and explore some basic functionalities. Opal translates Ruby code to JavaScript; this one-to-one translation means that methods become functions, and classes are mapped to prototypes.
00:06:06.510
Arrays share the same class as functions, and Opal supports an array of Ruby features, including method missing, module prepend, inheritance, and singleton classes. For a demonstration, we will code a small Tetris-like game, first executing it in the terminal, then transitioning to a browser interface.
00:06:27.920
We will run the same code on the command line and then switch to using a UI in the browser, initially through the vanilla DOM API and, if time permits, switching to Vue.js. Let's start with the terminal.
00:06:55.300
We'll use the latest stable version of Opal today for our demonstration.
00:07:08.200
As a simple demonstration, we'll execute a basic 'Hello World' example using Opal. This translates Ruby directly to JavaScript, enabling us to rely on all common Ruby syntax.
00:07:25.300
After successfully compiling to JavaScript, we can run it in Node, allowing us to observe the output. Furthermore, this includes functionalities such as source map support, which provides insights into the underlying JavaScript generated from our Ruby code.
00:07:44.950
Now, let's review the terminal version of our Tetris-like game. The game setup initializes a grid, renders shapes using ANSI sequences, and controls game progression based on timing. It operates with a basic loop that updates every 0.6 seconds.
00:08:25.030
In this terminal rendering, we instantiate the game with a height and a helper that renders the lines and shapes. Additionally, we have a function to handle grid rendering and game input.
00:09:10.090
Now, moving to the Opal implementation for the browser version, we will set up basic HTML to display our game. Adhering to a simple layout, we convert the game board into a table format, which is a retro aspect suitable for our Tetris-like experience.
00:09:57.060
We will establish event listeners for key presses that control game actions, updating the game state based on user input. As with many game developments, it’s essential to prioritize responsiveness to keep the experience engaging.
00:10:56.480
Using what we have now, we will modify the game to render its state in real-time while also updating the table for user interaction. This blended experience combines the joy of coding Ruby with the need for dynamic feedback provided through the browser.
00:11:35.390
Further enhancement will involve preparing CSS for a more visually appealing game board, allowing colors to represent different Tetris shapes. This addition will not only enhance the user experience but bring the game to life.
00:12:01.370
There are multiple ways to enhance user experience further through effective use of CSS and potentially integrating libraries like Vue.js. The transformation from Ruby to JavaScript offers playful avenues to explore that enrich front-end development.
00:12:50.780
As we conclude this demonstration, it's notable how Opal enables the merger of Ruby's expressive syntax with JavaScript's interactivity. Thus, transcending the barriers between backend and frontend development, all while keeping the essence of Ruby.
00:13:32.490
Thank you for participating in this exploration of Opal. I hope this session inspires you to further pursue Ruby development in versatile environments. If there are any questions about the implementation or possibilities, I’d be delighted to engage.
00:15:10.200
I encourage everyone to visit the Opal website for hands-on experiences and to connect with the growing community. We can exchange ideas and continue the conversation beyond this session.