In this episode, they dive into a wide range of topics related to application development and the choices developers face when it comes to using third-party libraries, building from scratch, and evaluating the trade-offs involved. They share their insights on showcasing skills through public projects, the development of their Rails and Hotwire book, and the importance of building everything from scratch instead of relying on third-party gems. Moreover, they share their experiences using Vite Ruby and Vite Rails gems, as well as their frustrations with the stimulus documentation.
Throughout the episode, the conversation touches on vital elements of application development, from security considerations in authentication to the preferences for PWAs over native apps. They also share their thoughts and experiences on various tools and libraries, as well as their perspectives on the turbo native framework and communication layers.

Sponsors

Charles Max Wood [00:00:04]:
Hey, everybody. Welcome back to another episode of the Ruby Rogues podcast. This week on our panel, we have Valentino Stohl.

Valentino Stoll [00:00:12]:
Hey now.

Charles Max Wood [00:00:13]:
Charles Max Wood from Top End Devs, and we have a special guest this week. It is Cameron Dutro. Cameron, do you wanna remind people who you are?

Cameron Dutra [00:00:22]:
Yeah. For sure. I'm Cameron Dutra. I work at GitHub on, the core productivity team, mostly working on the primer view components, gem, which is an implementation of the primer design system. But I've also done other things on the show for this thing called Kubi, which I think is, something we talked about last time, I was on the podcast and, yeah, happy to be

Charles Max Wood [00:00:46]:
here. Yeah. Absolutely. So we were talking before the show, and we've covered Kubi. I'll go ahead and put it in the comments here in a minute, the the link to that. It sounds like there's not a whole lot to kinda rehash on that that would help people out. And so we were talking before the show about kind of the state of the front end with rails and things like that.

Valentino Stoll [00:01:05]:
Mhmm.

Charles Max Wood [00:01:06]:
It sounds like you might have a little bit different take than the people who are sort of rah rah Hotwire. So, yeah. Do you wanna kinda give us an overview on what you're thinking and what you're looking at? Yeah. To where that fits.

Cameron Dutra [00:01:22]:
Yeah. For sure. I'm glad you mentioned Hotwire, because Hotwire really kicked off, I think, this sort of renaissance in the rails front end, world ecosystem. And I have nothing but good things to say about Hotwire. I've seen people I've never I will say I've also never used it personally on any projects, but I have

Charles Max Wood [00:01:43]:
I like it.

Cameron Dutra [00:01:44]:
Seen it used. Yeah. For sure. And I've I've heard you talk about on the podcast before. I think Ayush was on a couple of episodes ago talking about, how awesome it is. And yeah. No. I mean, Hotwire is great.

Cameron Dutra [00:01:57]:
I think that it really sparked sort of a a much needed, like, injection of of a passion and and and, sort of new energy into into Rails especially, when it comes to the front end because really, I don't think anybody would argue that the rails back end is pretty solid, right? Like models and views and controllers, like I guess models and controllers are pretty awesome. They haven't, you know, really changed that much in the in the 20 years since Rails was first made. You can get really, you know, good performance speed, I guess, is what I mean, speed of development out of the back end. But the front end has kind of lagged a little bit. And, you know, when I first started at GitHub, I was hired to work on the Vue component library, I used to call it the framework, and also work on primer view components, which is like an implementation of the primer design system. But

Charles Max Wood [00:02:48]:
View components are awesome.

Cameron Dutra [00:02:51]:
Oh, yeah. Do I completely agree. No. I think they're great too. Yeah. No. For sure. And I think that that was one of the reasons that that was sort of something that came into Joel's mind.

Cameron Dutra [00:03:00]:
Joel Hoxley is the creator of v component. Mhmm. The reason that that sort of came into his his understanding, his thinking was because of him him seeing, you know, the React world, seeing components there and also just realizing that rails was kinda having a moment, you know, in those days, when it came to the front end. And so more thinking around the front end was sort of happening and that's why Vue component sort of came into existence. And, you know, Vue component has been phenomenal. There are some rough edges still to it that that, you know, as a as a maintainer of it, I can sort of maybe see, you know, more clearly than than other people. And but I think for the most part, it works pretty well. The thing though about all of the front end in rails right now is that there's there's just hasn't been a lot of thinking about sort of, you know, reactivity, interactivity in the in the same way that like the React and the Svelte and the Angular communities think about it.

Cameron Dutra [00:03:50]:
Right? And so that's what I've been kind of been thinking about lately. It's been like how can we kind of be, how can we sort of have our rails cake and and our and our front end cake, I guess, and maybe the front end ice cream maybe and eat them together. Right? Right. So yeah. So I'm thinking about a lot lately. Actually, to that point, I saw oh, go ahead.

Charles Max Wood [00:04:14]:
Well, I know. I I I think it's an interesting conversation to have. I think Hotwire solves some of these problems, but, yeah, I don't think it comprehensively solves them all.

Cameron Dutra [00:04:25]:
Yeah.

Charles Max Wood [00:04:25]:
Of course, I'm still learning pieces of it. Right? So for the people who are saying, oh, no. It totally solves them. There may be something I'm missing. I'm I'm just gonna be honest. Right? But, yeah, there there are definitely some things that I see people doing with, say, a React or an Angular, And we have shows on both of those. Right? Mhmm. We interviewed, what's his name? The Svelte guy.

Cameron Dutra [00:04:51]:
Oh, yeah.

Charles Max Wood [00:04:53]:
Anyway, we had him on JavaScript Jabber. I'm gonna remember his name here in a minute. But, and he was talking about Svelte 5. So, you know, people are seeing problems on the front end that they want to solve that give people a high level of interactivity and and, give it capabilities that, you know, maybe are a little different with, a rails hot wire build. So, I'd I'd love to talk about okay. So when you talk about reactivity in, say, a React or a Svelte or whatever, what what specifically are you looking for?

Cameron Dutra [00:05:29]:
Yeah. That's a good question. I mean, specifically

Charles Max Wood [00:05:33]:
Rich Harris.

Cameron Dutra [00:05:33]:
My own work.

Charles Max Wood [00:05:34]:
I'll put a link to

Cameron Dutra [00:05:35]:
that Yes.

Charles Max Wood [00:05:36]:
With Rich.

Cameron Dutra [00:05:36]:
That's who it is. Yes. Yes. He he's awesome.

Charles Max Wood [00:05:39]:
Because it came out, I mean, literally, like, a month ago.

Cameron Dutra [00:05:44]:
Right. Yeah. I think I saw it on the feed. Yeah. So the the interesting thing about sort of my my sort of realization into into why the rails front end needed sort of more help than it was getting from view component is that I saw a talk at Sin City Ruby. By the way, shout out to to Jason I know he's been a panelist on this podcast before. He did a great job organizing that again for the 2nd year in a row and, got to see a talk by Jason Charnes there where he was talking about how he had worked on he works at Podia. He'd worked on this, like interactive site builder sort of thing where you could kind of make your own, your own website for your for your the courses you're selling.

Cameron Dutra [00:06:24]:
Code is like a a course management and delivery platform. And he had tried to create it in in Rails before he but, you know, but as sort of the iteration number 1 of this thing. And he had used Stimulus and, I think probably Hotwire in in the back end. I'm not sure. I think there were some turbo frames involved. And the idea was that you go into this site builder and you could, you know, configure blocks of text and put images in there and whatnot and click save, and that would just become, you know, a website that other people would see and they could see your products and your courses and stuff. And they tried to build that, his company did, tried to build that, you know, with all those tools that Rails comes with, so Stimulus and Hotwire and, decided not to ultimately. What's that?

Charles Max Wood [00:07:09]:
I've wanted something like that for a long time myself, something I could plug into a rails.

Cameron Dutra [00:07:12]:
Yeah. Right. No. Completely. And I feel like there's some of those that already exist. I'm not sure. I don't know if they wanted, like, a full on, like, tiny CMS or whatever solution or that's at the right time, CE, whatever the site builder tool is for for, like, Jang or not Django, for, Drupal. But Yeah.

Cameron Dutra [00:07:28]:
I think it wants it a little lighter weight than that. So I tried to build it with sort of basic rails technologies and then decided to go with React because they couldn't get it to they couldn't they couldn't add all the features they wanted. And I'm I'm kind of glossing over some of the the details there. And, unfortunately, that talk wasn't recorded. But if people are curious, I'm sure you can reach out to to Jason on on Twitter or x. Yeah. But so but I watched him. So what he did during that talk was he he describes where the problem they had, and then he walked through implementing that with stimulus and with Hotwire.

Cameron Dutra [00:08:01]:
And he live coded the entire thing. And the thing that I remember from the talk is not even really the problem he was solving. The thing that took away from that is like he he just flipped back and forth between like 5 or 6 different files. He had to touch controllers, he had to touch stimulus, like rails controllers and stimulus controllers. He had to like wire up IDs in all these different places, and I was just looking at this going like, holy smokes. This is really complex, and there's lots of little things you have to remember to do. Right? And again, nothing against those technologies. I know people who have used both Stimulus and Hotwire to to great effect.

Cameron Dutra [00:08:36]:
They love it. It's awesome. And I think for certain use cases, it probably does make complete sense to use to go that route. So I saw that talk and then, it sort of contrasted with my own experience at GitHub where so this is maybe sort of made a splash couple of months ago, but GitHub is has sort of decided to go all in on React. Like, a lot of stuff is being rewritten on the front end is being rewritten in React. The core experiences are sort of moving over there. Oh, interesting. And one of the projects that yeah.

Cameron Dutra [00:09:05]:
And one of the projects that I was tasked with doing was this global user, global user nav drawer which is the thing that slides in from the right of the screen when you click on your avatar. There's a bunch of nav links in there. And I've I've written React before, actually quite a bit of React before at a previous company and so I I, you know, dove into that and got that working and sort of re reminded of how awesome React is. Right? Like, not necessarily for bundle size, not necessarily for efficiency of rendering, right? But React is awesome from a developer experience perspective. Like everything's in one file, you know, your HTML and your behavior in one file. You know, hiding and showing things is a matter of just adding a a conditional inside your JSX. Right? Like, it's very and also we were using TypeScript for it. So, like, all the types were there to help you, you know, guide you toward the right solution.

Cameron Dutra [00:09:59]:
It would compile give a compile error if this one is broken. So, you know, lots of just really nice ergonomics sort of that you don't get if you're doing Hotwire. You don't get if you're doing even something like a web component. Right? So after doing that work, and then also I was there's a couple of projects we also have where we're trying to remediate a bunch of accessibility issues and I've I've been put on this this v team, this this, sort of this strategic accessibility on blocker team now when I'm working on back on prem review components and then we're this team and I are creating this thing called the select panel. And the select panel is basically a click a button, little panel drops down, you can filter the results, it it fetches results from the server, displays them, and you can filter them, choose the one you want, submit the choices. And I'm doing this now all in web components, which is, like, basically a very procedural, like, imperative JavaScript the way that a lot of JavaScript used to be written back in the early days of jQuery or whatever where you like. Select an element, you can toggle a class on and off, you can grab an element, grab its parent, stick an element in, like you it's just lots of very sort of fiddly and error prone DOM manipulation code. Right? And contrasting that with what I had done in React, it was just like, woah.

Cameron Dutra [00:11:16]:
There is a big disconnect, like a big imp impedance mismatch. That's the wrong term. There's a big, like, difference between how these feel to write. You know? And I I really prefer the React way because it's just so much easier, simpler, like, it makes more sense to my brain. And not even I I wanna say more sense. It's they they make the same amount of sense. It's more just like the I have to do so much less debugging in the React version because I can declare something like, you know, display this or don't display it. And when the the properties or the state of that component change, it re renders.

Cameron Dutra [00:11:50]:
Right? So there's just there's just a it's just a much nicer developer experience over there. And, you know, it made me I mean, I was initially sort of very against the React migration at GitHub and sort of made my feelings known and, you know, didn't didn't make a lot of friends that way. But, you know, it, you know, having having now sort of had the the dual and and part of that was because, I'll be totally honest, part of that's because I really was sort of invested in Vue components succeeding. Right? I really wanted that to succeed. Uh-huh. And and again, I don't think that there I think there's probably a place for both of those tools. Right? There's a place for and there's also a place for Hotwire potentially in there too. Right.

Cameron Dutra [00:12:28]:
But, but but just what we got were you thinking was, like, why can we, like, not have this why can't we make components in Ruby that can run-in the browser and sort of get a lot of this same sort of cool reactivity that we get from React? Why can't we have that like in a Vue component or a flex component or, you know, whatever else. So that's I'm setting the stage there for what I've been thinking about lately.

Charles Max Wood [00:12:57]:
Yeah. That's a lot of stage, but it's it's definitely interesting. Right? I mean, what you're talking about just as the example that you're using here from Jason's talk, there's a system out there called Builder. Okay. So there's builder.io, and they, you know, they their CTO is Mishka Hevery who created Angular and then later created QUIC. And so builder dot I o is sort of this front end, you know, build, you know, visual builder front end so that, yeah, you can add in this is the text, this is the header, but you've kind of got a component you can put in there. Right? And then you've got, you know, maybe you have another component that's columns, and then you have a component that goes in each of the columns. Right? So you just visually drag and drop.

Charles Max Wood [00:13:47]:
And, yeah, I've like I said, I've wanted to be able to do that in rails for a while. And, yeah, you know, that level of interactivity just to put your finger on it, you know, would be really, really nice. But, yeah, what you're talking about is kind of how I envisioned it working, where I could create a view component rails. Right? And then have it behave the way that I want it to on the front end. And, yeah, I I was having trouble figuring out how to do that in a way that makes sense. And what you're talking about with React, where, yeah, essentially you just kinda put all of that together in a component, and then you say, k, I want this component here and this component here, and they interact and interplay in these ways. Yeah. You know, that that's really, really nice.

Charles Max Wood [00:14:33]:
And you can get some of that with the stimulus component or stimulus controllers. You get some of that with turbo, but it's it's not always completely seamless, I guess, in the way that React is. And Yes. The other piece is is yeah. Ultimately, I'd like to be able to just, yeah, put up my rails view components and have that level of of, I I don't even know, that level of interactivity or reactivity like you're talking about where I don't have to go in and code it twice. Right?

Cameron Dutra [00:15:10]:
Right.

Charles Max Wood [00:15:10]:
Exactly. Just just have it do what I need it to do and have it dynamic enough so that, yeah, I can pull some of this stuff together and and make it work.

Cameron Dutra [00:15:22]:
Mhmm.

Charles Max Wood [00:15:22]:
And I haven't given up on that idea, but I don't know what it's gonna take to get there.

Cameron Dutra [00:15:28]:
Right. Yeah. I mean, there's kind of a lot of, like, yeah, question marks about how we how we get to that point. I mean, so there there are a couple of because one of the things I think that that maybe is a one building block we could talk about is, like, how do you get Ruby to execute in the browser. Right? That's kind of step number 1. Like, if I have a new component and it's a Ruby class and it's got a Ruby template associated with it, right, that's the standard view component architecture. How do I get that thing to run-in the browser? Do I transpile it to JavaScript? Do I, you know, ship an entire Ruby runtime to the browser? And there's there's lots of of interesting questions there. And we there is a, you know, there's that project ruby.wasm, and I've seen actually, Jason Charnes also has a project where he got Ruby running in the browser, which is super cool running via Wasm.

Cameron Dutra [00:16:22]:
Right? It's very cool. And, you know, you can get basically a full on Ruby version running in your browser. You can do IRB, send a command, it'll spit back results. It's super, super cool. But, like, that binary WASM file that you're downloading is, like, I think, 50 megabytes. It's, like, 30 compressed or something, which is pretty big when all you need to do is render a couple of components. It's pretty heavy. Right? So but that's a super, like, good option, I think, for people that wanna play with it for, you know, for at the beginning of the process.

Cameron Dutra [00:16:55]:
Yeah.

Charles Max Wood [00:16:56]:
Yeah. I don't know. I don't know if you necessarily so the the kind of the approaches that I've seen to this are, you've got people who essentially have a Vue component. And then what I've done and I've seen other people do is they put a stimulus controller around it. Right? And so then what you do is you get a lot of that interactivity. But, you know, it's it's not necessarily as convenient as, say, JSX where it's all in the same file and it all kinda plays nicely. Right? Yeah. The other thing is is you have to kind of fiddle with some stuff in order to get, you know, sort of the level of dynamics.

Charles Max Wood [00:17:34]:
Right? I've I've had to kind of kludge some stuff together. For example, if it's, hey. I've got this container, and then I want random stuff to show up in it. Right? I I kinda have to play with it a little bit and massage my view view components to make it work. It's not impossible, and it's not horrible, but it is a little bit messy. And then I've seen people kinda go from that level. You know, you go all the way up to React, and React actually has server components is that, you know and they're still working out some of the kinks. But right, so could you have Ruby just server render? Right? So you wrote your view in JavaScript or in React, but have it server render those.

Charles Max Wood [00:18:16]:
Or, yeah, do you go all the way to, hey, here's Ruby in the browser and, you know, solve some of those problems? It seems like those are those are kind of the the levels that I'm looking at for some of this.

Cameron Dutra [00:18:28]:
Yeah. Yeah.

Valentino Stoll [00:18:29]:
I always thought too, like, there there's, like, a middle ground, right, with, like, Opal or something like that.

Charles Max Wood [00:18:35]:
Yeah.

Valentino Stoll [00:18:36]:
That you can even use, like I I thought maybe, like, with the the influx of WASM too, we would see, like, Opal, like, revamping up. Right? Like, people just, like, dropping Opel in and then, like, okay. Now there's, like, a middle ground that can also run, like, in browser, like, as, like, a proxy service, that does just bridge the gap.

Charles Max Wood [00:18:57]:
Yeah. Yeah. Opal transpose to JavaScript, and so it would slide into you know, you still have that server rendered component, then you have Opal on top of it the same way you would have stimulus or something else.

Valentino Stoll [00:19:10]:
Right?

Cameron Dutra [00:19:10]:
Yeah. I think that's right. I think Opal could be like, Opal Opal could could, like, bring some of that reactivity. Yeah. Like, if you could listen for, like or I don't know if you could listen for this, but you could define a a an adder reader, adder writer, and then hook into that, like, when you set an instance variable that could automatically update the the component and render the template or something. That could be really cool. Yeah.

Charles Max Wood [00:19:31]:
Yeah. There are definitely some options there.

Valentino Stoll [00:19:33]:
Yeah. It has, like, a document ready, like, trigger for it, which is helpful. Yeah.

Cameron Dutra [00:19:39]:
Yeah. Oh, I should mention too because, Chuck, you mentioned, stimulus controllers, and I I realized that I didn't sort of mention this before, but primary view components, the way that we add interactivity to our view components is via web components, which is what essentially what stimulus is actually doing. It's like a yeah. So we have web components Yeah.

Charles Max Wood [00:20:00]:
It's a different approach, but yes.

Cameron Dutra [00:20:01]:
Associated with them. Mhmm. Yeah. Yeah. It's a different it's a different approach, but it's very similar.

Charles Max Wood [00:20:07]:
Yeah. So web components just give people a little bit of background if you're not super familiar. Because I know we have people at different levels, so some people may be familiar and some aren't. But web components are actually a standard,

Cameron Dutra [00:20:20]:
that

Charles Max Wood [00:20:20]:
that you can write custom elements and things like that too.

Valentino Stoll [00:20:24]:
Yep.

Charles Max Wood [00:20:25]:
And so it's approach kinda similar to some of the other ones that you'll see out there. But

Cameron Dutra [00:20:30]:
Yeah. It's they're just a really nice way of, like, encapsulating some JavaScript behavior. So you can say, like, you you have a JavaScript class and that's that corresponds to an HTML element. And then when, like, click events happen inside that, you can you can listen for them on the on the component classes. So they can say, like, this dot add event listener. Right? And that will they'll be able to handle events that happen inside the component. You can also, like, this dot query selector just like you can say document dot query selector. So the query selector happens just within that one component.

Cameron Dutra [00:21:00]:
And within that one component, it's children. So it's just a nice way of, like, of saying I wanna scope, like, all of my JavaScript code to, like, this one the exception of the DOM tree. Right? And also web components are also really cool because they also provide the shadow DOM concept just like React sort of introduced back in the early days. You can have a shadow root attached to your your component and you can stick like, like CSS styles for example in there and those will only apply to that component. So there's no sort of global CSS anymore, or there I mean, there can be, but most of it is you get the one of the benefits of having a shadow root is you can attach like CSS styles that don't escape the context or the confines of of the component. So that's pretty cool too. Right. So oh, wait.

Cameron Dutra [00:21:48]:
We talked about WASM. Oh, go ahead.

Valentino Stoll [00:21:51]:
I I didn't realize that, that shadow root mode is is compatible in all the browsers. I I was worried that,

Cameron Dutra [00:21:59]:
yeah,

Valentino Stoll [00:22:00]:
it it is. I just looked it up, because I Oh, I was looking at that before, and, now it's all green. So Yeah. There you go. Yeah.

Cameron Dutra [00:22:08]:
That's right. There you go.

Charles Max Wood [00:22:10]:
Yeah. No. That's the nice thing about make

Cameron Dutra [00:22:12]:
that useful.

Charles Max Wood [00:22:13]:
It's the nice thing about a lot of those standards is that because the browser vendors are all interested in pulling together and and implementing the web standards, when they get adopted, they're usually pretty good about doing that. And web components, they seem to come back into vogue often enough that, yeah, people wanna see them work.

Cameron Dutra [00:22:36]:
Right. Yeah. It's it's it's interesting because, like, web components are very cool, but they, again, sort of only serve part of they only sort of solve part of the problem. I think I saw, like, a post on Mastodon a couple of months ago where it was like I think it was, Dave Copeland who I think has been on the show before. Mhmm. And he was saying, like, I think he's like this the title of his article was like, web components are a big nothing burger. Because in his mind, they didn't really add a lot to the table. And so there is that scoping concept we talked about.

Cameron Dutra [00:23:05]:
You can define, you know, a custom element attached behavior to it. You have the shadow root. Those are cool things, but they don't really at least in my opinion, they don't really come to like, they don't really meet that level of, like, awesomeness that is React. Right? Or that is, or is it Vue? Right? They don't add that or even even something like, Solid. I'm just listening to a podcast about Solid the other day. It's pretty cool. So all of that is is is great. Like, web components are awesome, but they don't only they are they offer the same things that that React does.

Cameron Dutra [00:23:35]:
At least they don't come come to that level. And so a lot of people are saying, like, well, these are they're they're great and you can use them in particular circumstances, but they they don't really give you the same flexibility that React does. And and to that point, you know, I think Stimulus and, we actually use this thing at GitHub called Catalyst, which is very similar to Stimulus where you can, like, attach, you know, you can you can put little, data targets and stuff on your children of your web component, and then it will automatically have those available as, like, properties on the component for you. And you can attach, event listeners using, data action. It's it's very similar to what what stimulus does. The thing about both of those though is that I still, when I'm working on this select panel thing I mentioned, I still have to do just a ton of DOM manipulation and, manual event listener adding and just like so much messing around. And then I have to, like, iterate on that console. Like, that's trying to get select panel, at least the version we have, trying to get that to support sort of multiple modes for fetching data.

Cameron Dutra [00:24:37]:
Like, I wanted to have totally local where it just filters the list that you render from the server. I wanna have, like, an eventually local where, like, it fetches results and then filters those in the browser. There's also, like, a fully remote mode where it always fetches every keystroke you're typing in the filter input. Right? All of that like, getting all of that working together was such an enormous pain in the butt. And I spent days, days trying to get that right. And in React, that would have been much much easier as I think it would have been. So that's where my head is at. Right? It's just like I feel like we need to maybe start being a little more honest in the rails community about like how great React is and like how, how much better it is than even something like Hotwire.

Cameron Dutra [00:25:18]:
And again, I don't think there's I think there's room for all of these technologies. It's not like we have to pick 1. Right? Like we can definitely choose all of them together. So but anyway, to to to the point of, like, Opal, that was the next thing I was gonna mention is, like, Opal is really cool. Like, it transpiles your Ruby to JavaScript right in front of the browser. I looked at Opal a little while ago and the thing that kinda got me was that, like, you still like, the big standard library that comes with, it's like 4 or 500 k, right, that you're, like, downloading and that's just for running some Ruby code. And then the transpiration process of Ruby to JavaScript itself, like you're adding a lot more to the bundle size because it's not just Ruby anymore, it's like Ruby wrapped in JavaScript. So I kinda didn't I mean, local's super cool.

Cameron Dutra [00:26:03]:
Again, not trying to take away from any of these technologies, but it was like a little too heavy for what I was thinking we would want in Rails. And actually to so to that to that point, just a couple of, like, a couple of 2 years ago or so, I started working on a Ruby implementation written in JavaScript called Garnet. And, Garnet has been a super fun to work on, but it's essentially yeah. It's like a implementation of of Ruby, like written in TypeScript and so you can, like, you know, import this thing and I think it compressed its currently and of course it's not fully fledged yet. There's not the whole, like, Ruby standard library in there but it comes in at like 97 k I think or something compressed or a little bit less than that 60 I think. So it's a lot smaller. There's no transpilation. You don't transpile your Ruby code.

Cameron Dutra [00:26:49]:
You just give it some Ruby code and it will use the Prism parser to parse it and then the, you know, execution engine in there to run the code. And it sort of just boils down to JavaScript native types the other day. So like the Ruby string class just wraps a JavaScript string. Right? Mhmm. So, that was that was super fun to work on or has been. It's it's definitely not done yet. It's above still I'm sure because running a Ruby implementation is not an easy thing to do. But it kinda it got me fired up about thinking about like, okay, so because all these previous solutions, right, like Wasm is super heavy, Opal is pretty heavy.

Cameron Dutra [00:27:27]:
Like I wanted something not as heavy, right, so that's what Garnet is supposed to be. So, yeah, there's I've I've been thinking about that for a long time. I got, like, all of the flex tests passing in in Varnet thinking, like, maybe we could run a flex component in the browser. But then just over the last couple weeks, I've been able to hack together this what I think is a pretty cool demo of rendering, not it's something it's just a it's just a a Ruby class. So using Garnet, you can load I'm calling it Neto, the Neto a Neto component. And it's just a class with some instance variables and like some state getters and setters. Right? And what it does, it sits on top of lit, lit html, or lit element, which is another sort of reactive JavaScript framework, really lightweight. And it you it takes your your template.

Cameron Dutra [00:28:22]:
It compiles that into Ruby that that calls the lit methods, so like lit dot HTML. And, that's how you def that's how the template gets defined. So again, it's taking your existing, you know, not ERB, it's actually using Rux, which we talked about a little bit on the show before. But, you can think of it like ERB. It takes your ERB template, converts that into what lit expects, and the whole thing then runs in the browser and uses web components. So like in the the Ruby class instance is like attached, you know, to the, to the web component. And you can do things like define event handlers as Ruby Lambda. So when you click a button, the random will run, update the state, state preventers the component.

Cameron Dutra [00:29:07]:
So, I'm really excited about that. It's I'm amazed that it works at all because it shouldn't. Like, it shouldn't shouldn't be able to do this. But, yeah, I've been I've been working on that a lot. I think, yeah, at some point, we might be able to actually have, like, Ruby components running in the browser, whether you're using, you know, Ruby dot WASM or Opal or Garnet or whatever. As long as you have that runtime in there, I think it's possible to, like, do this. And I think that would be a pretty big leap forward for Rails UI.

Valentino Stoll [00:29:40]:
Yeah. I 100% agree. This is really cool stuff, by the way. I'm gonna have to, like,

Cameron Dutra [00:29:44]:
dig into to

Valentino Stoll [00:29:45]:
a lot of this later.

Charles Max Wood [00:29:46]:
Yep.

Valentino Stoll [00:29:47]:
But yeah. Because I was trying to run, you know, one one of the hardest things with the whole, like, Wasm aspect of it is, like, just getting up and running. And there's, like, so many examples, but, like, even still, it is still kind of, like, a hurdle. And I know that Yeah. They'll keep making that easier, obviously.

Cameron Dutra [00:30:05]:
For sure. For sure.

Valentino Stoll [00:30:07]:
But still yeah. I'm not sold on on the idea of using it as, like, our go to. Right? It still it still feels a little clunky of Right. Right. And and and bulky. Like, you mentioned, like, it does, like, the packages do, like, they add up. And, like, you don't need the whole Ruby runtime. Right? So to, like, run your little components.

Valentino Stoll [00:30:29]:
So, definitely doesn't

Cameron Dutra [00:30:30]:
make sense

Valentino Stoll [00:30:31]:
for everything. Yeah. Right. Are you gonna yeah. Like I just imagine, like, you know, putting it on a, you know, mobile device or somebody, like, in, like, a terrible connection. Right? Like

Cameron Dutra [00:30:42]:
Yes. That's

Valentino Stoll [00:30:43]:
that's not a great, like, start, like, especially with everybody using mobile first. Right? Like

Cameron Dutra [00:30:49]:
Yeah. Yeah. No. That's a really good point. Like, actually, do you know who Alex Russell is?

Valentino Stoll [00:30:54]:
Oh, yeah.

Cameron Dutra [00:30:55]:
Yes. Okay. He okay. He I mean, he for the longest time has been, like, railing against modern front end because of how heavy it is. Right? And a lot of that I think is well, not a lot. Some of that is attributable to React. Right? But it's also just like the bundle sizes in general have just gotten and even to render a static site, you know, you're loading in just tons of crap, like React and all these things on top of React and, you know, component libraries and, you know, CSS library. I mean, just so much stuff gets crammed in even if you're just visiting a simple blog site.

Cameron Dutra [00:31:32]:
Right? And, you know, his his thing for a long time has been, this might work fine if you live in a developed country like the US and you're even even even then, if you're not in a big city, sometimes your, you know, your experience can be can be not as great as it could be. Right? But what he's really thinking about is people who live in developing countries like Google has this project they call I think they call it the next billion users and they're saying that like, you know, the the number of people online right now is only, I don't know, a third of the whole, you know, world population or half or something. And the next billion people that come online are gonna be doing so on mobile, on terrible connections with crappy devices because they live in these developing countries that are just coming online now. Right? And I think that this they were saying this back in like 2015 or whatever. So it's been a long time since then. I'm sure a lot of people have come online. But it it to the point where they were saying it was like 300,000 people or something were coming online every day. Right? Like it was a crazy sort of pace of of like more people getting added to the Internet over the last couple of years.

Cameron Dutra [00:32:40]:
And, you know, Alex's point, I think to a large degree has been the experience that those people have with your blog that has, you know, 10 megabytes of JavaScript delivered to the browser is just a terrible experience. Their phone can't even load that page because it's so heavy And to the extent that the bits actually flow to their browser, they flow slowly because they have a terrible connection because it's, you know, like 2 g speeds. So, you know, his his rallying cry lately has been like, let's just make the web less bloated, like, because it's gonna be much worse experience for for everybody really, but especially those people who, are coming online in developing countries. And I have to say that really sort of resonates with me because I have visited certain developing countries and have seen sort of firsthand how sort of difficult it is for people to get Internet connections. I visited Peru back in, like, 2010, granted a long time ago. And the only way you could really get Internet in Peru was via an Internet cafe. That's all that they really have for you. You couldn't get in your house unless you knew somebody, like, at the ISP who could, like, hook you up.

Cameron Dutra [00:33:45]:
Right? So I'm sure things have changed, but, you know, it it's just it's just worth considering, I think, that large portion of the population that, you know, won't be able to visit your site or will visit a site that loads very slowly because, you know, they have a bad connection, bad device. Yeah. Is it bad on low end?

Charles Max Wood [00:34:05]:
I think we had a very similar conversation with Alex last year when we were talking about web performance, and he basically pointed out, if I remember correctly, that, yeah, you still can't count on a great connection for Yeah.

Valentino Stoll [00:34:21]:
That's true.

Cameron Dutra [00:34:22]:
That's a good point. Even in developed countries, it's hard to sometimes I mean, you know, if you're behind a big building or something in San Francisco, even then, sometimes you have problems, you know, getting a page load or a signal out. So for sure. Yeah.

Charles Max Wood [00:34:36]:
So we've been talking about this for about 35 minutes if I look at the clock on the the recording. And I guess there are 2 questions that are kind of coming to mind, and we've we've kind of been, I think, circling around them a little bit. One of them is, okay, so what do we do now? Right? What what because we've kinda talked through all the different options that are out there, but what do we do now and what can we contribute to now that will move the state of the art? And then 2, where do you think we end up? Right? Do we solve this with Vue components that are front end enabled, or are we going to just wind up kinda settling back into something like a React or Stimulus will get better? I don't I don't even know. Right? WASM gets smaller on its package size or whatever.

Cameron Dutra [00:35:30]:
Yeah. Good questions, man. So what can we do now? I think that, like, rails is sort of uniquely positioned to sort of be the less heavyweight framework of of choice. Like, because, you know, in in in the rails sort of, the rails way of doing things, but you're you're not really shipping a giant front end. You're just, you know, you're shipping some HTML and there's some JavaScript sprinkles. So I would think that Rails in general is like now people can load whatever JavaScript libraries they want to

Charles Max Wood [00:36:00]:
in a

Cameron Dutra [00:36:01]:
from a Rails app, of course. But sort of by default, Rails is pretty lightweight compared to React or Gatsby or anything else that uses React, Review, or Svelte, or whatever. So, because it's also it's not just about bundle size, it's also about how long does it take the browser to init it, right, to initialize it. So, you know, it's all that stuff. It sort of has a as a whole that makes that impacts performance. So but I think Rails is uniquely positioned for this. Maybe not uniquely, but certainly well positioned for this, like other frameworks that are sort of more classic in the way they deliver front end experiences like Django, you know, it's probably also similar in that regard. So, yeah, what can we do? Mostly what I think I would like people to think about is that if you don't need to use interactivity, if you don't need interactivity, if you don't need, you know, a super dynamic experience, like don't use React for everything.

Cameron Dutra [00:37:00]:
Don't use Vue for everything. Don't use Hotwire for everything. Like, choose the thing that is gonna solve your particular problem and the in in sort of the least amount of of of front end code you can. Right? There are gonna be some things that really do need that full on interactivity that React brings, and that's totally fine. Like, use React for that. It's a little hard because, you know, React does kinda wanna take over the whole page. So there is kind of a, you know, there's still configuration there. Yeah.

Cameron Dutra [00:37:30]:
For sure. I don't know about other frameworks, but I know React for sure is like that. So, but there's lots of interesting work being done now about React Islands and, Qwik I think has this called partial hydration concept where, you can just hydrate part of the page at a time with your components that are coming from the like the JavaScript being coming from the server. It's gonna run to those components. So yeah. Well, you've

Charles Max Wood [00:37:53]:
got Astro as well, which implements the islands architecture, and you can

Cameron Dutra [00:37:57]:
Okay.

Charles Max Wood [00:37:58]:
You kinda box it in kind of

Cameron Dutra [00:38:00]:
a little bit. Right. So yeah. I I guess what I'm really advocating for is just think about what you actually need. You don't need to be using React for your blog, for example, like use Jekyll for your blog. Just give people HTML. It's gonna be lightning fast. You don't need any JavaScript run time for that.

Cameron Dutra [00:38:18]:
Just some HTML, some CSS should be enough for that. Right?

Valentino Stoll [00:38:24]:
Yeah. You know, this reminds me,

Cameron Dutra [00:38:25]:
like gonna be.

Valentino Stoll [00:38:27]:
This reminds me of, like, kind of who we're building things for in this specific case. Right? Like, I feel like most people were working on, like, the rails front end side as as, like, as the rails app starts to grow, like, beyond just, like, oh, I built this thing. Right? Like Mhmm. You get people that are all front end. Right? Who aren't real necessarily familiar with rails, and they can come up to the speed, like, enough. Like, view component is a great example of that. Right? Like, sure they learn how to, like, read ERB or, how the templating syntax is a little bit different, but it's still, like, kind of a bottleneck. And I know that there are now, like, kind of ways that view component, like, addresses these specific cases, but it's still, like, you know, a side step.

Valentino Stoll [00:39:12]:
Right? Like, it

Cameron Dutra [00:39:13]:
Yeah.

Valentino Stoll [00:39:13]:
It removes them from their, like, typical flow. Right.

Cameron Dutra [00:39:17]:
That's true. Yeah.

Valentino Stoll [00:39:17]:
You know, a new a new DSL they have to learn. Right?

Cameron Dutra [00:39:21]:
Right. Yeah.

Valentino Stoll [00:39:22]:
And I just keep, like, thinking about the, like, the older days of how Rails used to answer this, with, like, Rails assets. Right? Where, like, every JS package was like a gem, and you just say, okay. Like, I'm using this gem, as a or this JavaScript package as a gem instead. Right? And it it honestly worked pretty well. It was cool. Yeah. It was it was cool. I mean, I wouldn't wanna, like, continue that now, but, like, feel like just that idea of, you know, catering to the audience and just keeping things, like, in their their realm, like, that Yeah.

Valentino Stoll [00:39:59]:
That solve the problem the best. Right? Because it kept it kept it made it available for both. Right? Like, it made the rails developers happy because they could introduce new things to the people that needed them. Right? And then it just showed up in the rails asset pipeline, which now doesn't exist. But, you know, it consolidated things, in an easy way. So I I feel like there's a, like, there's a happy path there. I don't know what it is, but I I feel like we're, like, highlighting a lot of it now. Right? Like

Cameron Dutra [00:40:32]:
Mhmm. I I

Valentino Stoll [00:40:33]:
I'm worried that we're just, like, reintroducing, like, the same things of, like, alright. Just like a new DSL. Right? That's, like, really just outside of what people are using.

Cameron Dutra [00:40:44]:
Yeah. No. That's a that's a super good point. I I just saw somebody on my ass on and say this too. We're like, if you the more you stick with kind of the rails defaults, the better off you're gonna be, basically, because somebody can come in and make changes right away. You know?

Charles Max Wood [00:40:58]:
Well and a lot of that stuff is designed to kind of ergonomically, I guess, or developer experience align. And so Mhmm. Your thought processes can follow a common pattern.

Cameron Dutra [00:41:13]:
Yeah. Definitely. Yeah. I guess what I what I've been thinking lately is, like, I feel like as an industry, maybe not as much in the reals world, I'd have to pull people, but, like, we've sort of decided the components are good. Right? Generally speaking. Do you wanna use them everywhere? I don't know. Maybe not. Again, React, you pretty much have no choice.

Cameron Dutra [00:41:35]:
You have to use components everywhere. But in Rails, right, you can use a view component in the middle of a partial. You can enter a partial from a view component or like you can mix and match. Rails is on the case. Right? So I think that's a that's a a nice sort of way to and and again, I'm like, that's also how adoption has happened where people have just been like, I think view component's great. Maybe I wanna reuse this bit of UI logic. I'm gonna wrap it in a view component, but the rest of my UI, like, stays as templates and stays as partials. I think that's totally fine.

Cameron Dutra [00:42:04]:
But in general, it feels like components are kind of one a thing that we've kind of decided on the web at least are a good idea. And I feel like we've also sort of centered on this idea that reactivity is good too because that's maybe the biggest thing that React gave us. Like, sure React gave us JSX, sure React gave us, adding behavior to DOM elements or whatever, but it also just gave us this reactivity idea, and that sort of just changed a lot of what web development could be. Right? So those two things, components and reactivity, I think if we have those two things in the front end, but we don't maybe put too many, like, limitations on that. Like, we don't say you need to use this syntax instead of ERB or you need to use this component framework. Right? If you just let people render strings basically or, like, define a template however they want, then there's not this sort of artificial, like, you have to use this framework du jour. Because, like, one thing that I think is just so funny about React in particular is, like, people don't put, like, I'm a I solve problems, I solve web design problems, I solve problems my customers have. They don't put that stuff on their resume, they put like I'm a React developer on their resume.

Cameron Dutra [00:43:20]:
Right? To me that's just absolutely wild because like React is a technology, it's a library. It's not it's not a it's not like the way to solve or a way to solve problems, I guess. Or it's like how do I put this? That's not you're not a React developer. You're you're a programmer who happens to use React in your job. Right? You can use React to solve problems. You've seen it before. Rails is the same way. So, like, sure, add that to your, like, list of skills, but, like, what you actually do is solve problems, you know.

Cameron Dutra [00:43:46]:
But it this is coming up more and more now where people even at GitHub, people will apply or and even people will say, you know, I don't really want to to write rails UI because I don't wanna be I don't wanna put that on my resume. I wanna put react experience on my resume. And I'm just like, man, I don't feel like that is what you should be doing on your resume. I feel like you should be putting things like, here's the the cool product that I shipped, you know, and it just sort of incidentally used rails or incidentally used React. So anyway We

Valentino Stoll [00:44:16]:
fall victim to that in in rails and Ruby too. Right? Like, I'm a Rails developer. You know? Absolutely.

Charles Max Wood [00:44:23]:
But but employers employers fall victim to it too. Right? Sure. So they they and and that's where, you know so I put I'm a Rails developer because the employer knows that they want a Rails developer. And so Yeah. I'm speaking the language that they're putting out into the world and anyway.

Cameron Dutra [00:44:42]:
No. That's true. Yeah.

Charles Max Wood [00:44:44]:
They're too short sighted to even recognize, hey, this this person's been building apps in on the web for, you know, 80 years. It's not that long, but you you get my point. Right? And so they could probably pick up our stack within a couple of months, and then we would benefit from all of that experience they have in solving a lot of these same kinds of problems.

Cameron Dutra [00:45:08]:
Yeah. Exactly. Because, like, the web works the same no matter what framework you're using. Right? Like Mhmm. HTML, CSS, JavaScript, like, there's not that much different in these frameworks. And if you know how that stuff works and interacts with with each other, then you're probably gonna be able to pick up sort of any stack that that they have. Like, I've picked up, you know, Elixir work and and JavaScript and Ruby and Python, like, you know, it's it's and it really, at the end of the day, it's really not that different. So

Charles Max Wood [00:45:33]:
No. I

Cameron Dutra [00:45:35]:
don't know what Tell me about

Charles Max Wood [00:45:36]:
some parts of I mean, I like rails, and I there are parts of it that I definitely appeal to me. But, yeah, fundamentally, a lot of the problems are the same.

Valentino Stoll [00:45:47]:
It did make me think about, a topic. I'm I'm really interested to find out what you think of, Cameron.

Cameron Dutra [00:45:53]:
Oh, sure. Yeah.

Valentino Stoll [00:45:54]:
And that's, because one of the big things that I really liked of React, when GraphQL started, like, ramping up, was there, like, blend of basically data causing the reactivity? Like, what are your thoughts on, like, the coupling of, like, data, like, driven, like, you know, front end changes and vice versa and, like

Cameron Dutra [00:46:17]:
Yeah.

Valentino Stoll [00:46:18]:
You know, where that blend lies and, like, maybe where we could start, like, digging into that.

Cameron Dutra [00:46:24]:
Yes. Oh, that's such a good question. Right. Because I think it was like a lot back in the day, maybe not so much anymore, you would like go to like a React, like tutorial and they'd be like, here's some data hard coded into your component, you know, like as a JSON object or, like, render this and it would show and there was no conversation at all about, like, how you get that data from the server. Right? So, like, it was all it was you you'd get to this point where you're like, okay. I can render this component. I can run something like, how do I get and nobody none of these tutorials would ever go to that to that place. They would never say, like, okay.

Cameron Dutra [00:46:59]:
Now here's the back end code that you should you should try to to get standing up. Right? So that's a great question and, like, that's sort of another place where rails like, rails developers know where to get data from, you know. Mhmm. Active record object, pass that into your view component maybe or pass that into your template and render the properties from that. Yeah. So, like, we we know how to do that. Sort of maybe more than than a lot of JavaScript people do. But the question I think is like how do you sort of efficiently get that data from the back end to the front end? You know, do you stand up like a rails API or something where you're responding in JSON? That's certainly a way to do it.

Cameron Dutra [00:47:36]:
One of the really nice things about Hotwire is that you don't have to worry about that because it the server is generating the HTML. You're just jamming into the DOM. So there's no worrying about, like, how do I get the data? You all you do is just get HTML. So, you know, it's a really nice benefit there. We don't have to, like, think about getting data to the front end. What I would would love to see at some point is for for someone to figure out, and I think this is probably already possible, is is to figure out how you could sort of hook up React or hook up, you know, this Neto thing or or whatever to, like, broadcasts from, action cable. So like when something changes, you know, in the back end, it serializes that to JSON and then sends it to your page via Pub Sub like automatically and then your component updates based on that. So if you could say, like, in your component, like, subscribe to channel whatever.

Cameron Dutra [00:48:24]:
I don't I haven't used Action Cable. I'm gonna come across as an idiot right now. But, like, you know, some some directive in your in your component that that knows how to listen to these events and then update the DOM from that, I think that could be super, super cool.

Valentino Stoll [00:48:38]:
That would be awesome.

Charles Max Wood [00:48:39]:
Stimulus reflex do something like that?

Cameron Dutra [00:48:42]:
Oh, is that what's okay. I actually have not looked at stimulus reflex.

Valentino Stoll [00:48:46]:
I think I think so. That's

Cameron Dutra [00:48:48]:
generally the idea behind it, and then

Charles Max Wood [00:48:50]:
it it works exactly. So it uses cable ready behind the scenes. Awesome. Okay. Yeah. When when stuff gets updated then, anyway. That's awesome. I have to admit.

Charles Max Wood [00:49:04]:
I have not used it either. Nate Hopkins and, Eric Berry are they're local guys that I've known forever. And, yeah, they've they've done a lot of this. In fact, I'm trying to get Nate come on the show and just talk about all the, stimulus magic that he's doing because it's awesome. But yeah. So I'm pretty sure that that's how that works. It's it's exactly what I'm talking about. And But what's the reason why I'm talking about other end, I mean, what you're talking about on the front end is, okay, I've got the data.

Charles Max Wood [00:49:38]:
Right? So now I have to set up my you if I'm using stimulus, right, if if it's sending it back over via in JSON and not HTML where turbo can update it, then, yeah, then I have to program my stimulus controller to know update here and here and here and here. Right? And so what you're starting to see with Angular just implemented this. What's the one that, anyway, so you've got signals now on the front end. Right? Oh, yeah. And so you've got you've got this reactivity that's coming the other way. So the way that it used to work was with, observers. And so you had, like, ArcGIS. And so what it would do is it would it's it's kinda like the enumerable module in in Ruby.

Charles Max Wood [00:50:24]:
It's kind of the way I think about it. Right? Where you can pass map, compact, you know, and you keep getting this array of of things with them. It's an array of, essentially, it's events. I can't remember the exact term they call it. But yeah. So then it would trickle through to everything that subscribed to

Cameron Dutra [00:50:41]:
Right.

Charles Max Wood [00:50:41]:
Those events. Right? That event stream. But Yeah. Signals works the other way where essentially it says, everything that's bound to this value, when I update this value, it it updates everything that and so it's it's really slick. It's very fast.

Cameron Dutra [00:51:00]:
Yeah.

Charles Max Wood [00:51:01]:
And, yeah. So anyway so there are a lot of options on the front end that kinda can tie into what we're talking about with this. Yeah. Here are the updates.

Cameron Dutra [00:51:11]:
That's weird.

Charles Max Wood [00:51:12]:
Thing. Right?

Cameron Dutra [00:51:13]:
Right. That's super good to know. Because I I do think we kinda want a data binding story of some kind there. Right?

Charles Max Wood [00:51:19]:
Oh, absolutely. And, you know, I think in some instances I mean, turbo's great. Right? So, I ran across an article. I think it was Alexandre Ruba. He wrote an article that was basically a, hey. I wrote a stimulus and turbo pop up search feature. Right? So it does a modal pop up, and then it has a a bar where you can type your search term into. Right? And so when you Mhmm.

Charles Max Wood [00:51:48]:
You know, when you type it in, then it automatically goes back and it uses turbo frames to load in your search results in your model. Right? So it's real slick and it's it's it's this nice feature that you would love to see on, like, every website you use. And so I was like, oh, wow. That's really nice. Right? But just to kind of for for the things that aren't quite so, hey, just replace this with this. It's like you're talking about. Hey. The data's been updated.

Charles Max Wood [00:52:15]:
Somebody typed a chat message, you know, what have you.

Cameron Dutra [00:52:18]:
Right.

Charles Max Wood [00:52:19]:
Right. You don't necessarily need or in a lot of cases want turbo to, you know, do that work. Maybe you do and maybe it's fast enough. It I think it depends on your problem. But, yeah, just have the k. Here's your data. Boom. You know? And have it

Cameron Dutra [00:52:33]:
Yeah.

Charles Max Wood [00:52:34]:
Fan out, and it does it through whatever JavaScript mechanism is the state of the art these days.

Cameron Dutra [00:52:41]:
Yeah. Yeah. Completely. I'm I'm giving a talk at the SF Ruby meetup on 16th, and, like, I'm trying to get, like, a to do list, you know, the the classic to do list example. Mhmm. Working with, you know, Garnet and Needham and all that stuff just to show that what's what like, if if it just to make for myself mostly to see if it's, like, possible. Right? And by the way, shout out to to evil Martians and, Irina Nazarova has been putting together. She's revived the SF Ruby meetups.

Cameron Dutra [00:53:08]:
They're they're happening again. So that's cool. Didn't we have But but, like, I'm trying to get that working. I think she's been on the podcast. Yeah. Yep.

Valentino Stoll [00:53:17]:
I don't know that we had Irina. We had We had somebody with Vladimir Martians. Victoria. Oh,

Charles Max Wood [00:53:22]:
it's Victoria?

Cameron Dutra [00:53:23]:
Yep. Yeah.

Valentino Stoll [00:53:24]:
Yep.

Cameron Dutra [00:53:24]:
I think Vladimir Dovenev has been on on as well. Yeah. He works at Evil Martians. So anyway, my my thoughts there have been like, I wanna get that working, but I've been thinking like, how do I get it? So because there's no data binding story in Neto at all right now. And I'm like, how do I sort of do this? Would it would it make sense to like, when you when you wanna add a new item or edit an item, I guess, more to adding 1. I wanna add a new item. I submit a request to the server saying add this item, but then does the server respond with, like, all the items that I should be seeing or does it just respond with the one that I added and I have to append that somehow? Like, in the React world, right, you would just reenter the whole template, so you would need all of those, items or or or or what I guess you could do it that way. But the other option now that I'm thinking about is, like, just go add the item and don't worry about the response and just let the broadcast of the PubSub handle adding the item.

Cameron Dutra [00:54:16]:
That could be really cool.

Charles Max Wood [00:54:18]:
Yeah. So signals first showed up in SolidJS. And Yeah. I'm trying to remember the Yeah.

Cameron Dutra [00:54:25]:
Then we got kinda copied them. Yeah. Oh, I just that's the there's a JS party podcast about that I'm just now listening to. What is his name? Feel like it's Alex something also. Oh, no. Ryan Carniato.

Charles Max Wood [00:54:40]:
Yeah. Ryan Carniato. And I I talked to him at a conference in Amsterdam last June and just for hours. And then I listened to him talk to somebody else. I can't remember who we were sitting with at the speaker dinner, but it was it was awesome. And it's just like, oh, wow. You know, these ideas. Yeah.

Charles Max Wood [00:55:00]:
I'd love to see something like that. Angular just fully and fully, adopted signals, and they're doing it in a way to where they're basically encouraging people to have a hard look at how they're using RxJS, which is how they did

Cameron Dutra [00:55:15]:
it before.

Charles Max Wood [00:55:17]:
And say Interesting. Where can you use signals because it'll be faster and, you know, more efficient and solve a whole bunch of these things. Right? Yeah. Totally. Anyway Yeah.

Cameron Dutra [00:55:26]:
So it sounds like signals is the way to go, which I guess you could also say is like PubSub, right, like, you're getting the signal from the server.

Charles Max Wood [00:55:32]:
Mhmm. Yeah. Cool. But yeah.

Cameron Dutra [00:55:37]:
Well so yeah. I think to to Valentino's point, if if we could and I say we, I mean, the JavaScript or the the Ruby community. If we could get, like, a compelling sort of answer to React that lets you write components in Ruby, has a data binding story, you know, is is efficient. And and I think I'll and and one thing else before we I know we're getting close to an hour here. One thing I also wanted to mention is, like, a lot of of of JavaScript frameworks, right, the idea is that you render the component on the client and a lot of JavaScript frameworks are now thinking like, okay. Well, wait a minute. We probably should also render on the server because the server, you know, we can control that environment. It's gonna be very fast.

Cameron Dutra [00:56:19]:
We can optimize it. We can add more memory if you want to. We can't do that with browsers. So be cool if we could, like, paint something on the screen faster than our jobs for bundle load. So let's do server side rendering. And which always made me laugh because it's just like, you know, that's how the web used to work. Everything was server side rendered. Right? But I think if we do this in Ruby, right, you you sort of automatically get server side rendering without so it's like the opposite way of looking at it.

Cameron Dutra [00:56:43]:
It's like, I want server side rendering. I already have that. Now I want client side versus the other one, which is like I have client

Charles Max Wood [00:56:48]:
on my server.

Cameron Dutra [00:56:49]:
So, because we're already good at that, like, because Ruby, Rails are good at that, we sort of already have server side rendering. So we're, like, almost already ahead of the curve in that regard. You know? Right. Cool.

Valentino Stoll [00:57:02]:
I I'm really interested to see, how the AI, hand reaches in here too. Right? Like because Yes. If we have, like, all of these, like, component, like, driven things. Right? Like, we could just say, like, you know, hey. Like, create a bunch of components for this data and just have it, like, do that run time. Like, that would be awesome.

Cameron Dutra [00:57:23]:
Oh, that would be super cool. Yeah. Like, give me give me a to do list component right now. Just render it.

Valentino Stoll [00:57:27]:
Right. Exactly.

Cameron Dutra [00:57:28]:
Yeah. Right. That'd be super cool. Yeah.

Charles Max Wood [00:57:31]:
Yeah. We should also

Cameron Dutra [00:57:32]:
I'm not saying oh, go ahead. Go ahead. Go ahead. I was gonna say we should also try to work crypto in somehow. Right? Because that's Yeah.

Valentino Stoll [00:57:39]:
There we go. Yeah. Every component can be bought as an NFT too. You know?

Cameron Dutra [00:57:44]:
There we go. There we go.

Charles Max Wood [00:57:46]:
Well, I I I really do like the idea if there was some way to, yeah, translate my, view components in rails up into a component in in the front end. Right? But without having to do the work, I don't wanna write it twice. So I don't know.

Cameron Dutra [00:58:03]:
Yeah. Exactly.

Charles Max Wood [00:58:04]:
Which is really kinda

Cameron Dutra [00:58:05]:
what you have to do these days. Right?

Charles Max Wood [00:58:08]:
Yeah. So I just posted, in the comments again. And by the way, the comments go out to Twitch, YouTube, and Facebook. But we did an interview last year right when signals were hitting, and not a lot has really changed. I mean, the adoption and some of the implementations change, but the idea is still the same. We talked to Tejas Kumar about signals. And so if you wanna look into that, he he explains pretty deeply how that all goes. I was I I wish we had done it with Ryan Carniato, but we just didn't.

Charles Max Wood [00:58:40]:
So

Cameron Dutra [00:58:43]:
Yeah. I mean, talking about other things or talking about things that, like, we sort of have decided are good, like components reactivity, but also signals. I feel like signals are also one of those things that you sort of, like, all the major frameworks use signals. Right?

Charles Max Wood [00:58:55]:
They they are all adopting them, and it solves a lot of issues that

Cameron Dutra [00:59:00]:
It does. You

Charles Max Wood [00:59:00]:
know, kinda came up in, okay, how do I keep track of state from this to this to this to this?

Cameron Dutra [00:59:06]:
Yep. So Totally. Totally.

Charles Max Wood [00:59:09]:
Alright. Well, I'm gonna push us toward PIX. We've been talking for an hour. Yep. It's been great, and I I would love to just kinda see. I almost wanna just say, hey. Let's just do this every 6 months and just see where we're at. But

Cameron Dutra [00:59:22]:
Yeah. Yeah.

Charles Max Wood [00:59:24]:
Anyway, yeah. Let's go and do picks. Valentino, do you have some picks for us?

Valentino Stoll [00:59:29]:
Sure. Yeah. I've been following on a little bit on the the Twitter of, Ruby. It's always great to see, all all the brilliant talks that come out of that. I didn't, attend anything virtual. I don't know if they had anything virtual, but I just like seeing all the presentations and and projects getting worked on. It's pretty fantastic. Excellent.

Valentino Stoll [00:59:50]:
I got a little, I bought the Rapid r one and it came in the mail. And I've been I've been using a, a a all fully local, wearable AI, from the Edu project. This has been really fun. So I wanna compare and contrast and see maybe what, you know, one advantage is over the other. And digging into the the AI, I've I also, I've been reading through Obi Fernandez new book, the patterns of application development using AI, and just some super fantastic, like, abstractions and ways to use, AI in the Ruby context and build apps. It's like, it's it's really remarkable book, so highly recommended it.

Charles Max Wood [01:00:35]:
Awesome. I didn't even know he had a new book, so now I can. We should get him on and have him just explain it all to us. I'm gonna throw out a couple of picks. One pick that I have I always do a board game pick. So I'm gonna pick up, it's actually a card game. It's called Hanabi, and it's it's a fast, easy game. And, effectively, what it is is you have a set of fireworks, and there are 5 colors of fireworks.

Charles Max Wood [01:01:07]:
And what you do is you deal out 4 cards to each player. And I guess Hanabi is the word for fireworks in Japanese. Anyway, it's a cooperative game. And I'm I'm not always keen on cooperative games because what happens is you'll have quarterbacking where, you know, somebody basically is just telling you what to do. So if you play pandemic, it with my wife, I I shouldn't she doesn't listen to the show, but she does a lot of quarterbacking. In fact, there's another game that we play called, castle panic, and I don't enjoy playing it with her because I don't get to play. I just watch her play my turn. So, anyway, that said, Hanabi is a little bit different.

Charles Max Wood [01:01:51]:
And, you know, in all these games, you can overrule. Right? If it's your turn, you can overrule them. And so sometimes I'll say, I think this is a better idea, but Hanabi is different. So what you do is you deal out the cards, then you hold the cards up facing everybody else. So you don't know what cards are in your hand. And then what you do is you're trying to get the the colors to go from 1 to 5. And there are 3 ones, 2 twos, 2 threes, 2 fours, and 15. And so what what happens is is you can discard a card out of your hand, you can play a card out of your hand, or you can give a clue to somebody else if you have enough time tokens.

Charles Max Wood [01:02:30]:
And so you play a time token and you say, these are both twos or this is a white card or right or whatever. And you can only clue numbers or, colors. And if you clue a number or a color, you have to tell them what all of the cards are in their hand of that kind. And so you're trying to give them clues that will get them to play the ones and then the twos and then the threes, but it everybody's piles. Right? And so the other thing is is if you play a card that's already been played, right, then it's a bad play, And there's a fuse. There are 3 you have 3 parts of the fuse, and once they're gone, you explode and you lose. So the the other way to lose is, right, if you discard both numbers or all the numbers of a specific color and and number. Right? So if you discard any of your fives, you lose because you can't win.

Charles Max Wood [01:03:31]:
You know? And so anyway, so me and my friends, we played it, like, 3 or 4 rounds last night. We played some other games too, but, this is one of my favorites. It's it's fun. It's hard. It's freaking hard. Right? Because sometimes they'll say these are both white or they'll say this is a 4, and you're like, okay. Are you telling me that I can get rid of it? Right? Because when you discard a card, you get your you get the time tokens back from giving a clue. If you play it, you know, but if you play a card and it's wrong or you get rid, you know, you get rid of a card you need.

Charles Max Wood [01:04:02]:
Right? And so it's, do I are you telling me to keep it? Are you telling me to get rid of it? Are you telling me to, you know, hold on to it? Are you just trying to help me know that I have it right, for the future? And so, anyway, it's it's way, way fun. So, I'm gonna pick Hanabi. Super, super simple game. I'll list, I'll put the board game geek list up, and then I'll put an Amazon affiliate link up. Board game geek weights it at 1.69, which means that if you're a casual gamer, this is right up your alley. It's it's so fun. So, anyway, I'm gonna pick that. I went on way too long about that game.

Charles Max Wood [01:04:42]:
As far as other picks go, there is a challenge that I want to join next week. So one of my favorite books is Think and Grow Rich by Napoleon Hill. And there's a market marketing guy named Russell Brunson who, is putting together a 3 day challenge based on the book. And, I don't have the link right off the bat, but I will put it up in the show notes so you can join it. That will probably also be of an affiliate link. I think I have an affiliate link for that. It's free. It's a free challenge, so I only get paid if you buy something after you sign up for it.

Charles Max Wood [01:05:19]:
So and even then, it doesn't cost you anything extra. I just get a cut of the action. So, anyway, I'm I'm super excited about that. And then, yeah, go sign up for Ruby Geniuses. That's rubygeniuses.com. We're we're gonna be doing weekly calls, talking about Ruby. I'm hoping to get brilliant people to come join, but, you know, I'm playing with this stuff all the time. So, I'll probably be doing some of the presentations about how I'm deploying or doing front end or whatever.

Charles Max Wood [01:05:52]:
So, definitely check that out as well. And, Yeah. Those are my picks. Cameron, what are your picks?

Cameron Dutra [01:06:00]:
Sorry. I was just going to rubygeniuses.com. Let's see. My first pick is going to be the Prism parser. And I know that it's been talked about a lot on various podcasts, Kevin Newton did. But I think he did do a talk on it at, RubyConf in November last year. But, yeah, it Prism is is amazing. It's and if you haven't heard of it before, it's a new parser written in c that he and and couple of other people at Shopify been working on.

Cameron Dutra [01:06:39]:
The idea is that it's gonna replace all the other myriad of parsers that exist out there for Ruby, like the white quark one and, I think Seattle r b, Ryan Davis has one also. So the idea of being it's gonna replace those and eventually it'll also replace the c Ruby parser. I think it already has. At least it's it's it's there. I don't know if it's actually being used. I think you could switch it on, but it's available. The cool thing about it is that there's also WASM bindings for it, so that's what my little Ruby implementation is using. It's it's using this, the prism dot WASM.

Cameron Dutra [01:07:09]:
And, he's got TypeScript types for it. I think mostly for Opal as Opal is gonna use it too. But, I mean, I just found it to be because what I was doing before like, before that project came out, what what what what Garnet would do is it would it would like compile the Ruby code into an instruction sequence like on the server and then ship like a JSON file that it would then, you know, read the instructions from. And now it doesn't have to do that, it can do all of that in the browser, just all the parsing and everything in the browser now via prism dot WASM. So, huge, like, shout he just made like that. I I would I think it's not like a exaggeration to say that Kevin, like, made Garnet possible. Right? Mhmm.

Valentino Stoll [01:07:53]:
And

Cameron Dutra [01:07:53]:
he's also been getting sort of lots of accolades from other people who work on, you know, Ruby implementations like TruffleRuby and JRuby and all the other ones that that need a parser. So that's really cool. I also really appreciate just how much time he dedicated to helping me figure that out during the rails or the the RubyConf hack day. So one of the things that happened that was different from how RubyConf normally runs is that they have a hack day at the beginning. 1st day of the conference was a hack day. There weren't weren't any talks. And he would just go into a room and and meet these luminaries in the Ruby community and talk to them. So I got to talk to him.

Cameron Dutra [01:08:30]:
I got to talk to, Amir Rajan who does Dragon Ruby. That was super fun. So, the I guess my pick is Prism. Maybe the second pick is Rails comp or Ruby comp hack day. And then I think my my 3rd pick is gonna be Sin City Ruby, which is Jason's wife's conference. It was really fun. Just great to get out, go to the Vegas, have a good time in Vegas, and, you know, see some cool talks. Obi Fernandez was there actually talking about AI and Ruby.

Cameron Dutra [01:08:58]:
That was super interesting too. So, yeah, I think that that sums it up.

Charles Max Wood [01:09:04]:
Awesome. So, Cameron, if people wanna check-in with you, if they have questions or anything, where do they find you?

Cameron Dutra [01:09:11]:
Yeah. I have a website camerondutra.com. I don't really post there that much. It's just a blog. I'm also on, Mastodon, cameratron@ruby.social, and, I'm on x too, although I use x very much, at cameratron. Github.com cameratron. I'm I'm basically cameratron everywhere on the Internet.

Charles Max Wood [01:09:31]:
Awesome. Alright. Well, we're gonna go ahead and wrap it up. Thanks for coming, Cameron. This was awesome.

Cameron Dutra [01:09:37]:
Thank you.

Charles Max Wood [01:09:38]:
Alright.

Cameron Dutra [01:09:38]:
Yeah.

Charles Max Wood [01:09:39]:
Until next time, folks.

Valentino Stoll [01:09:39]:
Thanks, Johnny.

Cameron Dutra [01:09:40]:
Max. Yeah. Absolutely. Thanks, guys.