Ayush Newatia is a Freelance Web Developer. They delve into the world of modern app development, Chuck and Ayush take us on a journey through the intricacies of utilizing Turbo Native and Hotwire in Rails applications. They share their insights on using native elements as the backbone of apps while incorporating web content, simplifying app development, and bridging the gap between web and native code with the help of Strata. With a focus on enhancing user experiences, they explore the benefits and challenges of native and hybrid apps, along with a deep dive into the features and requirements of Turbo Streams. Join them as they unravel the complexities and potential of modern web and app development in this thought-provoking episode.

Sponsors

Charles Max Wood [00:00:05]:
Hey, welcome back to another episode of the Ruby Rogues podcast. This week. I'm your host Charles Max Wood, and I am talking to Ayush Nuwatiya. Did I get anywhere close on your name?

Ayush Nwatiya [00:00:17]:
Close enough.

Charles Max Wood [00:00:20]:
Yeah. Coming to us all the way from London. And, yeah, I ran across, I use, I don't remember if we bumped into each other over something else or if I reached out about the rails and hot wire codex or something else, I've been getting into hot wire quite a bit. Most of what I've done is, stimulus, but I'm starting to pick up turbo. And I'm definitely interested in seeing what Strata can do for me. But yeah. So the codex, it looks like is is it a course or is it a book? It looks like it's a book.

Ayush Nwatiya [00:00:56]:
It's a book. Yeah. It's an ebook. It's a Yeah. It's a comprehensive ebook that I got it printed, just for for keepsake, and it's honestly more like a brick than a book.

Charles Max Wood [00:01:07]:
Oh, wow. It's that big,

Ayush Nwatiya [00:01:09]:
Yeah.

Charles Max Wood [00:01:10]:
Yeah. And it says it says written by human, not by AI, which why you did it. You did it in hard mode,

Ayush Nwatiya [00:01:18]:
Oh, yeah. I don't believe in shortcuts.

Charles Max Wood [00:01:22]:
Yeah. Well, sometimes the shortcuts help, but yeah. I've seen people that yeah. They do they do most or they have AI do, like, 99% of the work. And, yeah, they miss stuff or the AI gets stuff wrong that they don't catch or any number of other issues. Yeah. So you you got to write the book you wanted, I guess, is what I'm aiming at. So

Ayush Nwatiya [00:01:47]:
Yeah. Pretty much. Like, a lot of the stuff in the book I was actually learning while writing, and, I find that the best way to learn is to do it on what what you called hard mode because you tend to go you tend to go down dead ends, you go down other paths, and, you make mistakes and you learn from all those things. Right. You learn things you didn't expect to learn. And, for me, that's the right way to go about it because that gives you a lot more context than just asking an AI a question and getting an answer back that you can't actually be sure is accurate or not.

Charles Max Wood [00:02:26]:
Yeah. I like that too. The kind of the idea of learning as you go. And I, I wrote a book about finding a job. I feel like things have shifted some, so I need to rewrite it. But, it was the, the way that I found jobs for the first 15 years of my career. And, yeah, it's, it was interesting, like going back and seeing what was out there today and how that worked and stuff like that. And so, yeah, I, I feel that quite a bit, but yeah, it's, it's tough.

Charles Max Wood [00:02:58]:
Writing books, a ton of work.

Ayush Nwatiya [00:03:01]:
Yeah. It was, I mean, I thought it was going to be pretty hard, and it was way harder than I imagined it would be. It took about twice as long as I had anticipated it to take. Yeah. It was quite an undertaking. It's it's definitely the most challenging thing I've ever done in my professional career. And but so far, it's it's also been the most rewarding. So I took 8 months completely off client work, to to write it.

Charles Max Wood [00:03:33]:
Oh, wow.

Ayush Nwatiya [00:03:33]:
Because because I'm a freelancer. And I was trying to do it side by side with client work, and it just wasn't working for me because it's quite a writing is quite an intense mentally intense task. And after spending, like, 4 or 5 hours a day on client work, I just didn't have enough, in the tank to then put in some prop balls for writing. So I was like, hey. While I'm still excited about this idea, let me try and see it through. I'll take 3 or 4 months off. Surely, that'll be enough to write it. And 8 months later, I still hadn't finished it.

Ayush Nwatiya [00:04:11]:
So it was a bit of quite a big financial hit, but, in the long term, I think it's all been quite worth it because it's really helped my freelancing career as well.

Charles Max Wood [00:04:22]:
That's awesome. So, the book goes into all kinds of stuff. I'm assuming it also does turbo native?

Ayush Nwatiya [00:04:31]:
It does. Yeah. So it's, well, I mean, I I would say this, but I think it's the most comprehensive resource out there on rails and Hotwire because it covers all the bits. Like, it is primarily a book on how to build a Rails app, but where it it kinda does things that other courses and books don't is, it firstly does quite a lot from batch. So, like, I use very few gems, so, like, authentication, all that stuff is from scratch. And the other thing is it teaches me It teaches native apps as well. So it's not just build a real website. It's build a Rails website iOS app and Android app.

Charles Max Wood [00:05:13]:
Oh, wow. That's awesome. Yeah. We had Joe Mazzalotti on a while back to talk about turbo native and it looks really terrific as, as far as it goes. And, you know, I mean, I've talked to some people and they just want that native full on native experience where, you know, you load the data onto the phone, you know, so you're hitting APIs and then you're, you know, loading native, components and stuff like that. But, some apps. So the thing that I've been looking at is building like a media app for podcasts and videos and stuff like that. I guess you can have your media downloadable, you know, to the point where you can watch it on the phone on a more, I guess, native app.

Charles Max Wood [00:06:01]:
But for the most part, if people are going to stream it, I don't see what the difference is. Right?

Ayush Nwatiya [00:06:07]:
Yeah. Honestly, the I think there is a huge misunderstanding around the actual benefits of native apps. Like Right. For some use cases, they are the best tool for the job. But for a vast majority of use cases, a well executed hybrid app will do the job really well. Because, a lot of the arguments are usually, for native apps is things like, offline use and, and just the fidelity of the UI and things like that. But I used to be a native app developer, so I only switch to rails in 2020. Before that, I spent, 5 years, doing iOS and Android development.

Ayush Nwatiya [00:06:54]:
And, worked on a few apps for certain agency, and then I worked for a company called, Transferwise, now known as Wise. And our dirty little secret was that the apps are fully native, but they were useless offline. They were completely and utterly useless offline. Like, I can't comment on the state of the app now, obviously, because I left the company 5 years ago. But Right. When I worked there, every screen made like, a minimum of half a dozen API calls, and then rendered native views based on those API calls. Yeah. You got any screen, you will see a loading spinner.

Ayush Nwatiya [00:07:34]:
It's not gonna load instantly. There is no offline persistence or anything like that. So if you are gonna add all those things in the native app, in my opinion, the level of complexity is about the same as doing it in, like, a web context now. Because with things like service workers, you can make your, web app and

Charles Max Wood [00:07:58]:
Right.

Ayush Nwatiya [00:07:58]:
A, hybrid app work offline just using web technology. And I think the challenges and complexities of doing it that way are very similar to the challenges and complexities of doing it, the native way. Now there are great arguments for using native apps. And, if you're gonna have, like, tight integration with stuff like GPS and all that kind of thing, and you need, like, a really high fidelity UI, which is not properly serviced by web technology, like, my favorite example to reach for is Uber. If you are building Uber, which doesn't really need a web app, but it needs top notch native apps because, like, there is no use for a new website, but there like, it's it's pretty much exclusively gonna be used through mobile just because of the nature of the app.

Charles Max Wood [00:08:48]:
Right.

Ayush Nwatiya [00:08:49]:
That is when you go fully native because your entire business depends on the mobile app. And you need the best possible experience on it. But if you build like a a a crowd app, which I think, like, I mean, people would like to admit it, but 80 or 90% of web apps are just crowd apps. Then, Yeah. That's true. Yeah. Then a a well executed hybrid app using something like the turbo native or similar philosophy will do absolutely fine. Mhmm.

Charles Max Wood [00:09:21]:
Yeah. That makes sense. That makes a lot of sense. I kinda wanna dive into more of the Hotwire stuff here. So the codecs, you actually build out an

Ayush Nwatiya [00:09:31]:
app. Yeah. That's right.

Charles Max Wood [00:09:34]:
So like you said, it's it's almost more here's how to build an app with rails, I guess.

Ayush Nwatiya [00:09:41]:
Yeah. It is pretty much that. Like, the the fact that it teaches native apps and the fact that Hotwire is, a core part are all just kinda add ons to it. The core proposition is here are all the the tools and techniques you need to build, like, modern Rails applications. Because my, vision for it was to be the next step after the Rails tutorial by Michael Hartle. So because I that's how I learned Rails, and I think it's a rite of passage pretty much for every rails developer to to work through that book. But, after I finished that book, I didn't know where to go next because it teaches you the basics and it does that really, really well. But you need a next step.

Ayush Nwatiya [00:10:31]:
Right? Like, I didn't really know where to go from there. And, I was learning quite a lot when I just starting with my freelancing career and stuff like that. So I thought I'd put my, slightly unique career trajectory of having specialized in mobile apps and then having switched to web, to to some use and write a book on how to build modern Rails applications, and as a unique selling point, throw in the native side of things.

Charles Max Wood [00:11:05]:
Right. So, yeah. So I guess, I guess one of the other, cases that I know some people have to make is why then use hotwire stimulus and friends instead of something like, React or Vue or Angular or one of these other heavier duty front end systems?

Ayush Nwatiya [00:11:31]:
It's I'm not the best person to compare and contrast because I've never used React. So my pitch for it would be, React and stuff have a very different philosophy. They kinda take over your apps front end. You don't really write HTML and CSS. You write React code. And It's true. I don't really see the point of building modern web applications that way, in, like, with an all in kind of approach. Mhmm.

Ayush Nwatiya [00:12:08]:
Because you just like, the web platform gives you so much out of the box, and it just feels like React as a philosophy has said, you know, we're gonna take everything that the web platform gives you, throw it out the window, and then build it back but worse. So so that's just not a philosophy that I kind of buy into. I like writing HTML and CSS and I like enhancing that with JavaScript. I believe that HTML is a declarative UI programming language, which I know it's a statement that could start fights on the Internet. But that that's my stall. And the reason, like, the Hotwire approach kind of fits my brain so well is that philosophically it's exactly the same as it was building websites like 15 years ago when it was all jQuery and jQuery UI when you still wrote HTML and CSS, but you had, this crappy procedural JavaScript code on top of that, kinda doing all the dynamic stuff. So we moved away from that, and we have, excuse me, much better way to kind of structure JavaScript now. So we still retain the philosophy of you build your core UI in HTML and CSS and then you enhance it with JavaScript.

Ayush Nwatiya [00:13:36]:
With Hotwire, with, turbo especially, you can get so far without writing any custom Right. JavaScript at all. Just data attributes on HTML take you so far, because, turbo drive in itself is, just a huge performance boost because you're not doing full page reloads, you're only reloading, the body element. And now with turbo 8, you also get, like, prefetching. So when the user hovers over a link, it'll prefetch and cache the the the response. So when you click the link, it's almost instantaneous, the transition, and that's like without writing any JavaScript yourself at all. And then you throw in turbo frames into the mix, which kinda lets you, break the page down into smaller chunks and then update those chunks independently of the rest of the page. Again, without writing any custom JavaScript at all, you just get so so far Mhmm.

Ayush Nwatiya [00:14:43]:
With so so little. And let's say you have certain parts of your page where it's really, really interactive and you really need to build out something complex, then you would probably just throw in a JavaScript framework for that little piece. So like, let's say you're building like a car configurator, which is a really complex piece of work. Right? Because it's it's lots of logic, lots of moving parts going about. So for that little island on the page, you'd probably throw in a framework. Like, I couldn't tell you whether I'd pick React or Vue or whatever because, I'm I I haven't used them, so I couldn't tell you what I would use. I'd need to research it. But you would choose a framework and throw it in for that tiny island in the page.

Ayush Nwatiya [00:15:28]:
But the majority of your website would still just be using HTML and CSS, just the way I think the web platform was designed to be used.

Charles Max Wood [00:15:38]:
Right.

Ayush Nwatiya [00:15:39]:
That's just my 2¢ of the whole thing. I think we've gone down this rabbit hole of complexity that we just need to go back from a little bit.

Charles Max Wood [00:15:49]:
Yeah. I'm just gonna add a couple of things because I've done some React. And what I found is, yeah. I mean, you, you talked about the complexity and you've talked about, how it kind of takes over your page or takes over, you know, whatever you put it into. One thing that I found is that, so typically when I see people building a react application, what they're doing is they are essentially working off of something like, Prisma or, you know, some back end API system that just delivers an API, and then they build everything else on React. And that makes sense from the standpoint of, right, you're only learning one system, and so then you're building it out. I found the whole process of putting together React components just to be really, really clunky. And you know, there are things I like about the idea of JSX, where you're putting your effectively from the rails standpoint, you're putting your, view controller and model in one file.

Charles Max Wood [00:17:01]:
But what I found is that people tend to still complicate that way more than it needs to be. And then the other issue is is that, yeah, like you said, you're not really working in the web medium anymore. You're working in the React medium. And what I've gotten to love about Ruby and Rails and Hotwire is that I just add stuff in where I need it. I kind of enhance it where it makes sense and then, you know, just kind of pull in the pieces where they they tend to work well, and then I get to work in the web medium. So

Ayush Nwatiya [00:17:38]:
Exactly. Something that I kinda learned back when, I was a native app developer is that, if you fight against the platform you're working with, it's never gonna go well. So, especially, like, on iOS, which I specialized in, towards the back end of my stint as a mobile developer because Android was just too fiddly and I like can't be bothered with this anymore. On iOS, there was a proliferation of, really complicated patterns. Like, you know how tech goes. Right? Things come in and out of fashion. So Yep. There were it was just becoming fashionable to use these really complicated patterns like there's one called VIPER, which I load with an unbridled fashion.

Ayush Nwatiya [00:18:25]:
And all those things, they were they they fought against what the iOS platform gave you. So, like, the iOS runtime has a lot of similar philosophies to Ruby, like, in terms of, things like, meta programming and quote, unquote magic provided by meta programming. And all these patterns came in and said that, oh, no. We're gonna fight against a platform that gives you all these things and rebuild all of these ourselves, by with these patterns and things like that. And it it did my head in because, it just made simple code so much more complex. And I've kind of taken that learning into web development and said that if I'm if I ever find myself fighting against the browser, I'm probably not doing something right. I need to rethink the entire approach. And that's kinda where I am with the whole reacting.

Ayush Nwatiya [00:19:19]:
I just feel that it fights the platform instead of working with it.

Charles Max Wood [00:19:24]:
Yeah. That tension is definitely there. I I agree with you. So let's let's dive into what Rails and Hotwire give you here. This is I'm assuming that's why most people who are listening are listening. By the way, we have like 60 people on Twitter right now. I never say x because I feel dumb saying x. So, Yeah.

Ayush Nwatiya [00:19:46]:
I still call it Twitter as well.

Charles Max Wood [00:19:48]:
So anyway, and everybody knows what I mean when I say Twitter. So anyway, so in essence, I think the thing we've talked about the most is stimulus, right, on this show, just because I think it's kind of the, I don't know if it's necessarily the easiest to understand, but it's usually what we're reaching for when we're trying to have some kind of custom, thing on our web page. Right?

Ayush Nwatiya [00:20:19]:
Yeah. Exactly. Stimulus is is the thing for which you'll actually write JavaScript code yourself. Because turbo is more just something you drop in and then you kinda call using data attributes in HTML, unless you wanna customize something. So, yes, stimulus is where you actually write JavaScript.

Charles Max Wood [00:20:39]:
Right. So I was gonna say, let's let's talk about turbo here for a minute. So do you wanna just give people an idea of what turbo is and how it works?

Ayush Nwatiya [00:20:48]:
Yeah. Sure. So, turbo is actually made up of 3 parts itself, turbo drive, turbo frames, and turbo streams. So turbo drive is like a natural successor to the library, turbo links, which if anyone has, worked with Rails for a number of years would be familiar with. So it kinda builds on a concept called pjaxx, which was, I think pioneered by GitHub way back when. So the the core of turbo drive is that when you click a link, instead of, like, letting the browser do what it do it does, which is, goes and gets the response, throws away the entire existing document, and then renders the response that it got from the server. Turbo drive will intercept that, that link click, and it'll make a fetch request to, to the part, get the response, and then just swap out the body element on the existing document, for the one that it got from the response and it'll merge the head. So you still have your your documents still stays intact.

Ayush Nwatiya [00:22:06]:
So if you wanna store some state on it, you can. And it also helps, with performance because, you're not, like, throwing away the entire page and then downloading CSS and stuff again. Although, I mean, that problem is a lot less obvious now with caching and HTTP 2, but it's still it's still there. And visually, it does, make a difference when the entire page isn't thrown away. And I think the biggest difference between turbo drive and the predecessor, turbo links, is that, turbo drive works with forms as well. So TurboLinks is exclusively for link clicks, but, for, Turbo Drive, it does the exact same thing for form submissions as well.

Charles Max Wood [00:22:49]:
Right.

Ayush Nwatiya [00:22:50]:
And, the one thing that, when I've found myself, in discussions with, people who only ever use React is, they say, but, oh, well, what if you want a persistent element on the page? You can't do that with this approach because it's still a multi page app. And turbo actually has a an attribute called data turbo permanent. So if you put that on an element, that particular element will be persisted across, page loads. So, like so let's say you you had, like, an audio player or something that was playing sound, but you wanted the user to be able to browse your website while that was still playing. You just set this attribute on that element, and, it would just be retained. It would it would still be there across all those multiple page loads. So you still have, like, a multi page architecture, but you have the behavior of a single page application. So Right.

Ayush Nwatiya [00:23:46]:
I think that's a great, great approach to kinda just simplify, your architecture. So Yeah. That makes sense. Yeah. So that's like turbo drive. Turbo frames kind of takes a similar concept but localizes it to, like, smaller parts of the page. So let's say you have a page with a lot of content and then you have a table frame on one small part of the page. So that table frame is basically just a table dash frame HTML tag, which is, implemented as a custom element.

Ayush Nwatiya [00:24:19]:
And then any, link clicks or form submissions in that table frame will expect a corresponding turbo frame, so the ID of the of the frame that the call is made from. It would expect an ID, a turbo frame with that same ID in the response. And then instead of replacing the entire body element, it would just replace the contents of that one frame. So you can make very, like, you can decompose your entire page into smaller parts using terva frames and then update just those parts. So, that's just taking the whole turbo drive concept and, making it a bit more powerful. And just these two things, I think, takes you so unbelievably far without writing any custom JavaScript.

Charles Max Wood [00:25:12]:
Right. Can I ask a couple of questions here on this? Because, well, for 1, so turbo you said turbo drive and I guess, turbo frames as well, work on both link clicks and form submissions.

Ayush Nwatiya [00:25:27]:
Yes.

Charles Max Wood [00:25:28]:
So, I'm looking at the turbo page. So for example, it has like an edit this message link. So if you click that link, it would just replace the contents of that frame with, I'm assuming your rails just renders a partial with no layout and it just drops it in there.

Ayush Nwatiya [00:25:46]:
Yes. Exactly. So you can either, yeah, just render the partial with no layout, which, would be the the more performant thing to do. And I think, I think there is a helper in the turbo rails gem that, does set the layout to false if it's a turbo frame request, but I could be wrong there. Okay. But, you you don't have to do that because all that turbo really wants in the response is a turbo frame with the with the matching ID. So you can have a full HTML document that you send back to your server, But turbo will only remove the corresponding turbo frame and then replace that. So your server can

Charles Max Wood [00:26:31]:
be your ID. Right?

Ayush Nwatiya [00:26:33]:
Yeah. You just gotta get the ID or you can send whatever back from the server as long as it has a terrible frame with the ID.

Charles Max Wood [00:26:39]:
Okay. That makes sense. So one other thing, and we might dive into turbo streams here a little bit with it. But, and I have to admit, like like I said, I've done, I've done a bunch with stimulus. I freaking love it. It feels so easy to follow along with when I'm doing stuff. But yeah, Turbo's kind of new to me. But I'm looking at this and I'm going, this seems like I think I've done some of this stuff with stimulus, not realizing that Turbo did it for me.

Charles Max Wood [00:27:09]:
So one other thing that I have a question about, and this is something I ran into last week. So, I've kind of been looking for work lately. The contract I was working just slowed way, way, way, way, way down. And so, I applied to this other it was kind of a contract, and they sent me basically, an I'm rambling. I'm talking way too long about this. Anyway, they told me to build them a sample app. And I spent, I think, 3 hours debugging Rails, sending a turbo stream request back when I submitted a form and then not actually loading the page. Right.

Charles Max Wood [00:27:49]:
When, when, when it got a response, like I could see in the rail server that it was hitting that backend end point and that it was doing the work to, you know, render the other page, but it was right. It wasn't rendering the page. And so I'm curious if, is there something fundamental with like, just I, maybe I had the wrong ID on something or didn't understand something fundamental about how Rails works with turbo to manage forms that I did wrong. Because eventually I just found I found the key word. I can't remember which one it is, but the key word is just turn it off. I think it was remote false or something.

Ayush Nwatiya [00:28:32]:
Oh, okay. Yeah. So were you sending a turbo stream back from the server, or were you sending us a full page?

Charles Max Wood [00:28:41]:
I don't remember. It was requesting a turbo stream. It was showing up in the log as turbo stream.

Ayush Nwatiya [00:28:48]:
Okay.

Charles Max Wood [00:28:48]:
I don't remember if what it was sending back.

Ayush Nwatiya [00:28:52]:
Because, so Turbo has a requirement that, on a form submission, you either render a turbo stream, so it has to have a MIME type of turbo stream or I don't know

Charles Max Wood [00:29:05]:
if that's what I was

Ayush Nwatiya [00:29:05]:
thinking wrong. Or you have to redirect. You cannot you cannot render HTML on a singleton.

Charles Max Wood [00:29:13]:
Okay. So that that's a feature of Turbo Streams.

Ayush Nwatiya [00:29:17]:
It's a it's a requirement of Turbo. So if you look in the Turbo doc somewhere, there is an explanation for it. I can't remember. It's something to do with, clicking back. I can't remember the exact explanation. It's in it's in the docs, but, yeah, you have to either render a turbo screen or redirect on a form of permission. That's a requirement of Turbo Drive.

Charles Max Wood [00:29:37]:
Okay. So what is a TurboStream then?

Ayush Nwatiya [00:29:40]:
So TurboStream, is also a custom element. So just turbo dash stream. And, it

Charles Max Wood [00:29:49]:
Okay. Hang on. I'm out for a second. So when you're saying I needed to render return to turbo stream, I was still returning HTML. I was just it needed to be in a turbo stream element?

Ayush Nwatiya [00:29:59]:
It needed to be in a turbo stream element. I needed to have a MIME type of, whatever the thing is, vnd turbo stream, whatever it is, the actual Okay. Thing. Yeah. Okay. Yes. A a turbo stream has to be in a turbo stream tag. That's what makes it a a turbo stream.

Ayush Nwatiya [00:30:16]:
And that kinda gives you, what I what I describe in my book as a scalpel to make fine grained adjustments to your page. So, thermo drive and thermo frames both have quite like general approaches to making, updates. So you like either change the entire page or a whole portion of the page. So let's say you wanna target one tiny thing like a counter or something somewhere, and you wanna change just that. So you would render a turbo stream with, a replace action. And then in the content of the turbo stream tag, you'd put the new content, and then Turbo would, would use the target attribute of, the Turbo Stream tag to find the element you wanted to change. And then the action you define is replace. It'll replace the targeted element with, the contents of the turbo stream tag.

Ayush Nwatiya [00:31:13]:
Now there are, I think, got 7 or 8 crowd actions that, turbo streams give you out of the box. I think, like, append and replace and update. I can't remember all of them. It's in the docs. So those those, kinda those are the updates you can make using turbo streams to very specific elements that you target using, either an ID or a CSS selector. So you can make, like, really targeted adjustments, to your page. But it's quite easy to let things get out of hand with the worst dreams because if you find yourself making quite a few updates, you're probably doing something wrong. It's really stuff that's really targeted, really fine grained, really one off that you kinda wanna be making with, turbo streams.

Ayush Nwatiya [00:32:05]:
Because especially now with turbo 8, so I'm gonna segue into turbo 8 a little bit because everything we've spoken about so far has been in turbo in some form or the other since day 1, which was turbo. Right. Turbo came out with the version 7, to match rails' version. So that's a bit counterintuitive, but, I digress. A turbo 8 has this new feature called, page refreshes using morphing. So a common pattern in, in rails is you kinda make a change to an entity and then redirect, back to where the user was. So let's say the user is on forward slash posts and you have an index of posts with, like, delete buttons. And, the user clicks delete, and then the controller action will redirect the user back to posts where they already were.

Ayush Nwatiya [00:33:00]:
But, obviously, what they'll see is that one post that they deleted, it it should now be missing because it's been deleted. That's like it's a very small change on the page. So in the past, you would probably render a turbo stream that targets that particular post's entry. It'll probably be like an l I element or something, and it removes it from the DOM. Or you would do, like, a full page load, which is obviously more expensive. And it it's a bit jarring for the user as well because, like, let's say it's a long list of posts and they scroll, like, halfway down and then they click delete and you do a full page load. It'll take you way back right back up to the page. Right? So Turbo 8 kinda attempted to solve this problem, without adding any back end complexity because if you use a Turbo frame, you're adding more logic on the back end.

Charles Max Wood [00:33:55]:
Right.

Ayush Nwatiya [00:33:56]:
So it uses a library called ideomorph, and it uses that to just morph the new page into the old page. So by that, what I mean is it it kinda makes a diff of the 2 DOMs and it only makes updates for the things that have changed.

Charles Max Wood [00:34:15]:
Right.

Ayush Nwatiya [00:34:15]:
So you can opt into this on a page by page basis with a meta tag. So now if let's take the same use case and you've opted into morphing page refreshes using the meta tag. You do the exact same thing on the server and the and the destroy action. You delete the post and you redirect back to the to the post index. But, on and and on the server, obviously, you render the entire post index. But now what turbo will do is because you've opted into morphing, is that it will diff the current dom with the dom it gets from the server and then just morph the 2. So as a user, your scroll position will be retained and all you'll see is that that one post that you deleted has been removed. So after this, new addition, the the use cases for turbo streams, I think, just drops down significantly.

Ayush Nwatiya [00:35:13]:
And you only really wanna be using it very sparingly when there is no other option, because it's the kind of thing, it's the kind of thing that I think you'd refer to as a sharp knife in rails. I know that's a it's a phrase that's used quite a lot with both Ruby and rails. And, you wanna be using them when the time is right and not just across the board because it's quite easy to make a mess.

Charles Max Wood [00:35:39]:
Right. That makes sense. Yeah. I was at Rails World last year when David, I don't know why I was calling David instead of DHH, but, when David was showing us, turbo 8 with that feature where, I think what he did was he had like a Kanban board. And Yes. And so he, you know, he dropped in a new column and then removed it. And he showed the old behavior where when you would do that, it would, yeah, it would jump to the top. And then afterward, he said, no, it doesn't do that, basically.

Charles Max Wood [00:36:11]:
So

Ayush Nwatiya [00:36:12]:
Yeah. I think, I think that was from Jorge's talk, actually. The he's the guy who I think spearheaded the whole morphing effort. And I I think that was the the use case for which it was developed and then extracted into the was I think that Kanban style interface in, Basecamp, and I think probably HeyCalendar as well. So Yeah. I mean, it might have been HeyCalendar actually. But, yeah, it was it was, that's the reason for which it was, developed.

Charles Max Wood [00:36:43]:
So Turbolinks is or yeah. Not Turbolinks. Turbo, Turbonative is a wrapper around your web application.

Ayush Nwatiya [00:36:53]:
Essentially, yes. So okay, let me zoom out a bit and explain exactly how the one that works. So there are a few approaches to hybrid apps because hybrid basically means, you're mixing web technology with native technology and using both together. That's where the high the term hybrid comes from.

Charles Max Wood [00:37:16]:
Well, a lot of apps do that, though. I we we had an iOS show on this network for a long, long, long time. Went on hiatus in November of 2019, but, that was one of the tricks. If you had some UI that wasn't how do I put it? It wasn't exactly what Apple gives you in their UI kit, then, yeah, a lot of people would pull in web technology and just seamlessly lay it in there to get what they wanted. So this isn't a new idea by any means.

Ayush Nwatiya [00:37:51]:
It's not a new idea. I think what the native does is just standardizes standardizes it a little bit. So I actually gave a talk on this, at a couple of conferences last year called, native apps are dead, long live native apps. Because, it's I'm honestly astonished that the turbo native approach isn't more widely used, because what it does is it builds the backbone of your app natively. So all your the navigation and stuff like that, let's let's say you have a tab bar, which most apps do, those are all built natively. You're not gonna get you're not gonna get away from having to write Swift or Kotlin. You're gonna have to write some native code. You're gonna have to have an x code project and an Android studio project.

Ayush Nwatiya [00:38:44]:
But, what turbo native does is that instead of, like, rendering, instead of you recreating each view in native code, within that kind of backbone, that of the native elements, it renders web content. So you have your navigation bar at the top, you have your tab bar at the bottom, but in the middle where your content is, it's just a web view with HTML in it. And that I think is really powerful because stuff that's kinda just, users expect out of a platform is just there. Like, on iOS, when you kinda go forward through pages, you can just swipe from left to right to go back. Stuff like that just works out of the box. Ios just gives you that kind of stuff out of the box. And since you're you're working again, you're working with the platform, you get all that stuff for free. So Terronetive just standardizes that kind of architecture.

Ayush Nwatiya [00:39:47]:
So it, when you start up a turbo native app, it will, install itself, it's it's the turbo native part of the library will install itself as an adapter on turbo itself, which is the web part of things.

Charles Max Wood [00:40:03]:
Okay.

Ayush Nwatiya [00:40:03]:
And, it kinda hooks into that whole mechanism to, kind of trigger native code. So, like, let's say when you tap a link in a Turbo Native app, instead of, just making a fetch request and replacing the current body, Turbo Native will, now get the response, create another screen, like a view controller on iOS or a fragment on Android, and it will slide it onto the screen from right to left. So that's, like, the one eight of the library does that for you. So that's kinda where it comes in. It's just a, kinda like adapter to help you, build apps which render web content within this native frame, which I sometimes refer to as a custom web browser. So you're kind of just running your web app within a custom web browser that you've built yourself using, native app technologies.

Charles Max Wood [00:41:04]:
Gotcha. So I guess a couple of other questions I have are, you know, just kind of the things that don't that aren't built into your application. So for example, what if you wanted in in app purchases or let's just talk about in app purchases for a minute.

Ayush Nwatiya [00:41:23]:
Right. So because you have a native project, your app is basically still an expert project or an Android studio project, and you are writing some swift code or Kotlin code. You have access to all the native APIs.

Charles Max Wood [00:41:39]:
Right.

Ayush Nwatiya [00:41:40]:
So you can just write native code to do to do that. So, like, in, like, in app purchases, for example, Apple would have APIs for that. Right. So you you just write swift code, and then you'd have some kind of way to communicate that to your web app. Either you're you're hitting an API or or something like that. Like, obviously, the exact architecture would depend on your use case. But because, like, the native side of things has not been, like, hidden away or abstracted away. You can do anything native that you want.

Charles Max Wood [00:42:13]:
I gotcha. So let's say that I have a button on my application, And when you tap the button on the web page, it takes you to the Stripe form. But on the on the native app, there's some way for me to trigger the native API that says, this is an in app purchase.

Ayush Nwatiya [00:42:32]:
So that's where Strata comes into the picture. So, both Ios and Android have native APIs that let you communicate to and from JavaScript. So you can for you from JavaScript you can, post messages, a quote unquote post messages that are received in native code. So you can, like, call, like, whatever the method signature is dot post and send some JSON. And then, a native a fully native, native method in swift or Kotlin will be called with that JSON message that you that that you sent from JavaScript. Mhmm. And to go the other way, you can evaluate JavaScript within a web user. From native code, you can, like, literally call, like, web view dot evaluate JavaScript, and pass in a javascript string, which will be executed in your web page.

Ayush Nwatiya [00:43:29]:
So Strata takes this pathway and gives you an abstraction layer to communicate, from web to native and vice versa. So it's built on top of stimulus. So it's basically, it gives you a concept of components. I think it's called a bridge component, which is, which is a subclass of a stimulus controller. And, it gives you, just some standard methods to send messages to native apps. So you would have a component. So you need to subclass bridge component and create a component for yourself on the web, and then create a counterpart component in your native app using native code.

Charles Max Wood [00:44:16]:
Okay.

Ayush Nwatiya [00:44:16]:
And then, the using Strata, the 2 would communicate with each other. Like, on a podcast, it's kinda hard to go into the details because it's all getting No.

Charles Max Wood [00:44:25]:
It's all good.

Ayush Nwatiya [00:44:25]:
But that's basically, the the gist of it is you have fully native components and then the same thing on the web, and then they communicate with each other, and that's how you can send messages from the web to native and back. So your exact use case, we can accomplish that with Strata.

Charles Max Wood [00:44:44]:
I gotcha. What about push notifications?

Ayush Nwatiya [00:44:49]:
So you would have to write, some native code for that. You need to, like, register your push notification token with your server and stuff like that. That's it. It is fully native to our queries. I wanted to write about that in my book, but, as I dug into it, we were going too far into fully native world, and I wanted to, stick to, like, just like web in the book. So it's the same kind of technique as you would use in a native app. You do it the same way, on the back end. Again, you just need to Google, like, how do I send Apple push notifications from a Rails app and just follow the instructions.

Ayush Nwatiya [00:45:32]:
And I think Rails 8 is actually gonna have a framework called action notifier, which,

Charles Max Wood [00:45:38]:
Right.

Ayush Nwatiya [00:45:39]:
Kinda helps you send push notification, I think, both on the web platform and on iOS and Android. So that should hopefully make life a lot easier.

Charles Max Wood [00:45:50]:
I I feel like I lucked out that the other guys didn't show up because now I can ask I got to ask all my dumb questions. So because because yeah. I mean, this is all stuff that I've wanted to do for a long time that I just haven't done. Yeah. I'm not sure that there's a whole lot more necessarily that I need to dive into. Rails uses a lot of the, at least, turbo by default. I don't know if it pulls in Strata for anything since it's a native bridge. But, yeah.

Charles Max Wood [00:46:24]:
So let's say that you were going to build, like, a complete ecosystem on your Rails app. Right? So you were gonna and the thing that I keep dreaming of is, kind of a Netflix for developers. Right? So it's, hey, you know, you've got all this content from all these series, shows, podcasts, whatever. Right? And so you can come in and you can get any content that we've either created or licensed. Right? And so, you know, building the rails app and then, you know, I I can totally see doing something with, say, turbo where, you know, it's like you click the play this video button. Right. And then it just, you know, replaces parts of the screen with relevant stuff or for reloads it. Right.

Charles Max Wood [00:47:08]:
Maybe it just does turbo drive and just, you know, replaces the body. However, I want to do that, you know, so I can see a lot of ways that I can make that do what I want. I'm pretty familiar with Stimulus, but I could build the native app. Right? And and just do turbo native and have it load up the video library. I guess one question I have is is, yeah, is there a way to do how would I do the offline mode if somebody wanted to watch one of those videos? Like, hey. Save this for later. Right? I'm getting on an airplane.

Ayush Nwatiya [00:47:43]:
Yeah. The best way to do it would be service workers because, you're kinda already in the web world. So, like, building out a full, like, native persistence architecture would be, just a bit much, I think.

Charles Max Wood [00:47:58]:
Right.

Ayush Nwatiya [00:47:59]:
Your service workers, that's how I'd do it.

Charles Max Wood [00:48:03]:
So you just have service workers go basically download the video and

Ayush Nwatiya [00:48:07]:
Yeah. I I can't comment on exactly how that would work because I have a I have a basic understanding of service workers. I don't know if I actually built anything with it myself. But, I'm, like, 99% sure that kind of use case is perfect for for service workers.

Charles Max Wood [00:48:26]:
Fair enough. I'm also curious. And I think, I think the answer to this is going to be, you're going to have to ask the turbo team. Because what I'd like the other thing I'd like to do is, expand it to other parts of the ecosystem that's out there. So, lately I've been looking at I have, like, 6 or 7 Fire TVs in my house. Right, Fire Stick TVs. And so I'd like to and you can load a web app in as your app. And so I'm wondering if turbo or turbo turbo native I'm assuming turbo native doesn't apply there, but I guess maybe it does because you can also run it as an Android app.

Charles Max Wood [00:49:07]:
You build it in Android Studio. So do you know much about that? Or

Ayush Nwatiya [00:49:13]:
no. I couldn't tell you off the top of my head. But if it if it kinda works as an Android app, maybe you could adapt it. I don't know the APIs well enough because, I mean, terminated is very much built, I think, with the assumption that's gonna be a mobile app. So if the APIs, the native apps, the native APIs are the same. Like, it's still using, like, an Android. We have an activity in a fragment and stuff. If still using those same APIs, then it probably would work.

Ayush Nwatiya [00:49:43]:
But if it's different, then then probably not.

Charles Max Wood [00:49:47]:
Okay. Is there anything else that I didn't ask about that you think people are gonna wanna know about?

Ayush Nwatiya [00:49:51]:
No. I think we've covered turbo quite well. We could just talk about stimulus if you want, but, if you've covered that before then.

Charles Max Wood [00:50:01]:
I think we have, and we're getting toward the end of our time anyway. We've already been talking for 53 minutes. So yeah. I'm also looking at bringing, David or not David. Nate Hopkins on to talk about some of the stuff that he just released. So other stuff. Let's talk about the the codex here for just another minute. So you talked about, you know, you basically took 8 months off to write it.

Charles Max Wood [00:50:29]:
If people want to buy it, they just go railsandhotwirecodex.com.

Ayush Nwatiya [00:50:35]:
That's right.

Charles Max Wood [00:50:36]:
And it's it's $99, but it'll write you through it'll walk you through writing the whole the whole mess.

Ayush Nwatiya [00:50:45]:
Yeah. So it teaches you all the rails constituent frameworks like active storage, action mailbox, action cable, everything. And it doesn't just teach you how to use them, it gives you an understanding of how they work. So what kinda really annoyed me, in in most tutorials, it'll say that, okay. You wanna get this working, write this code, and it it'll do what you want. And I'm like, yeah. Well, I don't understand. You haven't given me any understanding of that code.

Ayush Nwatiya [00:51:15]:
You just said write this. So I I wanted to make sure that every tiny bit of code that I teach in the book has an explanation of, what it does and why I choose that approach. And and if there are any alternative alternatives, what they are. So, like, when you read the book, you should have not only a really good understanding of, like, the entire real stack, how it works, and the different ways in which you can use it, But also, like certain alternatives that are not covered in the book are signposted. So like, I have a chapter on search which teaches, search using Postgres' native full text search.

Charles Max Wood [00:51:57]:
Right.

Ayush Nwatiya [00:51:57]:
And there's an entire discussion at the end of that chapter about, the different kinds of searches that Postgres offer offers, but that I didn't cover in the book. When you would use those kind of searches, and then it also has a discussion on, like, Mealy search and Elasticsearch and when you want to use those.

Charles Max Wood [00:52:14]:
Right.

Ayush Nwatiya [00:52:14]:
So, like, all the questions that I kinda come up with in my head when I'm trying to learn, I've tried to answer all those questions because, like, it's I always find it quite frustrating when people don't cover things from all angles in a tutorial. So I kinda wanted to, I know it's a cliche, but I wanted to write the book that I wish I had. So I've just tried to be as comprehensive as I could. I know that's kinda made the book quite large and and maybe not quite as easily accessible just because of the size. But I kinda add on the size side of being comprehensive over the side of being succinct.

Charles Max Wood [00:52:59]:
Alright. Well, I'm going to go ahead and pick push us into the the last part of our show, and that is picks. And then, we'll wrap up. I'll go ahead and go first and you can kind of get an idea of what's involved. So, picks are just shout outs about stuff that you like. I mean, that that's essentially it. So some people show up and they pick a bunch of tech stuff. Other people show up and pick other stuff.

Charles Max Wood [00:53:29]:
I'm gonna go ahead and throw out some pics of my own. So the first pick that I have, I always do a board game pick and I'm gonna pick a dice forge. So, it's, it's kind of an interesting take on deck building, except you're building dice instead of instead of building a deck or a hand. And so what you wind up doing is, every turn you get an option of either grabbing a die face or, you know, taking a card that gives you victory points and special abilities. And then, you and and you buy either one. So you you just spend gold or you spend sun or moon tokens to get them. And then you when you buy die faces, you pull the face off of your dice and put the new face on. And they're kinda like Legos that way.

Charles Max Wood [00:54:29]:
Very fun game. Played it last night with some friends of mine and, yeah, it has a board game geek weight of 1.97, which means it's fairly approachable for casual players. It went kind of fast too. I think we played it 45 minutes, maybe maybe a little longer than that, but pretty close. And we were teaching our friends how to play it. So, anyway, really enjoyed Dice Forge. And so, yeah, if you want kind of a different take on, yeah, on how that works, then that's awesome. I'm gonna post to the YouTube and, Facebook and stuff links to Board Game Geek and to Amazon where you can buy it.

Charles Max Wood [00:55:15]:
The Amazon link is gonna be, an affiliate link, just so you know. So you buy it there, I get a little piece of the action. It doesn't cost you anything extra. It's just anyway. And then other picks. So I am on the tail end of a book series. And, the book series, the let me look it up on my phone. So I've been listening to it, and it's I picked other books by Brent Weeks in the past.

Charles Max Wood [00:55:49]:
This one's called Beyond the Shadows. The book is it's the 3rd book in the series. I'm trying to remember the name of the book series itself. Title details. There we go. It's the Night Angel series. This is the 3rd book in the series. Anyway, I'm really enjoying it.

Charles Max Wood [00:56:12]:
It's about this, kid who basically becomes an assassin and there's magic and politics. And anyway, it's, it's been really, really good so far. So, I'm going to pick that the Night Angel series. The first book in the series, if you're interested, is called, The Way of Shadows. And it looks like there's a prequel that's 2 hours long too that I haven't read. So anyway, it's The Way of Shadows and then Shadows Edge. And then the last one is Beyond the Shadows. So, yeah, really, really enjoying that.

Charles Max Wood [00:56:52]:
Looks like there might be another, series that's a sequel to it because it says book 1, Kyler Chronicles, and Kyler's the main protagonist. So anyway, terrific book. Really enjoying that. And then of course, just a couple of shout outs about rails geniuses. I'm going to start inviting experts to come in and talk to us in May. If you sign up before May, it's going to be me and we're just going to chat about what you want to learn and who I can get on, to be experts, to show up to some of our calls and make sure that we're providing you kind of the value you want. I'm also going to let everyone know I'm still looking for, you know, freelance contract or a full time job if I have to. So that, you know, I I gotta pay the bills.

Charles Max Wood [00:57:41]:
And finally, I got this set up when? Monday? So if you go to rubyrogues.com/premium and you sign up, it's $9 a month. You get all the shows without the ads, and I'm planning on putting extra content in there as well. So, I was supporting the shows off of my contract income. And so I'm trying to find another way to do that too, and this seems like a good way. So, you know, if we have a 100 or so people sign up, then it should cover most of the costs of producing podcasts. So, anyway, that's that's everything I've got. Ayush, what are your picks?

Ayush Nwatiya [00:58:20]:
Alright. So I think I'm gonna start with a a music pick because if you're watching on the YouTubes and stuff, you can see a massive bookcase of CDs behind me because I am, still that rare breed that, buys CDs and exclusively listens to music on CDs rather than, streaming services. So, let's start at the band.

Charles Max Wood [00:58:43]:
Weird.

Ayush Nwatiya [00:58:46]:
Yeah. And in in my friend group, we we find people who don't buy CDs weird. So I'm, like, part of a it's definitely not a cult. It's not a cult. We never call it a cult.

Charles Max Wood [00:58:58]:
That's what I say about my board game group.

Ayush Nwatiya [00:59:03]:
So I'm gonna start with a, a band called Life Science who actually I'm actually wearing a Life Science T shirt right now.

Charles Max Wood [00:59:12]:
Oh, nice.

Ayush Nwatiya [00:59:15]:
So, yeah, they're a band I've been following for a couple years, and, they are just absolutely fantastic. And I'm constantly astonished that they are still playing in pubs to a 100 people rather than theaters to a few 1,000 because the level of the music is just unbelievable. It's just, they they struggle to get the support of the industry, so I wanna give them a shout out. So that's life science. Highly recommended to anyone who's into, like, rock music of any kind of description. I'm sure you'll like it. And I'll make a tech pick as well. So there's a rails dashboard library called Avvo, made by Adrian Maron, who also organized Adrian on

Charles Max Wood [01:00:03]:
the show

Ayush Nwatiya [01:00:04]:
before. Oh, have you? Yes. It's also he also We'll

Charles Max Wood [01:00:07]:
go hunt up that episode.

Ayush Nwatiya [01:00:10]:
Yeah. He's the nicest guy, and he also, runs a friendly dot RB conference in Bucharest. And, I got to use Avo for the first time on my current client project, where we were shopping around for a few different admin dashboards, and I was just I kinda just blew the others out of the water, to to be honest. Like, I I played around with some others, and this was just the docs were unbelievably good. The UI is really good out of the box. Pretty much any question I had, I could put into the doc search and I got an answer for it. Yeah. Highly recommended it.

Ayush Nwatiya [01:00:52]:
There is an open source free version, and if you need something more involved, there are, like, paid versions as well. And, yeah. Avoavo.avohq.io or something like that, I think is the URL. Yeah. Highly recommend it for admin dashboards because, yeah, I'm using it right now.

Charles Max Wood [01:01:12]:
Yeah. The URL that I have is avo.cool, but it redirects to avohq.io.

Ayush Nwatiya [01:01:19]:
Okay. Nice. That's a good URL.

Charles Max Wood [01:01:23]:
So, yeah, I'll I'll drop that in the comments. If you're on Twitch or YouTube or Facebook, you'll see it show up in the comments. Unfortunately, Twitter, which is where most people are watching this, doesn't do the comments. So, anyway, go find us on YouTube, and you can get you can get it on the recording of the livestream. And that's at youtube.com/topendevs. Cool deal. If people want to connect with you, Ayush, they have questions for you, anything like that, where do they find you?

Ayush Nwatiya [01:01:58]:
So best way is probably, email or Mastodon. So, my email is ayush@radioactivetoy.tech. That's my business website as well.

Charles Max Wood [01:02:12]:
That is a cool domain.

Ayush Nwatiya [01:02:14]:
Cheers. Yeah. That's my business website as well, radioactivetoy.tech. And I'm on Mastodon, at aayush@ruby.social. Those are probably the best ways. I do have Twitter, but I honestly don't use it a whole lot these days, so you may or may not get a response if you if you ping me on there. So email or master one is the best.

Charles Max Wood [01:02:37]:
Alright. Good deal. Well, we'll go ahead and wrap it up here. Thanks for coming. This was fun.

Ayush Nwatiya [01:02:42]:
Thanks for having me. Yeah. I'd love to chat about Bridgestone some other time as well. Yeah. Absolutely.

Charles Max Wood [01:02:47]:
Well, we'll get you on for sure.

Ayush Nwatiya [01:02:49]:
Sounds good. Thanks very much.

Charles Max Wood [01:02:51]:
Till next time, folks. Max out.