Transcript:

Hey there. So let's talk about project X. Maybe you've heard of it, maybe you haven't. So I had mentioned that that last big problem and its solution came out of a conversation with my buddy Mitch Mitch Jameson. He's the best layer of El programmer. You've never heard of. Um, best friend slash brother. Of mine. Um, he not actual brother, but pretty freaking close. Um, yeah, he's a smart guy and I sat down with him and we have some stuff out and after we figured out this, this problem, this big, uh, w I actually want to record an entire episode on him. Um, there are, but I'll, I'll just say this like, it's super important to have people that understand the work you do. And for me, there's not too many of them in real life. My family is not technical. Um, I have technical friends, but not a lot of them live in the area. So I have just a couple. And they're my friends who I see in person often, and they understand what I do because they do it too, or they do something adjacent to it. And it's super duper valuable to have people in your life who you can talk to about your work, you know? Um, in, in my case, my work slash passion and Mitch is largely that person. And I say that under, I want to say understand the work that you do, like, understand your app. Like if you don't have somebody who you talk to a lot. About code. Like if you do have somebody who, you know, I'm talking about, like you get to know each other's projects because you hash things out together and you end up kind of knowing actually a surprising amount about their projects. So I know a decent amount about the project he's working on in his job, the architecture decisions he makes, where they're at in the process, the things he sort of struggling with. And he understands live wire on a pretty deep level because every time I come across something. We sit down and he and I walk them through it and he'll close his eyes and try to wrap his head around it. And neither of us settle for not understanding something. So we, we pretty much never say, okay, unless we actually understand it. And we forced the other person to explain it to us, um, more simply or concretely. So anyway, great guy. Great to have him in my life. Thank you, Mitch. We're sitting down, we've conquered this big problem sort of, and I feel like I have a moment of clarity and I've kept that clarity. Um. On on that problem. And then afterwards I said, all right, now let's, uh, let's tell of all of Livewire. And I'm like, we're on a roll. Here's the last piece. So I did these rounds of little interviews or. Video calls with people to kind of check in and see the heavy Livewire users in the community and check in and see, Hey, how do you like it? You know, what have you, what issues have you come across? What things do you like, dislike? And one of the things that came up multiple times is, well, I don't, I love it, but, uh, you know, when I need simple JavaScript functionality, like honestly, like a lot of it's like drop-downs and noodles and stuff. I don't really know what to use. I use view components because, you know, they work with live wire, but they seem a little heavy handed. And you know, my recommendation has been, yeah, I mean, just right. Vanilla JS, but that kind of sucks. Like. It. It just does. Um, yeah. I guess I don't have to explain myself there. There, there needs to be some middle space between writing vanilla Java script by hand, which makes you feel like you're using jQuery or something and you know, loading all of the world of view in the virtual Dom and all this stuff, like having a view component and a whole build process and Laravel mix and the whole world that kind of draws you into it. What's in the middle. So stimulus is in the middle. Stimulus is a humble JavaScript framework. I think that's how they market it. Like humble JavaScript framework that for the HTML you already have or something like that, which is great. There's no virtual Dom. They don't destroy your Dom. They, they, um, they give a lot of power to you. And the idea is that you can use it with traditional server rendered apps and not have to buy into the whole thing. And I have to give away your entire front end. So it's pretty great and that, you know, in that way. So I've always agreed with the philosophy of stimulus, but stimulus itself is really painful to me. Like I think it's really gross. I don't like it. I don't like the way it looks. You add all these data attributes everywhere and you kind of create your own framework and then you have a JavaScript file that. Kind of maps to your, your controllers, as they call them, which are kind of like components. Um, and you end up doing a lot of native JavaScript in there. And I always feel like, I dunno, I feel like you're kind of reinventing the wheel. Um, from what I've seen from it, I haven't actually used in a production project, so I should say that we're in a real project even. But anyway, Adam way hasn't showed me around his stimulus. Uh. It's code. And I it, I was sorta hoping like, well, okay, add Adam's using it. He's probably using it pretty well. Um, maybe I'll change my mind and I don't think he did. Um, and I don't think it did for him either. It's like it's not a great experience. So what I realized is I just want, I love the view syntax if you couldn't tell based on the Lifewire, but I love the view syntax. V. A V everything, you know, the bind, like binding attributes and the model, you know, binding data. I love the concept of reactivity. I love the concept of changing data and your Dom updating. Um. Yeah. I love all the concepts that Vue has. I just don't want something like view has gotten so big, and like I said, it forces you to buy into it, or at least strongly encourages you slash hypnotizes you. So I want a tool that gives me data binding so I could have a piece of data called show modal, and then do a V bind. You know, on a class, a hidden class to toggle it, or V show, you know, to show or hide the modal. Um, that's what I want. But I realized like, I think that's all I want. I think I could get pretty far with just that. So what if, what if I made, what if I recreated view, but, uh, didn't use a virtual Dom, so we don't have to dig into that. But just. Basically so that it, it didn't, it doesn't hijack the Dom. It does kind of the same thing, but it would not hijack the Dom. We don't have to get into the innards of it. But what if I created view that had no component part like no class parts, you know, a view single file component where you have a template and then the body there. What if I just got rid of the script tag. What if I just got rid of it and all it was was template. And what if you could denote the template to note what's a component right in the HTML. So let's say there's a portion of your HTML that you want to turn into this pseudo view component that I'm about to create this, well, spoiler alert, it's called project X. This product X component, you would add an attribute called X data, which would act as sort of the data object for your view component or your project X component. And then you'd write in Jason right there. So if it was modal. A component, you would have a piece of data called show modal or something. Colin false decided to false. And then inside of that element, any element you could attach X bind to, which is the same as V bind, because you could ex bind class and bind classes. You could bind disabled, disabled attributes. You could a V model on inputs so that you could bind the value of a text element to something to a V texter or whatever. Um. So this syntax kinda hit me in the face. Like actually in this conversation, I'm sitting down with Mitch in a coffee shop and we're hashing out, you know, some ideas. And I'm like, well, what if, what if Livewire had its own kind of JavaScript portion that you could use like Java script template? And I'm like, Oh my gosh, that's going to be just so fricking nuts. And then it kinda hit me like, this is what I want. This is a perfect API. I won't create any API, I'll just use views API, you know, views like. Directives inside of the Dom, and that's it. And it'll be the lightest weight thing. You can add it to any project. You don't have to really worry about it. I want it to be small, simple, flexible. Um, you don't have to like deal with it. You don't have to. If you, if something else changes on the page, you don't have to reinitialize it. It'll just react to changes, you know, a flexible, humble framework. So the basically the API was clear to me right off the bat. I was like, it needs to be X data. That's what it needs to be. Um, and so I went and I wrote it and I wrote a proof of concept and I don't know, like a half a day. It's not hard because here's the secret. I already wrote project X. For Livewire, like I already wrote a front end framework that has view ASCA directives and data binding and class binding and all this stuff. So I already have most of the code. I didn't really use too much of the code, but I, I've already like struggled with all the problems, so I already know how to build it. And then over the next week, I dunno, maybe like three or four days, I wrote it more fully for myself and you know, had just tests and it's all ready to go. Somebody could put it in their project. I wrote a read me and I wanted it to be the anti Livewire. I want it to be small, simple. Uh, it doesn't cater to every need. It doesn't have a big marketing push behind it. I'm not gonna put it behind doors. I'm going to launch it out there for everyone. I'm not gonna, you know, design a logo. I'm not even going to name it. That was, those were the point I was getting hung up on the name and I was thinking, well, you know, before I actually share this thing, I gotta have a name. And I was like, you know what? I need to punt on the name. Even I'll call it project X. That's it. It's not going to be its name, but I got to get past this. So I did, I launched it with a, read me in that it ended up on a hacker news front page, like not too long after I put it out there. So it's, I don't know how to say it, like 500 stars and actually has a decent number of people using it right away. Jack McDade tweeted like already using it in production in the state of mic. Three docs. Dude's an animal. So anyway. It's been us fun side journey. Um, and it's secretly meant to solve this problem in Livewire and we'll see how it, how it emerges. If it's just a tool that you use with Livewire, if there's some deeper integration, I don't know, but there's potential for those things. But right now I have a tool that I can confidently recommend to people, um, you know, use the, like what, what about Java script and Livewire use project X? And I mean it, I really do. I think it's pretty darn good and it seems really new and untested. But it's basically been tested in Livewire for months and months and months, so I'm super confident that's project X.

Follow along for more info. Thanks for listening.