Episode Details

Using view with Livewire. So this is the part of the show where Larry comes out and sings a silly song. This is the part of the show my lyric on talk where I you know this for me was like a show-stopping moment. Like, you know, I was demoing some pretty cool stuff with Livewire getting you know, the audience seemed to be pretty engaged that I showed how you can pop into view component and instead of the model you can do while your model and you get the same data binding.

Then you just use a view component that you already have and that there was this moment like I expected Applause, but nobody applauded it was just silent and then I said something like pretty cool huh? And then a bunch of people started clapping and I mean, I think it was just one of those moments where everybody was like what the f like.

Wow. Did this even what like, how does that work? And it is pretty crazy that that that Prospect of like yeah live where all this is really cool. Yeah, but you know, I love you like I need view for you know, my little I don't know tag input elements or whatever you think you need view for and and this was a moment where I was like, whoa, I can use both.

Yeah, so I really wanted. Live where to work with UJS. I don't we haven't really talked about the whole strategy of how I got that to work. It's actually kind of a funny story. So maybe I'll give you the skinny of it, but basically view JS does Dom dipping right like few JS is a front-end framework that.

You know, your component is rendered. It renders the template. All right. So how does view work view takes your template turns it into basically render functions render function that spits out a virtual Dom which is a Json tree of elements and their attributes and their children. And then anytime something's updated.

It re-renders that little Json tree the virtual Dom. It takes a difference of the two dumbs. You know, the one that's like actually implemented and like shown on the screen and the new one that it just rendered out of the component takes a dip and then it patches so it updates on the screen and then your page updates and everybody's happy and all is well.

It's basically have UJS works. That's how most front-end Frameworks kind of work. So live. Where does the same thing kind of accept it gets the Dom from from the server instead of managing virtual Dom trees. It gets it in plain HTML does the Dom dipping and patching? So you have two things that are both trying to different patch the Dom they're trying to control the Dom they they have control over their own little domains.

So it's an issue at first I thought well. Livewire is just not going to work with UJS. It's just not in the cards for it. But this is one of those examples of me thinking like me learning pretty early on that. Okay, anything that I think is impossible or like way too hard to bother with that's not necessarily true.

Like don't trust that instinct give it time. The the solution might present itself. If you feel like it's mandatory. If you feel like it needs to happen just decide that it has to happen and then figure out how to do it. This is one of those things that you know, took me a long time at first. I thought no not possible.

Then I thought this is huge for the success of live where I like for people to use this in their apps. They're going to want to use View and if they can it's going to be huge for like, you know, just adoption in general. So I decided that you know, if they if it all possible this thing needs to happen.

I need to make it happen somehow. So I couldn't really I tried a bunch of things. You know, I like just I tried, you know, letting View kind of handle the Dom and then Live Wire after the fact and whatever and like reinitializing view after Livewire updated everything and all this stuff, but they're man, there's crazy things like when you initialize view inside of a so you have your div your div wit