Building web-based board games only with Ruby
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 66 | |
| Author | ||
| Contributors | ||
| License | CC Attribution 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/46578 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
Ruby Conference 201858 / 66
5
10
13
14
17
18
21
22
26
29
37
45
46
48
50
51
53
54
55
59
60
61
63
65
00:00
Game theoryBuildingVideoconferencingSource codeCompilerWeb browserSoftware frameworkAdditionComputer programmingIsomorphieklasseAerodynamicsObject (grammar)Physical systemAnalogyDatabaseUsabilityMenu (computing)Rule of inferenceTube (container)Cellular automatonSlide rulePresentation of a groupInstallation artCommon Language InfrastructureNormed vector spaceMusical ensembleGame theoryCartesian coordinate systemFormal languageWeb 2.0MereologyWeb applicationSoftware frameworkCompilerComputer chessSoftware developerUsabilityDifferent (Kate Ryan album)Object-oriented programmingSlide ruleVirtual machineAnalogyMobile appRule of inferenceDatabaseWeb browserIsomorphieklasseSampling (statistics)VirtualizationFiber bundleRuby on RailsProjective planeSource codeInstallation artDebuggerProgramming languageLibrary (computing)DialectFront and back endsJSONXML
08:45
Convex hullHill differential equationVirtual realityPersonal identification numberMultiplicationVolumenvisualisierungComputer programmingMathematical optimizationObject (grammar)Software frameworkIsomorphieklasseEndliche ModelltheorieTelecommunicationClient (computing)Server (computing)Social classGame controllerPhysical systemInternational Date LineServer (computing)Software frameworkSocial classGroup actionObject-oriented programmingField (computer science)Mathematical optimizationGame controllerWeb browserSearch engine (computing)Client (computing)Object (grammar)Sign (mathematics)CodeAuthenticationEndliche ModelltheoriePasswordWeb 2.0TelecommunicationLoginVirtualizationConnectivity (graph theory)Computer programmingInternet service providerIsomorphieklasseImplementationArtistic renderingSource codeMessage passingBlock (periodic table)Shared memorySystem callMultiplication signView (database)Computer animation
17:14
Social classWeb pageContent (media)Table (information)Finite element methodMotion blurSoftware engineeringLevel (video gaming)CurvatureConvex hullBlock (periodic table)Limit (category theory)Image warpingArmMaxima and minimaLibrary (computing)Moving averageProgrammable read-only memoryError messageInclusion mapLength of stayView (database)Object (grammar)Library (computing)Service (economics)Client (computing)Process (computing)Social classInterface (computing)System callDifferential (mechanical device)FreewareUsabilityFormal language
25:44
Inverter (logic gate)Maxima and minimaMoving averageIRIS-TLimit (category theory)Inclusion mapImage warpingCommunications protocolNetwork socketImplementationComputer fileError messageInformation managementStructural loadTorusThomas KuhnIntelWechselseitige InformationLength of stayExecution unitArtificial neural networkObject (grammar)Communications protocolDemo (music)Web browserImplementationServer (computing)Uniform resource locatorOSI modelDifferent (Kate Ryan album)Cartesian coordinate systemProcess (computing)Software testingClient (computing)String (computer science)Computer programSound effectRemote procedure callOperator (mathematics)Game theoryComputer animation
34:13
Computer programmingIsomorphieklasseVirtual realityWeb browserMaxima and minimaVirtualizationWeb-DesignerPower (physics)IsomorphieklasseWeb 2.0
34:48
Coma BerenicesJSONXMLComputer animation
Transcript: English(auto-generated)
00:01
About breathing, we were best board games only with Ruby.
00:26
My name is Yoh, Yoh Osaki, I did Yoh-chan. I'm from Japan, and Japan is here. Very soft, so far from here.
00:42
I live about 10 hours by airplane. I'm from Asakusa.rb, Asakusa.rb is regional community
01:01
in Tokyo, and I'm from Rubikai. I have talked at Rubikai four times, and three of these were about Opal.
01:23
Opal, Opal is a source code compiler from Ruby to JavaScript. You can create browser applications in Ruby, it's awesome. I have been developing some libraries and frameworks
01:43
for creating browser applications with Opal. I've been doing activities to make Ruby available in various places. Development of the tools related to Opal
02:02
is part of the activities. In addition, I'm also developing a deep learning framework for NLP in Ruby. Why do I use these activities?
02:23
Because I love Ruby, and I would like to, Ruby, I would like Ruby to be used by more people. I want to write the front-end of web and NLP
02:44
using Ruby instead of JavaScript or Python. Remember, 15 years ago, Ruby was just one of scripting languages until 15 years ago.
03:04
Ruby on Rails made Ruby into one of the best of web programming languages on the web. Front-end is becoming more important, however.
03:24
Today, I talk about creating web-based board games. Although it can be applied as applications on the web,
03:41
today's main topic is these three things. At first, virtual DOM, and second, isomorphic programming, and DLP on browser.
04:01
It's a way to use WebSocket. Its possibilities is easy to build dynamic UI using virtual DOM, and it provides ease of development
04:22
with database applications by transparency access. You can use WebSocket with analogy of distributed object system.
04:41
Today, I talk about, I have been developing a board game that is Shogi.
05:03
Shogi is a chess-like board game, which is traditional in Japan. One of the differences from chess is, the pieces was reusable.
05:22
Shogi rules is here. This is published by International Shogi Association. You can see this on web.
05:40
Today's agenda is here. First, I introduce about op-up, and show you how to create an op-up, and then virtual DOM, and isomorphic programming,
06:03
and DLP on browser, and at last, I show you demonstration of Shogi, about op-up. Op-up is source code compiler from Ruby to JavaScript,
06:25
and you can create browser applications in Ruby. For example, this slide tool, this slide tool is created by GBA.
06:40
GBA is tools for create slide tool, inspired a rabbit.
07:01
Next, how to create an op-up. I provide CRI tool, and name is Shilica. Shilica is here, let me show you. Shilica can be installed by Ruby James.
07:30
My local machine is installed, so just command Shilica new, sample op,
07:46
create, and sample op project is created, created these files, under install, sorry.
08:19
I'm nervous, sorry, install, okay.
08:27
And this is using lock application, so under exec, lock, okay, I got it.
09:24
This application, source code is here.
09:44
This is virtual DOM, render, welcome, here, okay. You can get scaffold, just one command, okay.
10:06
And next, virtual DOM, virtual DOM has gained citizenship.
10:32
And highlight is virtual DOM implementation written in Ruby.
10:42
This code used in highlight, just including component. For example, modify this code here.
11:38
View component can be passed property,
11:44
props values via props. This code pass name to view component.
12:10
Hi John, okay, I got it, thank you.
12:21
Next, isomorphic programming. Isomorphic programming, it mainly has the following to merit, one of this is server-side rendering.
12:41
It's for performance improving, and for search engine optimization. And second is shared class definition. It provide transparency access to the server-side object
13:05
from client-side. I have made, I have been making a framework named ManyLite, ManyLite is an isomorphic
13:22
web programming framework. It's focusing shared models to provide transparency access. For example, sharing class definition.
13:45
The framework hide the communication between the client and server. You can never do calls that JSON API.
14:03
For example, like this class definition. This is user class, has field name and password.
14:24
And you can define action, for example, sign up. Sign up is called creating time.
14:48
So I'll create truth parameter, and you can write code, only run in server, this block.
15:14
This class definition is run on server-side
15:21
and client-side. Controller, controller is running on server-side. Server-side can define action,
15:47
for example, logging, logging action, get parameter, user name and password.
16:00
And you can find user, and all authentication is passed, session, put into session to use ID.
16:31
And client code is here, just called logging method,
16:42
and return value, get asynchronous,
17:01
next, dluby on browser. Dluby is a distributed object system in Ruby. It's included in standard library.
17:25
Dluby is included in standard library. And dluby is a usable library,
17:48
pre-Ruby-ish. So IDL, IDL is interface definition language. IDL is not necessary for dluby.
18:01
So you can use convenient, easy to use dluby, as here, and I show you.
18:56
This is server-side. Array class object, you can start service
19:08
with this object, and client-side.
19:33
Just call a new, one method, new with URI, okay?
19:41
Client object is DRV object, this is, this object can do all method, like array,
20:16
for example, this one, package, sorry,
21:12
client-side thing, sorry.
22:09
Ah, I see, two words, package, why, okay.
25:12
Sorry, maybe another process is running, so.
25:21
Okay, I got it, sorry.
25:59
Oh, this is client-side, it's effect to server-side.
26:11
Initially, this is empty array, but client-side object put into array,
26:29
so server-side get same value, thank you.
26:47
And so, easy to use dluby, okay.
27:01
And dluby can be customized protocol layer. I implemented WebSocket protocol, maybe previous problem is process learning for WebSocket, so I confused. Ah, and I implemented WebSocket protocol for dluby,
27:28
and dluby implementation of oper, it's dluby WebSocket, dluby WebSocket, and oper dluby.
27:41
I show you, and okay, same as previous.
28:24
Ah, oh, sorry.
28:54
Difference is just URL, this, here is demo, got demo.
30:30
This demo is put string into array,
30:42
remote object test, this string added, so you can get on server-side, yeah?
31:14
Okay, got it, thank you.
31:20
So, this demo application means that Blazor is communicating server-side via WebSocket, and dluby, transparency access,
31:55
and I show you demonstration for the game Shogi,
32:07
Istops server, so.
32:46
Opal is compiler, so compiling fast time, Shogi board,
33:18
and so, sorry, I have problem for bi-directional
33:27
communication, so I can, we completed this application, but this can be,
33:50
but no opposite player is not work, sorry.
34:19
Congrats, y'all, Opal has found changing web development,
34:27
you can get virtual DOM, isomorphic programming, and dluby, there are many tools for modern web development, let's get it started, thank you.