Cameron Dutro is the Staff Software Engineer at GitHub. They dive deep into the world of web development and explore the latest trends, challenges, and innovations. In this episode, they have an enlightening discussion on the state of front-end development with a focus on Ruby and Rails. They delve into the use of web components, the limitations of existing technologies, and the potential for a new Ruby implementation, Garnet, to revolutionize front-end development. From the impact of Hotwire to the challenges of integrating front-end frameworks, this episode offers valuable insights and thought-provoking discussions for developers navigating the ever-evolving landscape of web development. 

Sponsors

Charles Max Wood [00:00:05]:
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 Doutreaux. Cameron, do you wanna remind people who you are?

 Cameron Dutro  [00:00:21]:
Yeah, for sure. I'm Cameron Dutra. I work at GitHub on, the core productivity team, mostly working on the primer view components, the 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 here.

Charles Max Wood [00:00:46]:
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 kind of 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.

 Cameron Dutro  [00:01:05]:
Mhmm.

Charles Max Wood [00:01:05]:
It sounds like you might have a little bit different take than the people who are sort of rah, rah, hot wire. So, Yeah. Do you wanna kinda give us a a an overview on what you're thinking and what you're looking at? Yeah. For sure.

 Cameron Dutro  [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 Dutro  [00:01:43]:
Seen it used to 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. 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.

 Cameron Dutro  [00:02:08]:
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, or I guess models and controllers are pretty awesome. They haven't, you know, really changed that much in the in the 20 years since Grails was first made. You can get really, you know, good performance. I I speed, I guess, is what I mean, that 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 Vue components, which is like an implementation of the primer design system. But Vue

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

 Cameron Dutro  [00:02:50]:
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 Dutro  [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 same way that, like, the React and the Svelte and the Angular communities think about it.

 Cameron Dutro  [00:03:52]:
Right? So that's what I've been I've 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 or the front end ice cream, maybe? 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. 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.

Charles Max Wood [00:04:33]:
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. We interviewed, what's his name? The Svelte guy.

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

Charles Max Wood [00:04:52]:
Anyway, we had him on JavaScript Jabber. I'm going to 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, rails hot wire build. So, I'd, I'd love to talk about, okay. So when you talk about reactivity in, say a reactor as felt or whatever, what, what specifically are you looking for?

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

Valentino Stoll [00:05:32]:
for my

 Cameron Dutro  [00:05:33]:
own work.

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

 Cameron Dutro  [00:05:34]:
to that to

Charles Max Wood [00:05:35]:
that with Rich.

 Cameron Dutro  [00:05:35]:
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 Dutro  [00:05:43]:
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 Sweat. I mean, 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 was at Podia.

 Cameron Dutro  [00:06:14]:
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. Capotia is like a a course management and delivery platform. And he had tried to create it in in Rails before he built me in a as sort of the iteration number 1 of this thing. And he had used Stimulus and, I think probably Hotwire in in the back and all. I'm not sure. I think there were some turbo frames involved. And the idea was that you'd 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.

 Cameron Dutro  [00:07:07]:
What's that?

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

 Cameron Dutro  [00:07:13]:
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 not the right time, see, whatever the site builder tool is for for, like, Jang or not Django, for, Drupal. But I think it wants 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 they couldn't they couldn't add all the features they wanted.

 Cameron Dutro  [00:07:39]:
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, 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.

 Cameron Dutro  [00:08:15]:
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. They love it.

 Cameron Dutro  [00:08:36]:
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.

Charles Max Wood [00:09:03]:
And one

 Cameron Dutro  [00:09:03]:
of the projects that yeah. 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 as a matter of just adding a a conditional inside your JSX.

 Cameron Dutro  [00:09:51]:
Right? Like, it's very and 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. It would compile you have a compile error if this one was broken. So, you know lots of just really nice ergonomics sort of that you don't get if you're doing hotwire and you don't get if you're doing even something like a web component. Right? So after doing that work, I 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 where I'm working. I'm back on primary view components, and then we're this team and I are creating this thing called the select panel. And the select panel is basically if you click the button, little panel drops down, you can filter the results that that fetches results from the server, displays them, and you can filter them, choose the one you want, submit the choices.

 Cameron Dutro  [00:10:45]:
And I'm doing this now all in web components with just, 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, 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. 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 fields are right. 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.

 Cameron Dutro  [00:11:36]:
It's they they make the same amount of sense. It's more just like the I have just 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 rerenders. 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's, 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.

 Cameron Dutro  [00:12:20]:
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.

Valentino Stoll [00:12:27]:
Right.

 Cameron Dutro  [00:12:28]:
But, but but just what we got 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 were talking about just as the example that you're using here from Jason's talk, there's the system out there called builder. So there's builder. Io and they, you know, they, their CTO is Mishko Hevery who created angular and then later created quick. And so builder. Io 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.

Charles Max Wood [00:13:37]:
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. 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.

Charles Max Wood [00:14:12]:
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 kind of put all of that together in a component and then you say, Hey, 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. 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.

Charles Max Wood [00:14:52]:
Ultimately, I'd like to be able to just, yeah, put up my rails view components and have that level of, of, 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 Dutro  [00:15:09]:
Right. Exactly.

Charles Max Wood [00:15:10]:
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 make it work. And I haven't given up on that idea, but I don't know what it's gonna take to get there.

 Cameron Dutro  [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 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 trans pile 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 Dutro  [00:16:21]:
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, you 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 Dutro  [00:16:54]:
Yeah.

Charles Max Wood [00:16:55]:
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 view 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 when 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 kind of plays nicely. Right. 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 dynamic, 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.

Charles Max Wood [00:17:43]:
Right. I kind of have to play with it a little bit massage 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 kind of 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 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 Dutro  [00:18:27]:
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. Yeah. 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 Opal 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. Opal Transfibas to JavaScript, and so it would slide in to 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.

 Cameron Dutro  [00:19:09]:
Right? Yeah. I think that's right. I think Opal could be like, Opal Opal could could, like, bring some of that reactivity.

Charles Max Wood [00:19:16]:
Yeah.

 Cameron Dutro  [00:19:16]:
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:30]:
Yeah. There are definitely some options there.

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

 Cameron Dutro  [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 primer view components, the way that we add interactivity to our view components is via web components, which is what essentially what stimulus is also doing. It's like a yeah. So we have web

Charles Max Wood [00:19:59]:
components Yeah. It's a different approach, but

 Cameron Dutro  [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, that that you can write custom elements and things like that too. And so it's approach kind of similar to some of the other ones that you'll see out there. But

 Cameron Dutro  [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 you'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 Dutro  [00:20:59]:
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 this shadow DOM concept, just like React sort of introduced back in the early days. So 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.

 Cameron Dutro  [00:21:46]:
So oh, wait. We talked about Wasm. Oh, go ahead.

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

 Cameron Dutro  [00:21:58]:
yeah.

Valentino Stoll [00:21:59]:
It it is. I just looked it up, because I Oh, cool. I was looking at that before, and, now it's all green. So

 Cameron Dutro  [00:22:06]:
Yeah. I'm here today. That's great.

Valentino Stoll [00:22:09]:
There you go. Yeah.

Charles Max Wood [00:22:10]:
Yeah. No. That's the nice thing about that useful. 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 Dutro  [00:22:35]:
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 Massadot 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. You can define, you know, a custom element attached behavior to it.

 Cameron Dutro  [00:23:08]:
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 it's a Vue. Right? They don't have that or even even something like, Solid. I just was listening to a podcast about Solid the other day. It's pretty cool. So all of that is is is great. Like, web clones are awesome, but they don't I don't think they are they offer the same things that that React does.

 Cameron Dutro  [00:23:34]:
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 rights ability that react does And and to that point, you know, I think stimulus and, we actually use a 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 and 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, this trying to get select panel, at least the version we have, trying to get that to support sort of multiple modes for fetching data. Like I wanted to have totally local where it just filters the list that you render from the server.

 Cameron Dutro  [00:24:42]:
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. I spent days, days trying to get that right. And in React, that would have been much, much easier. At least 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 Dutro  [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, so 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. That's just for running some Ruby code. And then the transpilation process of Ruby to JavaScript itself, like, you're adding a lot more to the bundle size because it's not just Ruby anymore.

 Cameron Dutro  [00:25:56]:
It's like Ruby wrapped in JavaScript. So I kinda didn't I mean, local is super cool. Again, not trying to take away from any of these technologies, but it was a little too heavy for what I was thinking we would want in Rails. And, actually, so 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.

 Cameron Dutro  [00:26:32]:
It's 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. You just give it some Ruby code, and it will use the Prism parser and 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.

 Cameron Dutro  [00:27:05]:
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 a bug still I'm sure because we're running a Ruby implementation. It's 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. Like, I mean, I wanted something not as heavy.

 Cameron Dutro  [00:27:29]:
Right? And so that's what Garnet is supposed to be. So, yeah, there's that that to think 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 and lit element, which is another sort of reactive JavaScript framework, really lightweight. And it you it takes your your template.

 Cameron Dutro  [00:28:21]:
It compiles that into Ruby that that calls the lit methods, so, like, lit.html. And, that's how you that's how the template gets defined. So, again, it's taking your existing, you know, not ERB. It's actually using rocks, 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.

 Cameron Dutro  [00:29:00]:
So when you click a button, the random will run, update the state, state pre renders the component. So, I'm really excited about that. I it's I'm amazed that it works at all because it shouldn't. Like, it shouldn't shouldn't come through 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:39]:
Yeah. I 100% agree. This is really cool stuff, by the way. I'm gonna have to, like,

 Cameron Dutro  [00:29:43]:
dig into to

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

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

Valentino Stoll [00:29:46]:
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 Dutro  [00:30:05]:
For sure. For sure.

Valentino Stoll [00:30:06]:
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.

 Cameron Dutro  [00:30:17]:
Right.

Valentino Stoll [00:30:18]:
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. So, definitely doesn't make sense for everything.

 Cameron Dutro  [00:30:31]:
Yeah. Right.

Valentino Stoll [00:30:32]:
If you're 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 Dutro  [00:30:42]:
Yes.

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

 Cameron Dutro  [00:30:48]:
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. Yes.

 Cameron Dutro  [00:30:55]:
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, 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. 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.

 Cameron Dutro  [00:31:48]:
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 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 Dutro  [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 a 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 I've seen sort of firsthand how sort of difficult it is for people to get Internet connections. I visited Peru back in like 2010, granted 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.

 Cameron Dutro  [00:33:40]:
You couldn't get in your house unless you knew somebody, like, at the ISP who could, like, hook you up. Right? So I'm sure things have changed, but, you know, 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. Is it bad? 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

 Cameron Dutro  [00:34:20]:
Yeah. That's true. 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:38]:
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 you're 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 kind of talked through all the different options that are out there, but what do we do now and what can we contribute to now that we'll move the state of the art and then to 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 kind of 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 Dutro  [00:35:32]:
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 like, because, you know, in in in the rails sort of, the rails we have 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 in a different 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, Ruby, 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 the browser to interpret your JavaScript.

 Cameron Dutro  [00:36:19]:
Like, load that up, parse it, load it, do whatever actions are necessary to init it, right, to initialize it. So, you know, it's all that stuff. It's sort of as 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. Don't use Vue for everything. Don't use Hotwire for everything.

 Cameron Dutro  [00:37:04]:
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. It 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 no security there. Yeah. For sure. I don't know about other frameworks, but no React for sure is like that.

 Cameron Dutro  [00:37:36]:
So, but there's lots of interesting work being done now about React Islands and, QUIC, 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 job scripting coming from the server. It's gonna run to those components. So yeah.

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

 Cameron Dutro  [00:37:58]:
Okay.

Charles Max Wood [00:37:59]:
You kinda box it in kind of a little bit.

 Cameron Dutro  [00:38:04]:
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 runtime for that. Just some HTML, some CSS should be enough for that.

 Cameron Dutro  [00:38:22]:
Right?

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

 Cameron Dutro  [00:38:27]:
like program being.

Valentino Stoll [00:38:28]:
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, you get people that are all front end. Right? Who aren't real necessarily familiar with rails and they can come up to speed, like, enough. Like, Vue 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. Right? Like, it Yeah.

Valentino Stoll [00:39:14]:
It removes them from their, like, typical flow. And it's like That's true.

 Cameron Dutro  [00:39:19]:
Yeah.

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

 Cameron Dutro  [00:39:22]:
Right. Yeah.

Valentino Stoll [00:39:23]:
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 this JavaScript package as a gem instead. Right? Yeah. Yeah. Yeah. It honestly worked pretty well. It was cool. Yeah.

Valentino Stoll [00:39:45]:
It was it was cool. I mean, I wouldn't wanna, like, continue that now, but, like, I feel like just that idea of, you know, catering to the audience and just keeping things, like, in their their realm, like, that Yeah. 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, like 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.

Valentino Stoll [00:40:32]:
Right? Like,

 Cameron Dutro  [00:40:33]:
I I

Valentino Stoll [00:40:34]:
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 Dutro  [00:40:46]:
Yeah. No. That's a that's a super good point. I I just saw somebody on my side 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:59]:
Well and

Valentino Stoll [00:41:00]:
a lot of that

Charles Max Wood [00:41:01]:
stuff is designed to kind of ergonomically, I guess, or developer experience align. And so your thought processes can follow a common pattern.

 Cameron Dutro  [00:41:14]:
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. Like, in React, you pretty much have no choice.

 Cameron Dutro  [00:41:36]:
You have to use components everywhere. But in Rails, right, you can use a view component in the middle of a partial. You can render a partial from a view component. Right? 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 wage. 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.

 Cameron Dutro  [00:41:59]:
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. 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.

 Cameron Dutro  [00:42:35]:
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. 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.

 Cameron Dutro  [00:43:18]:
They put, like, I'm a React developer on the resume. Right? And 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.

 Cameron Dutro  [00:43:40]:
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? But it this is coming up more and more now where people even a good 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're just 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.

Valentino Stoll [00:44:17]:
So anyway We fall victim to that in, in rails and Ruby too. Right? Like, you know, but,

Charles Max Wood [00:44:24]:
but employers, employers fall victim to it too. Right? 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 I'm speaking the language that they're putting out into the world. And anyway

 Cameron Dutro  [00:44:43]:
No. That's

Valentino Stoll [00:44:44]:
A lot of times

 Cameron Dutro  [00:44:45]:
Yeah.

Charles Max Wood [00:44:45]:
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 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 Dutro  [00:45:09]:
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.

 Cameron Dutro  [00:45:34]:
So No. I don't know what Some parts of

Charles Max Wood [00:45:39]:
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:49]:
It did make me think about, a topic. I'm I'm really interested to find out what you think of, Cameron. Oh,

Charles Max Wood [00:45:55]:
sure. Yeah.

Valentino Stoll [00:45:56]:
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 Dutro  [00:46:19]:
Yeah.

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

 Cameron Dutro  [00:46:26]:
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'd you'd get to this point where you're like, okay. I can render this component.

 Cameron Dutro  [00:46:54]:
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. 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 than a lot of JavaScript people do.

 Cameron Dutro  [00:47:26]:
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. 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. You 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 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 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 PubSub, like, automatically, and then your component updates based on that.

 Cameron Dutro  [00:48:22]:
So if you could say, like, in your component, like, subscribe to channel, whatever. 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 can be super, super cool.

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

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

 Cameron Dutro  [00:48:43]:
Oh, is that what okay. I actually have not looked at Stimulus reflex.

Valentino Stoll [00:48:48]:
I think I think so.

Charles Max Wood [00:48:49]:
That's generally the idea behind it. And then it it works exactly. So it uses cable ready behind the scenes. And then yeah. When when stuff gets updated, then anyway, I have to admit, I have not used it either, Nate Hopkins and, Eric Berry are their 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 to come on the show and just talk about all the, stimulus magic that he's doing because it's awesome. But yeah.

Charles Max Wood [00:49:28]:
So I'm pretty sure that that's how that works. It is exactly what you're talking about. And, but, but on the, on the other end, I mean, what you're talking about on the front end is, okay, I've got the data. Right? So now I have to set up my if I'm using stimulus, right, if if it's sending it back over via j 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 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:26]:
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 that they call it, but yeah. So then it would trickle through to everything that subscribed to

 Cameron Dutro  [00:50:42]:
Right.

Charles Max Wood [00:50:43]:
Those events. Right? That event stream. But signals works the other way where essentially it says, everything that's bound to this value When I update this value, it get updates, everything that and so it's, it's really slick. It's very fast. And, Yeah. So anyway, so there are a lot of options on the front end that kind of can tie into what we're talking about with this. Yeah. Here are the updates.

 Cameron Dutro  [00:51:12]:
That's the weird thing. Right? Right. That's super good to know. Cause I do think we kind of want a data binding story of some kind there. Right?

Charles Max Wood [00:51:21]:
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? And 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, 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.

Charles Max Wood [00:51:57]:
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. Somebody typed a chat message, You know, what have

 Cameron Dutro  [00:52:19]:
you. Right.

Charles Max Wood [00:52:20]:
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 Yeah. Fan out, and it does it through whatever JavaScript mechanism is the state of the art these days.

 Cameron Dutro  [00:52:42]:
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, Barnett and Needham and all that stuff just to show that what's what like, if if it just to make it for myself mostly to see if it's, like, possible. Right? And by the way, shout out to to evil Martians and, Irina Nazaroba has been putting together. She's revived the SF Ruby meetups.

 Cameron Dutro  [00:53:10]:
They're they're happening again, so that's cool. Didn't we have I'm trying to get that working. I think she's been on Oh, yes. Yeah.

Valentino Stoll [00:53:17]:
Yep. I don't know that we had Irina. We had

Charles Max Wood [00:53:21]:
we had somebody from the

Valentino Stoll [00:53:23]:
Victoria. Victoria. Oh,

Charles Max Wood [00:53:24]:
it's Victoria? Yep.

Valentino Stoll [00:53:25]:
Yeah. Yep.

 Cameron Dutro  [00:53:26]:
I think Vladimir Dovania was been on on as well.

Charles Max Wood [00:53:29]:
Yeah. He

 Cameron Dutro  [00:53:29]:
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 Pub Sub handle adding the item. That could be really cool.

Charles Max Wood [00:54:20]:
Yeah. So signals first showed up in Solid JS, And Yeah.

 Cameron Dutro  [00:54:25]:
I'm trying

Charles Max Wood [00:54:26]:
to remember the Yeah.

 Cameron Dutro  [00:54:26]:
And then, yeah, I 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? I feel like it's Alex something also. Oh, no. Ryan Carniato.

Charles Max Wood [00:54:41]:
Yeah. Ryan Carniato. And I talk 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:03]:
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 Because it'll be Because it'll be faster and, you know, more efficient and solve a whole bunch of these things. Right? Yeah. Totally. Anyway Yeah.

 Cameron Dutro  [00:55:28]:
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 a signal from the server. Mhmm. Yeah. Cool. But yeah. Well so, yeah, I think to to Valentina'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 I also before we I know we're getting close to an hour here.

 Cameron Dutro  [00:56:04]:
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. We can optimize it. We can add more memory if you want to, but I can't do that with browsers. So it'd be cool if we could, like, paint something on the screen faster than our JavaScript bundle load.

 Cameron Dutro  [00:56:30]:
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. 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 have client on my server. So, because we're already good at that, like, because Ruby, Rails are already good at that, we sort of already have service side rendering.

 Cameron Dutro  [00:56:59]:
So we're, like, almost already ahead of the curve in that regard. You know?

Valentino Stoll [00:57:03]:
Right. Cool. 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

Charles Max Wood [00:57:22]:
just have

Valentino Stoll [00:57:22]:
it, like, do that

 Cameron Dutro  [00:57:23]:
and run it.

Valentino Stoll [00:57:24]:
Like, that would be awesome.

 Cameron Dutro  [00:57:26]:
Oh, that would be super cool. Yeah. Like, give me give me a to do list component right now and just render it. Right.

Valentino Stoll [00:57:30]:
Exactly.

 Cameron Dutro  [00:57:31]:
Yeah. Right. That'd be super cool. Yeah. We should also try to work crypto in somehow. Right? Because that's Yeah.

Charles Max Wood [00:57:36]:
There we go.

Valentino Stoll [00:57:38]:
Every component can be bought as an NFT too. You know?

 Cameron Dutro  [00:57:41]:
There we go. There we go.

Charles Max Wood [00:57:43]:
Well, I I I really do like the idea if there was some way to, yeah, translate my, in the front end. Right. But without having to do the work, I don't want to write it twice. So I

 Cameron Dutro  [00:58:00]:
don't know. Yeah, exactly. Which is really what you have to do these days. Right? Yeah.

Charles Max Wood [00:58:05]:
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 want to look into that, 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. So

 Cameron Dutro  [00:58:39]:
Yeah. I mean, talking about other things we're 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.

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

 Cameron Dutro  [00:58:57]:
It does.

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

 Cameron Dutro  [00:59:03]:
Yep. So Totally. Totally.

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

 Cameron Dutro  [00:59:19]:
yeah. Yeah.

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

Valentino Stoll [00:59:26]:
Sure. Yeah. I've been following on a little bit on the the Twitter of, Ruby Kaigi. 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:47]:
I got a little, I bought the rabbit r one and it came in the mail. And I've been I've been using 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 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:32]:
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 going to throw out a couple of picks. One pick that I have, I always do a board game pick. So I'm going to pick, 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:04]:
And what you do is you deal out 4 cards to each player. And I guess an obvious 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:48]:
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 and 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. And so you play a time token and you say, these are both twos, or this is a white card or right.

Charles Max Wood [01:02:34]:
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's 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.

Charles Max Wood [01:03:07]:
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 number, right? So if you discard any of your fives, you lose because you can't win. 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 fricking hard.

Charles Max Wood [01:03:39]:
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? Cause 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. 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 onto 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 going to 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.

Charles Max Wood [01:04:32]:
It's it's so fun. So anyway, I'm gonna pick that. I went on way too long about that game. 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.

Charles Max Wood [01:05:07]:
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. 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.

Charles Max Wood [01:05:31]:
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. So, definitely check that out as well. And, yeah, those are my picks. Cameron, what are your picks?

 Cameron Dutro  [01:05:59]:
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, and 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 e and and couple of other people at Shopify been working on. 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, like Seattle RB, 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.

 Cameron Dutro  [01:06:48]:
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. And, he's got TypeScript types for it.

 Cameron Dutro  [01:07:05]:
I think mostly for Opal because Opal's 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. It does all the parsing and everything in the browser now via prism.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?

Valentino Stoll [01:07:46]:
Mhmm.

 Cameron Dutro  [01:07:47]:
And 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 of the first 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. I got to talk to, Amir Rajan who does Dragon Ruby.

 Cameron Dutro  [01:08:27]:
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. That was super interesting too.

 Cameron Dutro  [01:08:54]:
So, yeah, I think that that summed it up.

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

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

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

 Cameron Dutro  [01:09:33]:
Thank you.

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

 Cameron Dutro  [01:09:35]:
Yeah.

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

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

Charles Max Wood [01:09:37]:
Max.

 Cameron Dutro  [01:09:37]:
Yeah. Absolutely. Thanks, guys.