Live code a game on the browser with Opal and Vue.js

Ruby

Elia Schito

#frontend-development

#game-development

#live-coding

Live code a game on the browser with Opal and Vue.js

by Elia Schito

The video titled "Live code a game on the browser with Opal and Vue.js" features speaker Elia Schito, who discusses the integration of Ruby, particularly through the Opal project, with JavaScript for front-end development. The session emphasizes the journey of a Ruby developer transitioning to front-end coding, providing insights into the beauty of Ruby and the challenges faced with JavaScript.

Key points discussed in the video include:

Ruby’s Significance: Ruby has fostered a vibrant community and influenced many programming languages. The speaker reflects on the language's beauty and innovations, emphasizing its appeal despite the frustrations developers might encounter.
The Opal Project: Elia Schito introduced Opal, which translates Ruby code into JavaScript, thereby enabling Ruby developers to work efficiently on the front-end. This project seeks to encapsulate Ruby's syntactic elegance in JavaScript environments.
Demonstration of a Tetris-like Game: The presentation showcased a simple Tetris-like game developed using Opal, highlighting both a terminal-based and a browser-based implementation. The terminal version demonstrated game mechanics while the browser version involved HTML, CSS, and JavaScript features.
Technical Implementation: The process included setting up a grid and handling user interactions through event listeners for key presses. The demonstration illustrated real-time updates of the game state leveraging Ruby's capabilities in a structured manner.
User Experience Enhancements: The importance of visual elements, such as CSS for a dynamic game interface and the potential integration with Vue.js, was discussed. These enhancements aim to improve interactivity and aesthetic appeal, creating a more engaging user experience.

In conclusion, Elia Schito emphasized how Opal facilitates the blending of Ruby’s expressiveness with JavaScript’s interactivity, paving the way for Ruby developers to explore front-end technologies without losing the essence of Ruby programming. The session was aimed at inspiring attendees to consider Ruby development in diverse environments while maintaining community connections through Opal. The audience was invited to further engage with the project through their website and community discussions.

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.

rubyday 2019