Opal
Building web-based board games only with Ruby
Building web-based board games only with Ruby
by Yoh OsakiIn this presentation from RubyConf 2018, Yoh Osaki discusses how to develop web-based board games solely using Ruby, without relying on JavaScript. He introduces Opal, a powerful compiler that allows Ruby developers to create browser applications in Ruby, effectively bridging the gap between server-side and client-side code. Osaki emphasizes the growing complexity of web applications and the importance of maintaining simplicity in development through Ruby.
Key points covered in the talk include:
- Introduction to Opal: Osaki highlights Opal's functionality as a Ruby-to-JavaScript compiler, facilitating the creation of rich user interfaces in web applications.
- Development Frameworks: The speaker discusses various libraries and frameworks he has developed to enhance Opal's capabilities, including a Virtual DOM and a planning framework for natural language processing (NLP).
- Isomorphic Web Programming: This approach allows for server-side actions to be easily utilized from the client side, aimed at improving performance and SEO by hiding complexities in communication.
- Implementing dRuby: Osaki introduces dRuby, a distributed object system in Ruby, that simplifies remote method invocation and data management via WebSocket, enabling real-time communication between the server and clients.
- Shogi Game Development: The presentation showcases the development of a traditional Japanese board game, shogi, illustrating how to create a web-based application using Ruby. He demonstrates installing the game application and highlights its scalability and ease of use.
- Real-time Communication: A key part of the demonstration focuses on establishing WebSocket connections for bi-directional communication, allowing developers to create rich, interactive experiences.
Osaki concludes by reaffirming the potential of Ruby and Opal in building robust web applications without conventional reliance on JavaScript. He addresses challenges he has faced with bi-directional communication and expresses his commitment to continue improving Opal’s functionalities. The presentation emphasizes the importance of effective communication protocols in modern web development and invites audience questions at the end.
00:00:00
Today, I will talk about building web-based board games using only Ruby.
00:00:19
My name is Yoh Osaki, and I'm from Japan. Japan is approximately 10 hours away by airplane.
00:00:39
I am part of the Ruby community. I have spoken at RubyKaigi four times, three of which were about Opal.
00:01:04
Opal is a source code compiler that converts Ruby to JavaScript. It allows you to create browser applications in Ruby, which is quite awesome.
00:01:32
I have been developing libraries and frameworks for creating browser applications with Opal. My goal is to make it available in various places.
00:01:59
I am also developing a planning framework for NLP. These activities are driven by my love for Ruby, and I would like to promote its usage among more people.
00:02:32
I want to enable the development of front-end web applications and NLP using Ruby instead of JavaScript or Python.
00:03:09
Fifteen years ago, Ruby was just one of many programming languages. But Ruby on Rails elevated it to be one of the best languages for web programming.
00:03:48
As front-end development becomes increasingly important, I am focusing on creating the best board games, and my methods can be applied to other web applications.
00:04:26
Today's main topics include three key areas: first, the Virtual DOM; second, isomorphic web programming; and third, the dRuby implementation in the browser.
00:04:48
Virtual DOM makes it easier to build dynamic user interfaces by providing transparency in database application development. You can use WebSocket, similar to a distributed object system.
00:05:31
I have been developing a board game called shogi. Shogi is a chess-like board game that is traditional in Japan. One key difference is that pieces can be reused.
00:06:22
Here is a shogi unit published by the International Shogi Association, which you can find on the web.
00:06:50
Today's agenda includes discussing Opal and how to create an Opal application, followed by a demonstration of shogi.
00:07:15
Opal allows you to create browser applications using Ruby. For example, this application was created by JB.
00:07:54
Next, I will show you how to create an application named 'Shreeka'.
00:08:10
You can install it using RubyGems on your local machine. After installation, you can create a sample app.
00:08:35
This process creates the necessary files for your application.
00:08:54
Using Luck as part of the application setup helps manage the installation.
00:09:25
You will see that the scaffold is generated with just one command.
00:09:57
Batch alone has gained significant traction, and importantly, it is built entirely in Ruby.
00:10:35
The application leverages Ruby components effectively.
00:11:00
For example, you can modify this code to customize your components.
00:11:21
Yes, beautiful components can be created by passing property values.
00:11:33
This code effectively returns data to the view component.
00:12:00
Isomorphic programming is important for performance improvement and search engine optimization.
00:12:38
The framework I created, named 'mainlight', focuses on isomorphic web programming.
00:13:01
This framework provides transparency and ease of access to server-side objects from the client side.
00:13:37
It conceals the communication between client and server, creating a seamless interaction.
00:14:06
You can define actions such as sign up directly within your classes.
00:14:45
For example, I want to create a session where users can validate their credentials easily.
00:15:15
This action handles logging in by checking the given username and password.
00:15:58
The client-side code integrates with the server side using a straightforward logging method.
00:16:38
Next, I will discuss the concept of dRuby, which is a distributed object system in Ruby.
00:17:09
It includes functionality that allows you to define and use remote objects seamlessly.
00:17:32
This approach provides a simple means to create remote methods and manage data effectively.
00:18:06
The implementation of WebSocket allows for real-time communication between the server and the client.
00:18:41
In this demonstration, I show how to establish a WebSocket connection between the server and client.
00:19:15
You can create remote objects that interface entirely through the WebSocket.
00:20:09
This approach allows us to handle complex data structures easily.
00:20:40
As I present the object interactions, you will see how it integrates smoothly into the Ruby framework.
00:21:37
This demonstration illustrates how a client-side application can effectively manage server-side data.
00:22:10
I will showcase the board game shogi, which illustrates how Opal can be utilized to build engaging applications.
00:24:04
Although I have encountered some obstacles with bi-directional communication, I am working towards resolving these issues.
00:25:57
Opal is a powerful tool for building applications, but my current focus is on enhancing its capabilities.
00:26:36
Implementing communication protocols is essential as we look to streamline operations within our applications.
00:27:15
Thank you for following along as I demonstrate the functionality of my application.
00:28:07
The communication between browser and backend is crucial for developing modern web applications.
00:28:46
I appreciate your attention, and I look forward to answering any questions you may have.
00:29:04
As we conclude, I want to emphasize that Opal and Ruby can be used to develop robust web applications.
00:29:48
If you have any questions about the frameworks or implementations discussed, feel free to ask. Thank you!
