00:00:01.360
okay so uh the topic for today is going to be intro to Ruby in the browser uh my
00:00:07.160
name is Andy Mal I'm a senior software engineer at leop uh and I'm going to be giving this
00:00:12.480
presentation today for uh the Montreal RB Ruby Meetup so uh before I get into
00:00:18.800
the topic let's first watch a video of Matts the creator of Ruby uh giving a
00:00:25.760
keynote speech at rubycon 22 uh 2022 and and talking about the idea of Ruby in
00:00:31.840
the browser the first of all the Ruby is
00:00:37.440
available on the wasm so the web assembly the the whole Ruby compile uh
00:00:43.600
Ruby virtual machine can be compiled into the the web assembly so that you
00:00:49.199
can run the full full Ruby uh any
00:00:54.320
restriction uh in in the browser so that uh uh that is that is
00:01:01.519
quite wonderful uh when I had this proposal from the community I I just
00:01:09.799
thought it was it could be a yet another platform of the that's Ruby supports um
00:01:19.080
for example Ruby is running Linux and FreeBSD and windows Mac OS and and and a
00:01:27.960
from IBM and many platforms now we I
00:01:33.200
thought we got yet another platforms but uh uh the was is more than that because
00:01:40.960
the wit Run f willu be in in blowser so that uh maybe we
00:01:49.320
can replace the you know replace the
00:01:55.920
JavaScript by totally Ruby not the you know but not by emulation not by the you
00:02:03.000
know the hiding something going to fully
00:02:08.280
uh implemented Ruby in the browser that is kind of you know g game
00:02:14.239
changing yeah Ruby was now the endan
00:02:19.640
which is who is in charge of the you know many things like a pro typr and you
00:02:26.360
know the mini games and uh the op and then he also played with the Ruby
00:02:34.000
was and then he made some kind of the you know uh interactive Ruby environment
00:02:40.800
in browser so that all ruby program will be run on the browser so
00:02:48.239
you don't have to worry about the you know the soundboxing and the you know the uh the protecting execution in the
00:02:57.640
in the server site or something like that so that was it for his uh segment on uh
00:03:06.239
Ruby in the browser so next I'm going to show you the Ruby playground that he was talking
00:03:12.400
about uh the Ruby website actually has a new playground uh called try Ruby so let
00:03:20.239
me get out of the slides and show you an example of it so there it is you can
00:03:25.440
navigate to it from Ruby lang. org and it gives me the full Ruby run runtime in
00:03:31.519
the browser so for example if I say three times print welcome meaning print
00:03:36.680
welcome three times for us I'm going to run it and it shows us welcome welcome welcome that was run in the browser it
00:03:42.400
was not run on a server it did not send those in instructions to a backend server process them and come back it
00:03:48.519
processed them right away in the browser using Ruby by running uh via WM which is
00:03:54.560
web as simply uh so wasm is this new technology that enables you to compile
00:03:59.760
any programming language into binary instructions that can be understood by web browsers and run within a sandboxed
00:04:07.159
environment in a web browser and Ruby took advantage of it recently and released a a Ruby version that's fully
00:04:13.200
compiled for wasm so uh let's play around with the example a bit just to demonstrate it better with uh more
00:04:20.000
variation so I'm just going to try to include this n variable that usually you
00:04:25.600
get from the times uh iterator and put it in in welcome and I'm going to change
00:04:31.320
the print into a puts so this is just demonstrating that you know it's not a pre programmed
00:04:38.120
response it's actually Ruby I changed the program and it actually did something else now welcome zero welcome
00:04:44.080
one welcome two uh I can for example uh like if I don't want to start from zero
00:04:50.360
I can say welcome one two three so I mean this is a a a very good example of uh using Ruby in the browser but usually
00:04:58.120
you want to go beyond that and Implement your own Ruby methods so how do we do that so I'm going to open another tab
00:05:03.639
that has the TR Ruby playground uh with an enlarged uh uh box and that fits a
00:05:10.400
whole method and I'm going to show you a method that basically if I give it a price quantity hash meaning a hash that
00:05:17.360
is mapping so there's the hash it's mapping uh prices for products into quantities so it's saying I have uh five
00:05:25.280
products that cost $10 four products that cost three three that cost $20 to that cost 100 uh now I'm going to ask it
00:05:32.680
to execute this calculate total method uh and it's going to do a reduce using the Ruby iterator uh reduce it's going
00:05:40.160
to reduce the hash into a single number uh that's what reduce means and it's going to basically multiply the prices
00:05:46.919
by the quantities in the hash so if I were to uh now go here and run
00:05:52.720
it and see it gave me 322 it gave me the correct number for the calculation of
00:05:59.160
the order total for products now suppose I want to upgrade the solution and use
00:06:04.800
classes Ruby classes I can actually upgrade the solution uh what I'm going to do is copy code that I prepared
00:06:11.560
beforehand uh that will upgrade the solution into an object oriented solution so now I'm going to use
00:06:16.840
objectoriented classes not only do you get the basic classes of Ruby but you also get struct which we're all very
00:06:22.880
familiar with from Ruby uh struct is a quick way of having you know a data bag
00:06:28.560
of properties so I have a price I have a quantity and that represents an order item uh but then also I can build an
00:06:35.800
order that will be initialized with order items uh it'll store them in an instance variable and then when I call
00:06:42.360
calculate total it's going to use the exact same algorithm we used before except in an objectoriented way because
00:06:48.840
it's going to work with order item objects uh calling price and quantity and then uh it'll give us the total so
00:06:55.840
now if I build an order items array and I pass it to to order and I call calculate total so let's uh run this
00:07:04.360
again it's going to give me the same number but I mean to prove that it's uh doing something I'm going to change
00:07:12.080
the program a bit see it says total and then 322 so it it ran basically a ruby
00:07:17.440
class in a struct using the same familiar Ruby apis that we're used to in
00:07:22.720
the browser uh but not only that this is uh one way of running Ruby in the
00:07:28.479
browser uh which is by using wasm web assembly there is a second way of Ruby
00:07:33.680
running Ruby in the browser which is called opal Ruby uh so if I were to go back to the original TR Ruby playground
00:07:40.280
I can switch here to opal and that's a JavaScript transpiler of Ruby so instead
00:07:46.800
of being a web assembly uh implementation of Ruby this is a JavaScript implementation of Ruby uh
00:07:53.919
it's a transpiler will basically convert Ruby source code to Javas script source
00:07:59.120
code automatically and then run it in the browser this exact same program will run the same way now using op Ruby so if
00:08:05.960
I were to uh let's change it a bit U let's just say puts n here so it's
00:08:12.400
going to say puts n zero and then welcome one one and welcome two two and welcome three if I were to remove this
00:08:18.159
change just to prove that it gives me the same result as before there you go welcome one welcome two welcome three uh
00:08:24.159
same here I can also uh run an entire class using opal so
00:08:30.039
Ruby Lang gives us both options to play around with so I can run it and it gives me a same the same exact answer
00:08:38.399
so so now that I've gone through a full demo of what you could do with Ruby and
00:08:44.399
the browser that proves that you have the full Ruby capabilities in the browser let's jump into another topic so
00:08:51.760
why Ruby in the browser why why should we consider using Ruby in the browser uh first of all it's to improve developer
00:08:58.760
productivity with an isomorphic application architecture that enables using the same programming language on
00:09:04.959
both the front end and backend to minimize friction and maximize flow and creative problem solving meaning if
00:09:11.920
developers uh an isomorphic application architecture means you're using the same programming language on both the server
00:09:17.760
and the client so both the back end and the front end and uh by doing so
00:09:23.040
developers don't have to do too much context switching between multiple programming languages they will will
00:09:29.399
minimize fraction for the way they're solving problems and we'll Maxim maximize their flow and creativity uh of
00:09:36.360
solving problems by using one language on both the front end so you have a front end Ruby here on the browser and
00:09:41.519
you have backend Ruby in the cloud uh next uh we want to significant
00:09:47.920
uh sorry Ruby has significantly better front-end code readability and maintainability Via Ruby's unique syntax
00:09:55.040
features like blocks and operator overloading so JavaScript does does not support either of those two features
00:10:01.279
blocks are not available in JavaScript they do give you Anonymous functions but they're not as nice as blocks and uh
00:10:08.399
they're not as they're two verbose they're not as uh readable as blocks and then operator overloading is not
00:10:13.760
supported either but Ruby gives you the ability to op over overload operators for example and here I'm building a
00:10:19.720
message from metadata header body footer so by combining four objects I'm getting
00:10:25.079
a for a new object called a message and that's by uh overriding this operator
00:10:30.279
this uh Double Arrow operator uh and then here this is a demonstration of blocks I can like say to the message
00:10:37.399
handle the event sent and when the event happens I just open a block I don't have to pass an an anonymous function this is
00:10:44.399
a much nicer syntax I say do uh validate the message and then deliver it and then end and then here I can build a summary
00:10:52.240
by mapping the messages to their subject and then joining them uh so the Ruby
00:10:57.880
syntax is significant ly better for frontend code readability and maintainability uh next uh JavaScript in
00:11:04.480
general is an awful and confusing programming language with very verbose syntax in spite of all the modern
00:11:10.880
ecmascript releases even today I have to write code like this to uh do a very big like sorry
00:11:18.839
uh like a multi-step processing of data in order to uh go from people to uh
00:11:25.000
people grouped by their first names um with some in between and Ruby is just
00:11:31.480
this it's a lot shorter I can write a lot less code and do the same thing in Ruby because it gives you compact it
00:11:37.519
gives you map with a with the Amper sand select with the Amper sand uh so it's
00:11:42.920
and it gives you a group by Method so it's Ruby is still a lot nicer than JavaScript there's no denying that uh
00:11:49.639
next uh Ruby's ability to build declarative internal dsls meaning domain specific languages to write lightweight
00:11:56.560
front-end guey codes that can mix logic unobtrusively adopting a one language
00:12:01.920
approach instead of the confusing mix of JavaScript and HTML or jsx or templates like mustache templates is a lot simpler
00:12:09.000
this is rubby code that can generate HTML it is super simple it's less code than writing the HTML directly or
00:12:15.440
writing jsx uh and you can mix and logic with it directly without opening a scriptlet so
00:12:21.720
unlike uh in whether in in Erb or jsx you have to open scriptlets or or do
00:12:27.680
stuff or make weird parenthesis here you you are in in Native Ruby whether you're
00:12:33.480
building HTML elements or whether you're building or you're adding some logic like an if statement or an
00:12:41.519
iterator and here is an example of like a DSL that is used uh in Ruby to
00:12:47.519
generate HTML so you write this code in Ruby it's all in Ruby it gives me this HTML and it's it's a very uh efficient
00:12:55.720
way of generating HTML in one language mixing both logic and structure
00:13:02.760
unobtrusively uh use JavaScript libraries from Ruby with enhanced Ruby code having higher readability
00:13:08.560
maintainability and flexibility so this is an example of using jQuery from Ruby in the in the browser so instead of
00:13:15.600
saying so we say document ready document ready uh on ready of the document do
00:13:21.000
this stuff and then here uh instead of using dollar the jQuery API in Ruby uses
00:13:26.160
element and it's more readable it's more English it's more more understandable and then I can use standard Ruby
00:13:32.160
iterators with it like reject and select uh and mix them up with Jake Rey and it's just a lot more readable than J
00:13:39.000
quiry Code directly in JavaScript uh reuse some ruby gems on the front end I've been able to actually
00:13:45.000
use several several ruby gems uh on the front end uh so you could do that with
00:13:51.320
Ruby in the browser uh Ruby has better core apis
00:13:56.920
than JavaScript like the apis for array Ray hash innumerable string symbol in general they're nicer than the apis in
00:14:05.519
JavaScript uh Ruby's meta programming facilities are superior to those of JavaScript like you can have nice dsls
00:14:12.320
like this uh rspec DSL for you know describing an application and saying
00:14:17.360
before subject it does this it returns success Etc it's a very nice DSL things
00:14:24.279
like that are only possible in Ruby wait sorry are you running in the
00:14:30.639
um that was an example of demonstrating that you could do that in Ruby if you want I see okay there is a a version of
00:14:37.199
rspec in the browser yes for opal um save development Time by sharing
00:14:43.120
reusing Ruby code between the front end and the back end this is a very big one if I have a class called price
00:14:49.560
calculator that has a certain algorithm for calculating taxes uh in the back end I can use it in
00:14:56.240
the back end Ruby like on the in the cloud or or I can use it now in the frontend Ruby to calculate uh taxes
00:15:03.759
immediately instantly in the browser without having to go to the back end and then come back to the front
00:15:09.560
end uh transfer developers Ruby skills from the back end to the front end so I mean there are a lot of developers that
00:15:15.600
are very well uh skilled in Ruby on Rails and Erb and stuff like that uh so
00:15:21.279
they they have done a flavor of front end using ARB now they can do it in Ruby
00:15:27.040
on the front end directly they don't have to rely on something like Erb so the same developer that be basically a
00:15:32.920
backend Ruby developer can now be a ruby developer on the front end
00:15:38.000
too okay so now that I've gone through uh all the reasons for why to consider
00:15:43.040
Ruby in the browser let's talk about the available options and tradeoffs uh for
00:15:48.160
Ruby in the browser so fortunately there are newer technologies that enable running Ruby code in the browser
00:15:54.480
nowadays so let's talk about them so the first one is Ruby Wen that's the one that Matt's mentioned in his keynote
00:16:00.720
speech at Ruby come 2022 so it's a web assembly binary that
00:16:06.279
runs in the browser it supports Ruby 3.2 you know the the newest Ruby uh you
00:16:12.839
require JS to access the Dom so it does give you access to the Dom of the browser like the HTML Dom uh you just
00:16:19.519
require the JS library and you get access to it I'll show you examples of that in a moment uh it has native Ruby
00:16:26.800
data structures like string or or array uh the security is sandbox
00:16:32.480
security so Ruby WM has Sandbox security meaning you cannot run code that will access the files of the system hosting
00:16:38.880
the browser uh because you are inside a Sandbox so it is very secure it downloads all of
00:16:46.360
Ruby uh so I will get the entirety of Ruby when I first hit the web the website that is hosting
00:16:53.839
it uh it's about 10 megabytes uh total for download loing Ruby and about 3
00:16:59.959
megabytes compressed now uh let's go into the second option the second option is opal
00:17:05.679
Ruby that's a JavaScript transpiler instead of a web assembly binary it also
00:17:11.319
supports Ruby 3.2 the newest Ruby so you you get the newest Ruby Ruby whether you want to use opal or
00:17:17.600
WM uh this one gives you access to the Dom using a library called
00:17:23.600
native however opal Ruby uh takes a shortcut they not recreate all of Ruby's
00:17:30.160
data structure structures from scratch what they do is they hook into JavaScript data structures directly so
00:17:36.440
when I'm using a string in opal I'm using the JavaScript string but they do add to it all the methods that are
00:17:42.280
required by a string API and Ruby of course so you still can write Ruby code on top of
00:17:48.360
it uh it has all the security of JavaScript so you're not limited by security it has good security uh it so
00:17:56.080
one big big selling point for op over WM is that it only downloads what is used
00:18:01.400
of Ruby so if I only use a very tiny part of Ruby like just the puts which will uh puts will translate to console
00:18:08.480
console log it'll only give me that in the JavaScript compiled uh uh
00:18:15.240
downloadable file it so that means if I go next it's kilobytes not megabytes so
00:18:21.320
instead of getting 10 megabytes of Ruby it's only about well part of the reason also is because it's hooking into a lot
00:18:26.360
of JavaScript functionality that's already there so instead of 10 megabytes it's only half a megabytes like it's
00:18:31.640
only 458 kiloby compressed about 103k kilobyte compressed um by the way those
00:18:39.120
numbers I got them from a guy who's experimented with both Ruby WM and opal Ruby and he gave me those numbers uh but
00:18:45.840
also the 10 megabyte number I confirmed it myself in a browser might have been 9.7 so that's why it says here
00:18:51.440
approximately so uh so that's that's where I got those numbers but the benefit of opa Ruby is it'll only
00:18:57.840
download what's needed so then the website will load much faster with opal Ruby meaning Ruby wasm is probably
00:19:03.960
better for things that are uh if you need to build an application that's very big and uh it really needs all of Ruby
00:19:11.520
somehow maybe then you'll consider Ruby wasm for some reason but if you don't need that you're just building basic web
00:19:17.600
applications I think Opa Ruby should work better most of the time especially for performance
00:19:24.080
characteristics uh any questions before I go further when does the r trans filed
00:19:29.280
by every client request or no uh uh it gets pre-compiled as far
00:19:37.960
as I know on deployment of the server to production if I'm not mistaken so by the
00:19:43.000
time that people are hitting the website if I'm not mistaken it's already compiled but in development in the
00:19:49.640
development environment it does comp compile on request because it needs to give you the ability to troubleshoot
00:19:54.799
your applications and debug them so only in development as far as I know it compiles instant immediately but in on
00:20:02.240
production from what I remember it should be pre-compiled the client is downloading JavaScript yes exactly
00:20:10.159
exactly Visual Studio Cod debuging is that possible some kind remot connector
00:20:15.200
to opal yes so opal provides supports a feature called a browser feature sorry a
00:20:20.400
web browser feature called Source maps that map ja uh Ruby codes into uh uh uh
00:20:29.440
sorry effects in the browser from what that rubby code is doing so that way if I'm debugging I can debug and it would
00:20:35.080
step through rubby code not through JavaScript code so that way I can debug Ruby code directly in the browser but
00:20:41.200
not using visual studio code um sorry so I'm talking about Source Maps which runs
00:20:46.640
in Chrome in the browser itself there's a visual studio code extensions for
00:20:53.159
Chrome to allow you to do that sort of development consider that okay I personally don't use vs code so I
00:20:59.280
couldn't answer your question just because I don't use that I use my own editor so yeah go ahead yeah does opu be
00:21:06.880
jit better because you you'd expect it if it like if it's seeing the JavaScript directly the browser will like the
00:21:14.200
performance in the browser would be pretty good while using Ruby won you'd imagine that the browser is just
00:21:20.200
executing an entire right interpreter right right right and so it can't jit over the Ruby code right right the Ruby
00:21:26.760
WM is almost exactly like the C interpreter that runs on your machine so um to answer your question I think in
00:21:34.720
theory the JavaScript implementation should be faster but you know what I
00:21:40.200
could be wrong actually wasm is known to have faster performance than JavaScript in general but but in my experience I
00:21:45.799
felt no difference between the two uh for main apps I'm not running High highly intensive numerical algorithms
00:21:53.520
I'm just doing basic calculations like I showed you guys or like order total or tax or or stuff like that for that stuff
00:21:59.720
there's no difference really uh it's not a very long running program right uh but but if it's something very intensive in
00:22:06.520
its calculations there might be some difference but to be honest in that case maybe you shouldn't use Ruby you should
00:22:11.799
use a different wasm language because wasm supports c as well so yeah when
00:22:17.440
change sorry changes to Binary should we expect the C spe or Ru spe um because
00:22:26.200
fin I think it would be comp something that can be binary right right it should
00:22:31.480
be comparable to Ruby because Ruby is running on c as well on the on your
00:22:36.600
desktop machine so it is very comparable to it as far as I know but the the the
00:22:42.279
reason I'm expecting a difference is because Ruby I have not seen uh benchmarks uh so I I I maybe you should
00:22:49.279
go and Google some benchmarks in case somebody rans some uh but in my experience I didn't feel any slowdowns
00:22:55.840
in either option do you know if there is any compatibility issues with the browsers I
00:23:04.039
mean if you use uh no no no compatibility issues in my experience zero zero compatibility they're very
00:23:09.640
compatible because uh all browsers nowadays as far as I know are are compat like Safari Edge and um Chrome are very
00:23:18.880
compatible with wasin and obviously they're compatible with JavaScript too so both run very well and both of them
00:23:24.600
obviously also are much faster than sending a request to a server and getting a response back like running
00:23:29.640
anything in JavaScript sorry in Opel Ruby or Ruby wasm in the browser is much faster than sending a server request and
00:23:36.640
getting a result back so that's a huge Improvement uh okay so let's go
00:23:43.360
next so how do we get started with Ruby in the browser uh that is one of the
00:23:48.760
main questions that are being answered by this presentation today because the name of the presentation is intro to
00:23:54.679
Ruby in the browser so um first of all let's let's start with Ruby WM so I'd like you all to please star this project
00:24:02.159
on GitHub uh to learn more about it go to github.com Ruby Ruby WM I'm going to
00:24:08.279
click it just for a second uh just so I could um give you a quick idea of the
00:24:14.679
project so there it is Ruby WM it gives you a very quick here introduction of how to use it in the browser uh and then
00:24:22.240
here it gives you other examples of how to use it for desktop purposes so wasm can be used as a sand box environment on
00:24:28.640
the desktop as well it doesn't just run in the browser so it could be used for packaging your app in a crossplatform
00:24:34.399
way as a rubby app and running it on both on Mac windows and Linux uh using a
00:24:40.240
sandboxed environment so it has other benefits uh they call that wzy uh but
00:24:45.399
anyways uh that's about it as far as checking out the website so uh let's
00:24:51.480
look more into just a second okay so uh let's get started with
00:24:57.880
a quick tutorial on how to get started so add this HTML to the head of a rails
00:25:03.200
layout so simply they have this precompiled version of wasm that they will give you to download as a JS script
00:25:11.440
using a script tag it's that easy you just add this to your layout and boom
00:25:16.840
you're ready with the wasm this will download all of uh Ruby and wasm which is about 9.7 megabytes or so next uh add
00:25:25.480
this HTML to a rails layout or a rails VI basically it's just a script tag and now you can use text Ruby as a as a real
00:25:32.840
browser language so so just like how you use JavaScript script tags you say text
00:25:38.520
JavaScript or whatever types JavaScript now you can say type text Ruby which is awesome and then you can pass it at Ruby
00:25:45.159
script so I can just pass it wasm example. RB which is off of my website hosted on my website go uh sorry you
00:25:51.880
have a question yeah well I just want to point out that that script will be cashed so the first time you pay the yes
00:25:57.440
yes it'll be there for ask the next and so the second time ask boom right which
00:26:04.039
which is could be good enough with certain website requirements and it could be bad for other website
00:26:09.520
requirements if the kind if it's the kind of website where you need a user to land only once ever in their lifetime
00:26:15.240
you don't want it to be a slow website so this wouldn't work well enough you would need opal Ruby for that but if it's a website that is highly
00:26:22.159
complicated like uh Auto AutoCAD kind of application that employees use every day
00:26:28.159
then yes the first time they visited they'll download 10 megabytes next time it doesn't matter so I agree with you it
00:26:34.120
could be from anybody so CDN it is a CDN so anybody anybody's writing Ruby first
00:26:41.919
time they CA it download you benefit right so this is a Content delivery Network that's what CDN means meaning
00:26:48.880
it's an accelerated uh s server for hosting uh static content so that that
00:26:54.279
means this will download as fast as possible but it's still 10 megabytes so as as they always say in software
00:27:00.760
engineering you have to start with the requirements first in mind it depends on the requirements uh do you have a
00:27:06.399
question go ahead I'm just pointing out that means if you go to multiple websites they all use the same Ruby version of Ruby last be if if they had
00:27:16.039
the same exact version and the same exact URL you are correct if it's a different URL then every website will
00:27:22.279
have its own download uh uh penalty okay so let's go next so after
00:27:28.799
that you can uh add some you know basic markup to your rails view so I added a
00:27:34.399
button I added uh an H1 um like header message
00:27:39.919
container and finally I can add Ruby code so I'll add it to in a rails app
00:27:45.039
under public qum example so it can just go directly into public there's nothing
00:27:50.480
that's going to happen to it in sprockets in the back end so here I'm just adding basic Ruby code
00:27:56.200
requirejs uh puts this is Ruby in the browser and then grab document from
00:28:02.679
JavaScript so doc this is the exact same document you have access to in JavaScript so you use JS Global which is
00:28:08.720
from the JS Library I can grab window as well and then finally I can say get
00:28:13.840
element by ID so the same exact JavaScript apis are available for you in Ruby uh and then here I can grab a
00:28:20.760
button and then I can add an event listener for the click of the button which is the equivalent of adding on
00:28:26.440
click the onclick event on a button in HTML and then I build a message and I
00:28:33.679
put it in the message container and then I I can say window
00:28:39.080
Alert in the same message so let's demonstrate how this works in practice so I mean if I were to load the page I'm
00:28:46.399
going to get this in the browser console it's going to give me the Ruby version that it loaded and then it's going to
00:28:51.559
say this is Ruby in the browser next I'm going to see this button in the web page
00:28:56.919
in the browser web page uh it's going to say click to see a message so when I click it I will get this uh alert from
00:29:04.039
the window welcome to Ruby Wen and next it's going to load the header the H1
00:29:09.760
element with welcome to Ruby Wen so let's see a real version of it next so I'm going to load a real version of it
00:29:16.360
now there it is I already have it loaded let me maximize it a bit so if I click here it says welcome to Ruby WM as you
00:29:23.720
can see and if I hit okay it loaded the H1 element welcome to Ruby WM and then
00:29:29.399
if I open the console and um let's just let's go to
00:29:35.279
the console see it says this is Ruby in the browser and here it gives me the Ruby version so this is a full
00:29:41.600
demonstration in a rails app of uh Ruby wasn't working in the browser can you have access to the Ruby
00:29:48.480
C sorry I interruped you the um I know that opal Ruby supports
00:29:55.679
Source Maps so I can actually look at the Ruby code in the browser for opal Ruby for wasm I don't have enough
00:30:01.200
experience to know the answer that question but I I have read somewhere that wasm does support sorry there are
00:30:07.399
implementations of wasm for other programming languages like C that also use Source Maps so I believe it should
00:30:13.519
be possible but I have I don't have enough experience to tell you exactly how that would be cool yeah you're
00:30:21.240
right okay so uh we went through a full example using Ruby wasm so next opal
00:30:26.960
Ruby please start this project github.com opalopal it's very
00:30:33.440
simple um so uh for opal Ruby uh opal Ruby gets compiled on the server in the
00:30:39.880
back end so you have to say uh so add this uh to gem file in a rail 7
00:30:45.919
application gem op- rails that will pull in opal and then run this terminal command
00:30:53.120
from the root directory of a rail 7 app uh rails G for Generate opal
00:30:59.960
install so that will install a bunch of basic files that are needed by a rails application to support
00:31:06.279
opal next uh because we are going to use opal Ruby instead of basic JavaScript
00:31:11.919
we're going to delete intentionally the app Javascript application JS file that comes with a rails app from from the
00:31:19.760
get-go and uh we're going to replace it with another one I'm going to get into that in a second uh add this HTML to a
00:31:26.760
rails View this is the same exact step we did with uh Ruby wasm we just add a bunch of elements a couple of elements
00:31:33.880
finally add this Ruby code to app assets JavaScript application.js do. RB uh
00:31:41.120
because it compiles from rubby code into JavaScript code so that's why it's js. RB um which is very cool it's amazing so
00:31:49.279
now I can just add require opal in Ruby require native uh this is Ruby in the
00:31:54.360
browser so the port statement is the same the the document uh we pull it in a
00:31:59.480
similar way the the syntax of opal is slightly different you use double dollar but it's very similar you pull the
00:32:05.840
document you pull the window uh you and uh usually from my experience Ruby wasm
00:32:11.840
code always executes after loading the Dom whereas in JavaScript with opal you
00:32:17.600
have to do the typical thing of on window load or or document load so that's why I added an ad event listener
00:32:22.960
Dom content content loaded um and then I add the same old code we added earlier so we add get
00:32:30.320
element by ID so I also have a the same API that gives me access to JavaScript
00:32:35.519
elements uh and then get element by ID for the button and then on click it's
00:32:40.840
also the same exact thing add event listener for click uh welcome to opal Ruby this
00:32:46.159
time this is the same code update the inner HTML window alert same code and
00:32:52.679
we're done so again it's going to give us this in the browser this is is Ruby in the browser uh in the browser console
00:33:00.720
next it's going to it's going to give me the button just like before and then here it's going to say welcome to opal Ruby and then finally it's going to fill
00:33:07.679
in the element uh welcome to opal Ruby so uh let's see a real version of this as
00:33:13.360
well so I'm going to go to my code editor and I'm going to switch things
00:33:19.679
around here I'm going to disable the Ruby wasm code and enable the the JavaScript code
00:33:29.039
okay this looks good this is not important this looks good okay let's see if it's working
00:33:36.639
now okay good so I see the button so I click it there we go welcome to opal
00:33:42.279
Ruby okay welcome to opal Ruby so that just proved that we got it working in opal just the same way we got it working
00:33:48.440
in Ruby WM um okay
00:33:54.880
so that's that's it that's how you guys can get started so feel free to play around to your heart's content when you
00:34:01.519
get home uh next we're going to move on to a very interesting topic which is how do you share Ruby code between the front
00:34:07.559
end and the back end that's a very big selling point of using Ruby on the front end so uh let's start with opal because
00:34:14.200
the opal way is a lot simpler so if you haven't started the project please start it on GitHub but uh
00:34:20.839
okay so here uh first in in the rails app add this to your config application
00:34:25.879
RB so add to your autoload paths the directory app shared so usually you have
00:34:32.760
app models app app controllers app views we're adding app shared so shared is going to contain any Ruby files that you
00:34:39.720
want to share between the back end and the front end uh however anything that's in app models for example or app
00:34:46.320
controllers is going to be backend only anything that's in in the under the JavaScript directory is going to be front end only but if you need code
00:34:52.639
that's shared between both you put it here and that addresses is the security concern of you know I don't want to
00:34:58.880
maybe expose all of my backend Rubik code to to the front end so that way you control what you exposed only the files
00:35:04.960
that are here are whitelisted to be available to the front end uh next I can do something similar for opal so opal
00:35:12.040
also supports an idea like this uh so under config initializers assets RB in a
00:35:18.000
rail 7 app in the same app you add opal. appen path the same one that we just
00:35:23.599
added so again app shared so now both r and opal have access to app shared as an
00:35:30.440
available Ruby uh path uh finally Ruby files added to app
00:35:35.760
shared can be required in Ruby from both Ruby on the on Rails back end and opal
00:35:40.960
Ruby front end so in both places you can just say require and the Ruby file name so let's see a
00:35:49.880
demo uh so before I go next let's stay here and see the
00:35:55.800
demo so first um let's do this okay I
00:36:00.839
already have opal enabled so that's great I'm going to enable uh so okay I have let me show you
00:36:07.280
something uh tax calculator okay there it is app shared okay so we have this
00:36:12.599
file app shared tax calculator let me open the content of it just to show you
00:36:17.880
what it does so this tax calculator by the way this is my own
00:36:24.640
editor that I wrote in Ruby I'm very happy to to have built this editor it
00:36:30.760
supports all the features that I need I'm very happy to be working in Ruby to build more
00:36:35.920
Ruby uh anyway so we have this uh tax calculator that will basically calculate
00:36:41.800
tax the Canadian way the the most basic Canadian way it's I'll multiply 15% by
00:36:47.160
the price of a product that's it so uh I want to reuse this on both the back end
00:36:52.359
and the front end so except in Alta exactly that's why I said it's the most basic Canadian way not the complete
00:36:59.119
Canadian way you got me uh okay so I added a few elements here that say
00:37:05.640
calculate so I mean let me zoom in calculate tax for Price uh it'll take a
00:37:12.240
price in a in an input and then it'll give us the tax and an output so first let me show you how I'm executing it in
00:37:18.560
the back end I have here a welcomes controller that will use the T tax
00:37:23.599
calculator and execute calculations on the price parameter that that it might
00:37:28.800
receive from the from the back end on the back end sorry in the back end so first let's do this so let Let me
00:37:35.760
refresh the page so it just added this these two elements actually let me disable the previous elements because we
00:37:41.560
don't need them anymore so um okay good now let's use the back that
00:37:49.119
Rubik code from the back end first just to demonstrate using it from the back end so I can say here price equal 100
00:37:56.960
boom it just loaded the website from the back end with price 100 and it GES me gave me the tax as
00:38:03.440
$15 um now let's do it on the front end so what I'll do is I'll go here and I'll
00:38:09.960
type 50 uh sorry I I need to refresh the page sorry
00:38:15.440
um uh oh yeah and I need to this I need to remove the price from here as
00:38:22.400
well and let me let me make sure I enable the code that that is for tax calculations it's here I have it
00:38:28.880
disabled so I'm going to enable it in opal so this code is B so okay actually
00:38:34.000
let me show you the code because it's very interesting so on top I added a new require statement you just say require
00:38:40.680
tax calculator and then here uh in rails you don't need to add it because rails
00:38:45.920
supports the idea of autoload uh which you can use in opal if needed but I don't have op autoload enabled in opal
00:38:53.000
right now so we're just using standard Ruby require which is still still very fascinating to be working on the front
00:38:58.680
end so I'm I'm requiring the tax calculator and then here I I basically read the price and put element the tax
00:39:06.119
div element and then I I take the price input I read its value I compare it I
00:39:11.359
convert it to a a float and then here this is exactly the same code I had on the back end I used the tax calculator
00:39:18.079
the same way I construct it and I pass it a price and it gives me the tax and then I load it into the inner HTML of of
00:39:24.760
the tax div so now if I were to go back here and refresh the page and then type
00:39:30.839
in 100s here sorry it's not working I'm not sure
00:39:35.880
why just a second um make sure I have everything enabled
00:39:43.079
here correctly whoops I'd love to see what the console says if you like as you're
00:39:50.240
trying to debug your front R just a second I think I know what
00:39:56.880
happened you're right I think I know what happened it's because I removed the previous Elements which are getting
00:40:02.040
access by by code that I did not disable there we go it's working so now
00:40:07.200
this is the same exact calculator working on the front end which is amazing like the same exact Ruby codes
00:40:13.520
is running in the front end now so there you go that's it we got it working both
00:40:18.800
on the back end and the front end so onto Ruby WM
00:40:27.599
so again please start the project if you haven't already I will be releasing the slides
00:40:33.160
after the presentation like in a few days or weeks so don't worry too much about it if you don't catch it now but
00:40:38.920
it's better if you catch it now to avoid forgetting so uh add this to config application RB in a rails app this is
00:40:45.200
exactly the same step we did with opal you just add app share to your autoload pass uh next this is not a
00:40:52.359
straightforward so as far as I know I don't know what the wasm way of sharing
00:40:57.640
stuff in a rails app from the back end to the front end but there are tricks to
00:41:03.119
get around it so you can use your asset uh you can basically Sim link the
00:41:09.119
appshare directory into public directory so that way it becomes available under
00:41:14.960
public that's what I did on my machine here locally to make it work but obviously there are other ways of doing
00:41:20.640
it like you can use your asset Pipeline and uh program extra conf configuration
00:41:26.800
in it to copy files automatically on server deploy from App shared into public as well so there are tricks to
00:41:33.160
get around it I I don't know a basic Ruby way out of the box but this is uh today because Ruby WM is extremely new
00:41:40.119
it's it's very very new still opal Ruby is a bit older it's actually mature opal Ruby came out around 2014 or maybe even
00:41:48.079
earlier so it's extremely mature whereas Ruby wasam is very new it is relatively mature too but it's still new uh next
00:41:57.119
what we do here is Ruby files could be added to app shared and they they could be required from Ruby on Ra's backend
00:42:04.079
however on the on the front end again it's not as straightforward I cannot just add a require statement and it
00:42:09.359
works it doesn't work like that with Ruby wasm instead uh anything I add to app
00:42:14.920
shared uh is going to become available under public quasm shared uh so then I
00:42:20.680
can import it in a ruby wasm front end by adding this HTML script so what I do is I add this script
00:42:27.119
script above the the script of the main app so I add wasm shared some file to
00:42:34.000
require so now uh this will make it available as a prepend like a
00:42:39.599
prerequisite for the app that I'm going to run next so if we were to go back now and make it work
00:42:46.319
here I'm going to disable the opal code enable back the wasm code and you can
00:42:53.800
see here we have uh this thing I have tax calculator in a
00:43:01.160
previous script uh tag being included first so that's the equivalent of a requir statement in Ruby next I include
00:43:09.000
the the main app uh so now if I go to the main app I'm going to enable the code that is using the tax calculator
00:43:16.520
this code is exactly the same that was in opal it's almost exact yeah it is the same it is exactly the same code um and
00:43:25.079
now if I refresh the page if I click here just to prove it to
00:43:31.240
you we are in wasm not opal anymore so this proves to us that we're in wasm now let's use this here using Ruby WM there
00:43:38.160
we go Works same Ruby code yep so so there you go I just
00:43:46.359
showed you a demo of reusing Ruby code on both the back end and the front end by the way uh speaking of uh this trick
00:43:52.920
that I just showed you uh sorry so I mean uh so not the trick sorry speaking of this script tag that I showed you
00:44:00.200
which we're including here ahead of the main script that uses it I saw some a
00:44:06.599
Blog Post online by a Japanese developer who actually implemented require
00:44:12.160
relative in Ruby Wen by Auto uh Auto making Ajax calls to the
00:44:20.440
server that will bring any file that you require meaning if if I go here and then
00:44:25.599
add sorry here example. Ruby and add require relative um uh tax
00:44:34.000
calculator right now this does nothing it doesn't work wasin doesn't support require relative out of the box but I
00:44:40.079
saw a Japanese developer blogged about how he implemented a version of this
00:44:45.160
that will make Ajax calls to the server and will pull exactly the right file relative to the original file but it
00:44:51.040
won't cat uh you might be right yeah but but it's interesting like when I'm trying to say is it's amazing people's
00:44:57.640
creative way of coming up with solutions to problems uh what I'm trying to say is more than likely in the near future this
00:45:04.160
will be a solved problem and it will not be a big deal eventually probably people will be able to just say require
00:45:09.400
relative and not have to do the trick of adding an extra it's not a trick but you know the requirement to add an extra
00:45:14.839
script tag so so again this is a very new thing Ruby wasm which is very
00:45:19.920
exciting and just like you know rails was new 20 years ago this is GNA this I'm pretty sure all the The Kinks will
00:45:26.520
get ironed out eventually but most of those kings are already ironed out in opal Ruby because it's much more
00:45:36.760
mature okay so before I go further any questions
00:45:43.200
awesome so uh now that we've gone through the basics of both Ruby WM and opal Ruby and then we saw how to reuse
00:45:50.800
code between the back end and front end in both let's get into more advanced Ruby techniques Tech Ruby in the browser
00:45:57.359
techniques so um please start these projects on
00:46:03.599
GitHub uh opal jQuery so let's click on this just to see what it is what what it's
00:46:09.720
about so I already showed you example an example of it earlier in a previous
00:46:14.760
slide but let me show you other examples I mean this is Opel jQuery code uh whatever you did you in J in JavaScript
00:46:21.359
using the dollar symbol here you use pure Ruby code for it like you say element
00:46:26.520
uh and you say my class and here you just put a CSS expression so basically you can write any jQuery codes you could
00:46:32.520
have written in J JavaScript using Ruby this is how you do document ready uh or
00:46:37.960
document ready then if you prefer uh Etc ET like document on click this is the on
00:46:44.160
way of doing it in Ruby of course Ruby syntax is nicer because it gives you blocks so this is a very nice project
00:46:51.480
for doing more advanced uh programming in opal Ruby I've actually used it to build my own open source project which
00:46:58.280
I'm going to talk about next so let's go next um okay so opal jQuery is first
00:47:06.839
next is glimmer DSL for opal so this was an experimental project that I built about four years ago um in opal uh it's
00:47:17.720
a framework that lets you build uh front end guey using pure Ruby code so instead
00:47:24.880
of using HTML you don't have to use HTML you just use pure Ruby code and given that Ruby lets
00:47:30.200
you build dsls uh we can take advantage of the meta programming facilities of Ruby and
00:47:36.280
uh build front end with pure Ruby however the the main uh uh like the main
00:47:43.680
idea behind this project was to Auto webify glimmer desktop apps so glimmer is actually a desktop uh guey library in
00:47:52.359
Ruby that I built uh many years ago uh which I still maintain today and it's
00:47:57.559
the library that I use to build my own code editor like this Gladiator it's called Gladiator is built using glimmer
00:48:04.160
uh one of the version one of the libraries of glimmer glimmer has about 10 libraries so this is one of them uh
00:48:10.079
so I ended up building another one called glimmer DSL for opal that lets me basically take any app that I've already
00:48:16.000
built on the desktop and run it in the browser with the same exact code without knowing HTML I don't like a developer
00:48:22.480
doesn't have to know HTML they could they could just reuse the same Ruby code so I'm going to show you a quick example
00:48:27.599
of this so um I have this um Tetris version that I've implemented using
00:48:34.119
glimmer on the desktop and this is the code of it like the code let me show you the pure Ruby code see it's uh building
00:48:41.160
um a shell is basically a window and it's got a Tetris menu bar it's got a
00:48:46.720
play field and a Score Lane so to give you and it's all a DSL it's a very uh
00:48:52.480
nice DSL that Maps exactly to the things you see on the in the guy so if I were to look at the game itself this is the
00:48:59.559
the play field this is the Score Lane and the menu is here uh so I mean I can
00:49:05.119
change the difficulty of the game for example and then if I say uh unpause this is Tetris built uh in Ruby
00:49:12.480
on the desktop so it's just a you know the standard Tetris that you all know and hopefully love there you go
00:49:21.160
so this exact code that I just showed you here ran in opal Ruby on the browser
00:49:28.000
and generated browser front end guey automatically let me show it to you so
00:49:33.920
if I were to uh let me enable that part in our example so I'm going to reenable
00:49:42.839
opal oops we disable
00:49:52.079
wasm Okay and then here I'm going to disable all of those and
00:49:59.359
enable my glimmer DSL for opal app and this is the I'll show you the code in a
00:50:05.319
second this is basically guey built uh using a ruby DSL so it's not
00:50:11.160
um the nice thing about Ruby dsls they're is they're kind of like lisp Ruby is partially inspired by lisp as
00:50:17.640
far as I know and this is kind of like code is data data is code so here I have the structure of the app it's say the
00:50:22.960
shell is the window meaning the browser tab uh and I have a bunch of labels and uh
00:50:28.880
the labels have text and there are buttons like hello Arrow if I click it it'll launch an app and here all I do is
00:50:35.799
I require a glimmer app that was written for the desktop originally so let me
00:50:41.799
show you uh this in the browser now so let's refresh this
00:50:49.040
page there it is so this is the glimmer DSL for opal sample app it gives me a whole list of samples and and uh Tetris
00:50:56.200
is here so I'm just going to click Tetris it's going to take a little bit to Lo a while to load because Tetris has
00:51:02.200
a lot of HTML element but there it is it doesn't it didn't take too long but Tetris even on the desktop takes a bit a
00:51:08.680
bit of a while but there it is this is uh just like the desk Tetris that I had on the desktop so it's the same exact
00:51:15.160
game same exact Ruby code like exactly the same Ruby code you guys are seeing now working in the browser maybe the CSS
00:51:22.480
needs a bit of adjustment like the nice thing is you can always skin after you built like you adapted it from a ruby
00:51:28.359
desktop app you can skin it further with CSS if you want but either way I'm showing you how it works gave me the
00:51:33.920
same panel uh same everything so I mean the fonts might be a bit different
00:51:39.240
between the browser and desktop but beyond that it's the same game it is the same exact logic uh
00:51:46.680
so um okay so let's refresh and get out of it for
00:51:53.040
now so yeah pretty impressive I mean I'm to be honest when I built that about 3
00:51:58.160
years ago my mind was blown by opal Ruby I'm like wow opal Ruby can do that like opal Ruby is so complete I was able to
00:52:05.839
run an entire desktop app it's a very complicated desktop like that Tetris is not a simple thing and it ran in the
00:52:12.200
browser which is impressive so I mean that that should give you confidence in opal Ruby if you ever want to consider
00:52:17.280
it for your projects uh last but not least glimmer DSL for web is an upcoming
00:52:23.880
gem with web like glimmer DSL so glimmer DSL for opal was an experiment where I
00:52:29.599
wanted to run my desktop apps from Ruby into in a browser using the same exact
00:52:35.359
syntax however what if I want to appeal to front end developers that already know HTML CSS and JavaScript very well
00:52:42.400
but they want to take advantage of all the niceties of Ruby like blocks like operator overloading like the nice Ruby
00:52:49.480
apis Etc well there's a new upcoming project that I just started it's called glimmer DSL for web
00:52:55.760
that basically will give us a similar thing to glimmer DSL for opal except the
00:53:01.240
idea was that it would start supporting opal first and then eventually I want to support W Ruby WM as an option so in the
00:53:09.760
future it should my hope is that I would support also Ruby wasm as just a configuration option so if somebody
00:53:15.640
wants and and both of them will have the same API so people uh want to uh use it
00:53:21.760
with opal they can use it with opal if they want to use it with wasin they just switch the configuration it runs in wasm
00:53:28.200
but the different the difference here in the syntax is that as you can see here I
00:53:33.359
have a a ruby syntax that is more similar to HTML so I have a div I have a label that has a class it has content
00:53:40.559
and here you get a div with a label with content and uh however the nice thing is
00:53:45.640
I can do more sophisticated thing using Ruby so if I were to build I can build a hello Button compon as a as a glimmer
00:53:52.799
web component and uh it would have a counter and it's got markup here that's
00:53:58.839
built in Ruby and it's got a div with text and button uh and the inner text of
00:54:04.119
the button will get updated using data binding so I can take advantage of cool things I can do in Ruby like data
00:54:09.799
binding where whenever the count uh attribute on the counter gets updated it
00:54:15.760
will take the value it will add this text to it like click to increment and it will insert it into the button inner
00:54:22.079
text so this code is the type in one line I did so much see this line in a
00:54:28.599
react app you have to run right a page to do the same thing so this is the amazing thing that we could do in Ruby
00:54:34.559
in the future uh once this project gets completed that that will be very Earth
00:54:39.720
shattering uh in my opinion like compared to what what people do in JavaScript uh so it'll give me this
00:54:46.319
basically it's going to generate this markup uh and every time I press the button the that click to increment is
00:54:51.920
going to change so here it changed to one if I click it it seven times it changes to seven and the beauty of it is
00:54:58.319
the markup is very uh declarative it's not imperative uh but also if you want to
00:55:04.240
mix logic into it you can mix it directly because you're already in Ruby and so which is an amazing thing that I
00:55:10.880
cannot do in Erb or jsx or any other templating technology so yeah that that
00:55:18.520
these are Advanced options for Ruby in the browser so last but not least uh what
00:55:25.280
what are the tradeoffs between using JavaScript and Ruby in the browser uh before I get into that though do you
00:55:31.920
guys have any questions about like the Advanced Techniques of building Ruby apps in the
00:55:46.799
browser uh it's going to start as op and the hope is that it would eventually support wasm as an
00:55:54.000
option when the comper comp Javas you have
00:56:00.000
access to it or just yes yes you can still see yes
00:56:08.079
MH um okay so first of all let's start with JavaScript now JavaScript unfortunately
00:56:15.160
cannot reuse backend rubby code uh so that's that's one of the tradeoffs that
00:56:21.599
you want to keep in mind versus Ruby in the browser uh how however um oh yeah
00:56:27.039
also it has inflexible syntax that does not support declarative dsls forcing devs to rely on HTML jsx templates the
00:56:34.200
reason why we use HTML is because JavaScript is not a nice language if it was nice we like we wouldn't use HTML uh
00:56:41.160
like it's funny I saw a blog post a while ago that said Ruby is the best lisp what they mean is Ruby is kind of
00:56:48.200
like lisp in the sense that you can write your structure of the page as code is data data as code in Ruby uh whereas
00:56:55.680
JavaScript is not doesn't allow us to do what list can do so that's why we have to use templating languages uh so that's
00:57:03.400
another disadvantage however JavaScript browser debugging has a onetoone mapping to the
00:57:09.559
code so that is one advantage to JavaScript uh however JavaScript does
00:57:15.200
not enable full transfer of backend Ruby skills so if you have backend Ruby skills you still have to learn
00:57:20.839
JavaScript on the front end if you're using JavaScript uh however Java script is natively supported by web browsers
00:57:27.119
meaning out of the get-go the browser can interpret JavaScript right away whereas with Ruby uh you need a backend
00:57:34.079
processing before you can interpret it so okay let's get into Ruby in the browser it can reuse backend code so
00:57:41.160
that's a very good asset uh it has a very flexible syntax with support for declarative dsls which is
00:57:47.160
amazing because it enables a one Lang one language for structure and logic which will minimize friction and improve
00:57:53.799
productivity uh browsing Deb browser debugging by default does not have a onetoone mapping
00:58:00.039
to the code uh but with Source Maps it comes closer to one to one mapping
00:58:05.640
Source Maps gives you the illusion of having one to one mapping to the code in the
00:58:11.319
browser uh it enables full transfer of backend Ruby skills which is
00:58:16.520
great uh it does require server compilation however in download it is not a native it's not natively supported
00:58:23.160
by browsers I would hope that one day browsers would support the top 10 programming languages out of the box so
00:58:28.720
that we don't have to even compile Ruby on the back end but for until then even
00:58:33.880
JavaScript with the later ecma script iterations used to get transpiled by Babel for a long time until browsers
00:58:40.359
supported it so I mean maybe they will support Ruby in the future but for now
00:58:45.440
we have the option of using opal Ruby or Ruby WM with backend compilation so I
00:58:50.480
mean in my opinion these are uh the trade-offs between the two there are a few advantages to JavaScript but they're
00:58:57.640
dwarfed by the disadvantages there are a lot more advantages to using Ruby in the
00:59:03.440
browser so um before I before I leave uh what do
00:59:09.280
you do you guys have any questions or other comments about
00:59:14.359
this yeah go ahead supports mobile appliations
00:59:20.079
because know support as far as I know it does yes I believe web web mobile browsers do
00:59:26.640
support wasm too and is it possible to javascri libraries
00:59:33.760
because yes any JavaScript library is available in in opal Ruby but in in wasm
00:59:41.280
I personally don't know what to do in order to reuse them but I they should
00:59:47.119
there must be an indirect way to bring them over but I personally don't know it because I'm very new to Ruby wasm but in
00:59:52.720
opal Ruby it's 100% yes and um this is just one more thing is is
01:00:00.119
it possible because you had a problem with shared folder in was is it possible to use import map do you think it it can
01:00:07.400
be a helpful way to do it it's not a problem it's it's not a real problem it's just less convenient that's it it's
01:00:14.599
not a problem I'm able to import anything I want in wasen as libraries but I have to add extra script
01:00:21.319
statements for them you can automate it yes you can use an automated the solution uh uh so regardless of whether
01:00:27.960
it's import Maps or something else you could automate it like I mentioned there's somebody who automated it by implementing requireed relative that
01:00:34.240
would automatically call into the server and bring any extra files automatically for you so that you don't have to worry
01:00:39.839
about it but out of the box uh as far as I know I have to do add the scripts
01:00:44.880
myself uh but before I go any further U your previous question it sounded like
01:00:50.000
you had an answer to it uh the one about um
01:00:55.160
no no JavaScript that I said just saying this is common you know you have
01:01:01.760
a multi environment you could basically relay between the two envir this nor
01:01:08.240
between C or M Ru
01:01:13.839
and right right so I mean I would I would hope that the answer is yes given the fact that it has the required JS
01:01:20.480
library that gives you access to JavaScript at least so I would I would hope that that it gives you access to
01:01:25.640
any other libraries
01:01:31.520
too you're trying to do with it also attempting to use data structures
01:01:37.680
from one the other and the last thing because you're in the environment more than me maybe um
01:01:44.839
do you think in Long Run can we have La as a part of R Ruben rails as a
01:01:50.559
rails um this caution about because I see potential in having it in stimulus
01:01:56.000
instead of using JavaScript in a stimulus we can use b or opal in the stimulus I think it's a good idea
01:02:02.319
because then you have all everything integrated I mean I'm I'm personally a bigger fan of opal just because I
01:02:08.119
mentioned like it has a smaller download size and uh It generally has nicer like
01:02:13.960
I can use require statements in opal and stuff like that so I generally personally would prefer to use Opel with
01:02:19.960
rails apps Opel has very very good support for rails development right now
01:02:25.400
the opal rails library is very mature uh and and very uh it follows the rails way in general uh
01:02:32.400
wasm uh wasm works but uh I don't know very nice ways for using it with rails
01:02:39.119
yet but maybe you can look into them and maybe you can build your own library that would facilitate using it with
01:02:44.720
rails more simply thank you yeah no problem yeah Ruby wasm is very new still
01:02:52.559
yeah okay so I'm going to jump into the summary uh so we started by having Matts
01:02:58.839
uh we we watched man Matts the creator of Ruby mentioned how Ruby in the browser is a possibility or is possibly
01:03:05.160
the future of Ruby uh try Ruby playground is uh you know the Ruby
01:03:11.319
environment that is available on Ruby lang. org that allowed us to experiment with both Ruby WM and opal
01:03:19.440
Ruby uh we went over the reasons for why why we should consider Ruby in the
01:03:24.880
browser uh we talked about the available options and trade-offs for Ruby in the browser how to get started with Ruby in
01:03:32.039
the browser uh whether it's Ruby wasm or opal
01:03:37.160
Ruby talked about how to share code between the the front end and the back end and then we went through some
01:03:43.520
Advanced Ruby in the browser techniques like opal jQuery like glimmer DSL for opal uh that that's a very Advanced
01:03:51.000
framework built on top of opal and uh the up coming glimmer DSL for web which I hope you've starred on GitHub and if
01:03:58.359
you haven't please start it after the presentation um JavaScript versus Ruby
01:04:05.000
uh tradeoffs and that's about it uh if you uh before we move into the Q&A part I
01:04:12.559
want to mention if you want to continue your learning um I know some of you
01:04:17.640
check this out so there's an intermediate opal app blog post that I WR that I've written a while ago it's
01:04:23.520
called using opal Ruby with real 7 uh I know you've taken a look at it it's a
01:04:29.039
it's basically uh a guide that shows you how to build more intermediate apps in opal including like I built a a baseball
01:04:37.039
animated baseball card application that lets you build your own baseball card for any baseball MLB player and then see
01:04:43.000
an animation uh in a gif using GIF um and then there's an intermediate opal
01:04:48.480
app GitHub project called baseball cards which is the app that got built in that blog post one thing I do want to warn
01:04:54.799
you though is this blog post was written about two or 3 years ago so it's slightly it's a bit outdated
01:05:00.319
unfortunately the link that lets you download official MLB uh team logos
01:05:06.119
doesn't work anymore you need to I I need to update it so but but it generally works though and maybe you
01:05:12.640
it's an open source project everything open source is is a contribut a community effort so I encourage
01:05:18.119
everybody to contribute if you want to fix it you're welcome to fix it and submit uh an like send me an email with
01:05:24.440
a patch or something or submit it on GitHub uh and please start the project if you haven't or start it when I when I
01:05:30.240
share the slides uh and uh otherwise we are hiring at leop we're looking for senior full
01:05:36.640
stack developers so if you are a senior full stack developer that's looking for a job or you know somebody please direct
01:05:42.920
them our way uh we have a very very um uh productive software engineering
01:05:49.319
environment at at leop uh because we we have very lean processes kind of like
01:05:55.640
inspired by the Toyota Toyota lean processes and also um we make sure to
01:06:02.119
not just deliver Direct Value to customers but also indirectly deliver
01:06:07.720
value to customers by maintaining our code quality uh to keep it of the highest quality like we do a lot of tech
01:06:14.240
Deb work basically as part of our main work that that delivers work uh sorry value to customers which is a very
01:06:21.160
unique thing that I've only seen at Lex up in a very few compan so I highly encourage you to work for us if you are
01:06:27.960
looking for a job or if you know somebody please direct them our way um so that's it uh thank you everybody
01:06:34.160
let's go through the Q&A phase any other questions you guys I gave you a lot of Q&A uh periods during the talk so maybe
01:06:41.640
you guys asked all the questions you had but if you have any you're welcome to ask me more questions how do Bild times
01:06:47.200
compare between
01:06:53.000
upes how do between
01:06:59.079
um I I cannot answer your question um because I personally
01:07:05.279
so I built uh mostly single page apps kind of like the tetris that I just
01:07:11.000
showed you and all of them generally run fast uh very fast in opal so I haven't
01:07:16.720
had any issues with it um so transm is what T seconds
01:07:22.200
faster um with the tetris thing is the part the transation or no that wasn't that the
01:07:29.400
transp that was the execution that was the execution because it generates many many uh it it generates like 2,000
01:07:35.559
objects in memory sorry 2,000 elements or something crazy like that yeah yeah yeah yeah yeah which H even in the
01:07:41.960
desktop version it takes a bit while usually games will give you a loading screen when you load I my my mistake is
01:07:48.319
I did not add a loading screen to that one I probably should it shouldn't be that hard curious what part um but
01:07:56.000
uh in my experience I didn't experience anything that different from when we
01:08:01.640
used to compile ecma script with with Babel like so R not long enough not that
01:08:07.599
different from not not different from Babel not slower for sure not slower than Babel in my
01:08:13.000
experience but uh I yeah my I would say I have a lot of experience but it's all
01:08:19.480
focused on single page apps like that Tetris so I'm um I wouldn't say I have a
01:08:25.520
lot of professional experience using it on an app with many many web pages so
01:08:31.040
that's the reason I couldn't answer your question but generally not but I personally haven't had any bad experience with it it's not like slow
01:08:36.440
enough to annoy you right no no not at all no that that I would say that the benefits way outweigh the costs in my
01:08:44.279
experience any other questions yeah go ahead one of the advantages of using
01:08:49.520
JavaScript is having the as synchronous Behavior do you think it have something because I think we can
01:08:57.040
have it by Ruby gives you a lot of apis for the asynchronous stuff as well like opal Ruby I know gives you apis to to be
01:09:04.560
able to do any asynchronous stuff you could do in JavaScript in Ruby okay as far as I know but but I I don't think
01:09:10.199
that can do this because it's purely Ruby and oh got it got it right right
01:09:16.080
right it's a single thread right um yeah I I don't know much about that
01:09:21.759
in wasm I know that opal Ruby take advantage of web workers just just like any JavaScript code you could use web
01:09:27.960
workers to delegate work to multiple threads uh in the back end in the background sorry so I know oper Ruby
01:09:34.279
supports it for sure but in fact the TR Ruby website is written using web workers with with the opal Ruby um Ruby
01:09:42.600
wasm I I I don't know what the answer to that question is in it uh but uh I'm sure you could do your
01:09:49.319
own research on wasm in general and learn more about it after the talk
01:09:55.760
um okay so that should conclude the presentation and begin the networking
01:10:00.800
time you guys are of course welcome to ask me any questions during the networking time because sometimes
01:10:06.840
questions don't come up right away uh but yeah thank you everybody for your attendance and
01:10:19.320
participation
