Hey everyone, welcome back to the Laravel Creator Series. With me today is Patricio from Portugal, who is the creator of Mingel.js, Boxpop sites, a live streamer, he's just big into the community. So Patricio, did I get all that right? And if I miss anything, let me know right now. - Hello Eric, hello everyone. So you got it all right? Yeah, so that's me. And I guess, I guess not, I can't add anything. You did just perfect, yeah. - Excellent, excellent, all right.
So to jump in first, the thing that you built that sort of, I heard sort of a lot of buzz about is Mingel.js. Can you sort of give me the highlights of what is Mingel.js? - Okay, so I'll start with the short version. (laughs) So Mingel.js is the opportunity that fills the gap to bring complex JavaScript components inside Livewire applications. So I do love Livewire and Alpine. Also I do love JavaScript.
But in the end of the day, the more, the nearest I am to the server, the more productive and quick and I don't know, I just feel moving faster, right? And that's my kind of thing, the one-man army or two people projects. So I can speak only for that, not for 500 people project through several teams and so on.
So yeah, I love Livewire and Alpine, but there's a point when it reaches some kind of complexity or maybe it didn't click all for me, but there are some, there is some scope, some extent where we can't just live on the server and having these small, how do you say them? The sprinkles of JavaScript, right? We have to go all in. So I didn't want to go inertia or SPA or any other thing I wanted to keep next to Livewire. So yeah, coming, I could come from other scenarios.
This all started with scoped slots in Vue, the Adam Wadden's advanced Vue components course back in the day, 2018 or something like so. So I started putting Vue with runtime compiler on Blade. So the JavaScript functions would be in JavaScript and server side would give the template for that JavaScript. But then Livewire started to make sense to me. I started using and I said, huh, let's bring them together, JavaScript and, I mean the heavy side of JavaScript and Livewire. So there we go.
- That's awesome. So you can actually use like React or Vue or sort of anything, any existing code. Like I'm trying to think of like an example off the top of my head, if I go and find a React component that does everything I want, I can just pull that in and it just works. - That's it, that's the promise. - That's awesome. - And it seems it's delivering, yeah.
- So like I was, I keep coming back to, cause you mentioned Adam, they have that project, I think it's Catalyst maybe, that's a lot of React components. So I could basically go and buy that and then just kind of hook it right in. Man, yeah, that's pretty sweet. You, for let's say, okay, a stack of blocks, like three sections on the website, right? And you wanna do Catalyst, so you just, you can for example, do three Livewire components, one for each section.
And there you go, each one is a React component and they blend in just fine and you have Livewire, Event Bus, React, Events, you have all that in it, yeah. That's it. - That's awesome, yes. Well, how's the sort of, how's the community been so far as far as like embracing this and trying it out and all that, are they, is it getting a, I guess, heavy usage so far or? - Well, for me, it's heavy because it's my first package I'm actively maintaining and out there in the world.
I'm going to the sheet sheet and going to say how many issues I've got because I don't know how much is heavy, but we have 13 issues and all fixed in a matter of, I don't know, few months. And yeah, people are using, they are finding some issues, we're solving them, people are solving them. So yeah, I'm feeling the other end of the community. I've been all, I don't know, over 10 years on the other end, like just consuming and producing, it's nice, it's very nice, creating is awesome, yeah.
- That is awesome, yes. So I guess what sort of, I guess what gave you the idea to even start this or be like, hey, this is something that people need? - Right. So I have like four main things I consider to communicate it, but my first, my favorite two are that when the UI gets to be so much complex, I could show you an example that I'll try to articulate by words, but let's say a very complex data table with which goes to three tables, it's an example I can remind.
So each row gets data from three rows, right? To assemble, to assemble, three rows, right, to assemble data in this table, in this HTML table, right? So I've done that in LiveWire and I've done that in JavaScript and my wiring, maybe my brain feels, it should go to JavaScript because it's so much intensive, but also I'm learning LiveWire still today.
So maybe I didn't do it the best way, but I find that when the things get so complex, I don't know, I'll try to think of a better example, maybe a text editor like Notion or something like very dense, right? I think there's not one tool for all jobs, right? And I think here JavaScript is better suited in very, very complex cases, but maybe it's only me. So this was my main motivation.
There's a point in time where from this DOM element down, I wanna just work it in different files, I love view with options API, that's my favorite. So I can just make separate files with template all in, not in, it just doesn't click for me the same way, doing Alpine in a bundle, right? It's in the template is in blade, right? But then you wanna make complex stuff. I don't feel it belongs in blade file.
So I bring it to a JavaScript file and that's, I would say that's what I draw the limit and I would want to go JavaScript more. So this is first and second one is the third party plugins out there, right? I have one just sitting and waiting. I have some tweets about it. Do you like whiteboards? - Whiteboards, is that like physical whiteboards that you write on or? - Okay, so a virtual one. - Virtual whiteboard that you write on or?
- So yeah, so for example, ExcaliDraw, do you know this app or middle or? - I do not. - You do not, okay. So it's basically where you sketch you, you get a rectangle and you type a word in there and you make a narrow and you draw some diagrams or some kind of stuff, but in a sense of a free hand. So not like a specific app for diagrams, but just whiteboarding like you would on the physical one, right?
So thanks to this, I can have this kind of component because I'm very visual and I wanted to make something like this, but I just don't want to tie it together and launch a package because it doesn't make sense for me. I want to make some special functions. So we could have like libraries and whiteboarding with pieces, what can I say? So like small components, pieces of an, so think Figma, but lightweight, a lightweight Figma, right? So we could have community plugins.
We would bring them all together. And because everything is on the database, a lot of our end point could stitch together a collection of components. And then you could do it in this whiteboard on your application, not somewhere else. - Oh, that's pretty sweet. Yes. Well, so when you were building this Mingle JS, what was the hardest part for you to figure out before you could publish it?
- Okay, so I guess it was hard, but then the solution was very, very easy, which was to keep it working with wire navigate. So the SPA mode in LiveWire, there was someone complaining about it and, huh, how am I going to fix this? Because joining JavaScript in Blade, I was doing that for a long time, just not in the Mingle way, right? Not inside the LiveWire component, getting all that stuff. So it actually ended up being really easy, but I didn't have the minimal clue on how to do that.
But in the end, it clicked that I could PR something into LiveWire, so I could listen to some event, but then I thought something. And it may seem like a Frankenstein if you go to the source code, because I'm booting up Alpine to then start the JavaScript component. And that's because if I adhere to the Alpine protocol, then I am good to go with LiveWire, right? So it's, in fact, it's an Alpine component that boots the JavaScript component.
- Nice. - So yeah, I would say that that was the most-- - That was the hardest, was that one of those you were just laying in bed one night and you're like, "Ah, this is simple. Now I understand what the problem is." Or did it just sort of hit you? - I actually don't remember. So it wasn't that Eureka moment, I'm sorry. - But those weren't the best, right? When you're fighting some sort of bug for a week and you're like, "I just can't figure this out."
And then all of a sudden, midnight, you're like, "Oh, this is all I had to do. What was I thinking?" - Right, we have so many of those. - Well, anything you wanna tell us about Mingo.js that maybe I've missed asking questions about or? - Well, I kind of built it, not wanting to make it... So I wanted to make it as a small connector, right? But how could I say? I would be willing to take it further if more people was using it as well.
But for example, I'm thinking, or let me materialize something. You have this component, right? Or this DOM node where typically would be the first live wire element then. And then inside it's wire ignored and X ignored. And inside there's a client side rendering with it all, right? So we can see the component like some folk, it's called like the flash of unstyled content and so on. So you see the page flickering on an initial render, it can happen.
So things like having a skeleton, like a loader, while it doesn't come the real thing and change it for the actual content. So mechanisms like this, or making like examples on how to use more fully on... So instead of sprinkling one component, how to mix and match several, right? I would want to go into these things. I just don't know if I should, maybe it will come with time. So I don't know if you can help me, deciding what should I just do it and that's it? Or should I just wait?
Because I don't have a clue on how to do that. On how to decide, I'm sorry. - Yeah, that's sort of the crux of open source, right? It's trying to make decisions that the community will like, but then also that you want to put in and... Sort of do it that way, I guess is the right... I'm not articulated by questions very well in my statement. But yeah, it's sort of like, you want to do a certain thing and you think this is the right way, but then the community might have a different opinion.
I guess as far as like you're concerned, like what's the best way to give you feedback and to kind of get in on these questions you might have that the community might want to be involved in. - Right. Yeah, I wouldn't know where to start. I would like to make it bigger than just dropping off one component. Like I am all in not making a tedious job. So everything that I could make to help people not having to do repetitive stuff.
So like assembling some systematic things for, I don't know for, you want to do an application layout which has a other sidebar and content, right? So let's do all these. How would you do it all in view or all in JavaScript, for example, or those sorts of things. But I also don't want to shape the package based on some active one voice, you know, that, oh, everyone wants this, but maybe not. Maybe it's just one person needs. - Yes, for sure.
- That's the difficult part, but I guess I'll, I'm welcoming any input on that. But for the time being, I'm just going organic, going as it, going with the flow. I'm using it for myself and that's it. In the end of the day, other people are also seeing value in that. So I'm happy with that as it is. - For sure, for sure. So you've been sort of tweeting about something else you've been working on that you're very excited about. What is that? - Okay, so you must be referring to PHP WASM?
- Yes. - I guess. Okay, other than Boxbot. - I think that's the one you said. I'm going to have a secret release. The last tweet I seen was you said next Tuesday, but this might've been actually two weeks ago. - Oh, right, right, right, right, yeah. Okay, so that's, for me, that's uber exciting. Maybe it's ahead of time or maybe it's just not there. Maybe it's just me seeing it because it will be very, I don't know, I don't know how it will, you tell me how it sounds, okay?
So I'll split it into two parts. So WebAssembly is running in the browser, right? So what, not me, but Sean Morris has done, the open source is out there and I've been in touch with him because I want to make something a reality, which is trademarks aside, codes and boxes, right? So we wanna play with PHP, right? But we always need a server somewhere, right? To this day, I'm pretty happy with solutions like IDX, Codespaces, but above all, Gitpod has been one of my favorites.
You can see a video of that. I've made it for Filament, so in Filament's YouTube channel, the demo is running in Gitpod and you can actually run it there. But, and you can do this with more things, but you do need a server, you do need an account, you do need all sorts of things. To make it work. And with WebAssembly and a service worker can have PHP CGI running on a separate thread from the browser window instance, right?
So this would allow us to bring the whole server to the, not will allow us, it's already allowing, right? (laughs) So the whole server gets downloaded, you can have it on a S, on GitHub pages or an S3 bucket or whatever, all static, right? But then it goes down to your browser, to your computer and boots the server right there. So this would allow, I have a passion, a touch for this, which is to communicate, I wanna give you a snippet of code, right?
But then either it's just partial, there's missing context or something, right? So JavaScript folks have these since like forever, right? With code pens and those sorts of things, the problem is solved if it's a front end issue. But, and also backend now with the stack pleats, I would say, right? The web containers, they have node and on in running in the browser.
So these would facilitate everyone to just switch, not switch, sorry, sharing snippets or projects or pieces of functionality just on a link, right? So here, look how I've done this. So like the past been, but with an entire web server there, PHP web server. So that's exciting for me. - I agree, yes. And especially, I mentioned in the intro that you do a lot of live streaming and I assume it's really good for that.
Like once you've, like once you're going through like an explaining stuff through a video or through whatever and then you just take that code and upload it to something like this and then people can actually go there and sort of if they're rewatching the live stream, they can actually follow along as you're going, which that seems really handy. - Yeah, I think so because I mean, mechanisms are here, right?
If you just share a GitHub repo, everyone can go and make it work, but that's a ton of work or maybe they don't have a local environment or maybe this is only Docker or maybe this is missing some step or when you have a link and everything works, it just works and it's one link. Have you increased the probability of people doing that, right? Because one click, no logins, no setups, no nothing. So that's very appealing to me. - Yeah, that is sweet.
So would you be able to, I assume since it's a whole web server, you can like, you'll be able to install like composer packages and pretty much whatever the, whatever your sharing needs or are you thinking that might not work?
- Actually, yes, still not today, I think, because Packages doesn't allow, I'm not 100% sure, but I think to today, they don't allow cores, so we cannot download them from inside the browser, meaning we could do that like server side with a proxy, like downloading or all the vendor operations could happen on the server. But yeah, it's totally possible and there are some roadblocks to, some hurdles to pass. We need to, sorry, to address some issues. - But we'll get there eventually, I would say.
I'm just, you can go, sorry, you can go to playwithladeval.com. - Yeah. - And there's a Ladeval new application ready to run. You can see the video there, so, and changing stuff, changing the files and updating in real time, that's happening right now. Just the Composer Packages and NPM compilations are setting it apart from the typical local development environment. - Right, yeah.
I was sort of, this was, that was a selfish question because you know, at Ladeval News, we wanna cover the community packages and stuff like that. And it seems like we're always, having a local, pulling them down locally, trying to see how they work. It would be nice to be able to just like, hey, go to this thing and boom, it's there and we could take screenshots and do all of our stuff. But sounds like maybe one day, you never know. - It's not far ahead.
I mean, what you need for that right today is you just have the vendor directory inside the git repo and the .env file as well. So that's not very traditional, but that repo is meant to be public and open and all. So it's not the mainstream way of doing things, but if it's only for that, you can do that right away. Or Gitbot may be an option for you as well. I can show you in the end, I guess, or. - Yeah, yeah. We'll do that off the podcast. But yeah, that sounds cool.
And then the other thing that you've got since we mentioned it is VoxPop. So tell us a little bit about what that is. - Sure. I'll get back to the PHP WASM later. I forgot something. - Oh, no, no, we'll step back. Let's go ahead and finish that. - Okay, sure. So this is the first part of the WASM interest of mine where I see a huge value. So this is the first part, like having the web server. So all in all, it's a zip file and boom, you get a web server running in the browser. I don't see it.
I don't foresee it using that for offline first applications or stuff like that. I think much needs to be done. But for the near future, code sandboxes, I think, yes. But there's the second part, which is using only PHP WASM in the main thread, meaning you can run, you know, script type, equals text JavaScript. So now there is script type text slash PHP, you know? So you run PHP in, you put PHP in the DOM, PHP code in the DOM and you just run it, you know? And I think this is bonkers.
And I don't know if people just don't appreciate it or they don't know about it, but for me, it's bonkers. And there's an interoperability with JavaScript. So I don't know, you tell me. - Well, going back way back in history, like PHP like two and three, they used to could do that, like the script type text PHP. But I thought they deprecated that at one point, but I guess that's not true or is it sort of different now, what you're thinking than the old Tommy wife?
- I don't know the first way, but this one is in web assembly. So I would bet seriously that it's-- - Yeah, so the old way, you know how, like if you're in say like an HTML file, you can do open PHP and then whatever PHP code you want and then close the PHP, you know, with the question mark. - That would run server side, no entirely different. - Yes, but no, but see back in the old days, you could actually, there was two ways you could run PHP, like it's still server side, right?
So you would open and close it the normal traditional way, but then you could also do script type text PHP and close the script tag and that would still run server side and that was just sort of a way you could sort of use PHP. This was, this is way back like early 2000s, probably like PHP for maybe like 4.3. - Oh, maybe for my time then.
- That was way back, so there's my little PHP history lesson is you used to could actually use that in as a normal, like in your HTML files for, or in your PHP files basically. But anyway. - I look into that, yeah. - Yeah. - So yeah, this is different. This is really running PHP, like you click a button and this PHP runs on the click of that button. That's it locally, so. - Nice. That's awesome, yes.
- It's just bonkers to me and I think many folks, maybe this number is reducing, but where I come from and I think still today, there are many backend developers that maybe are scared or never got into JavaScript or they don't want to, right? And I don't know if it will happen, but it's possible to have a full stack PHP, you know? So like you don't write any JavaScript in a project. So this is possible, so that's why. I'm going bonkers with that idea, but yeah, let's see what happens, yeah.
- For sure, I'm sort of that way, you know, that's why I really came to Embrace Lavire from, you know, as soon as it was announced and launched, I was like, this just makes sense and I don't have to fight with Vue or React or any of these other things backbone, you know? So it's, to me, that was just life-changing there, so I can't imagine, you know, what the future's gonna bring. I think it's gonna be awesome seeing all these cool things that's sort of being worked on. So yeah, very exciting.
- Let's see what the future brings. - Yes, all right, so now let's jump in. So you're building Voxpop, so tell us what that is. - Oh, sorry, okay, so Voxpop is a website builder for non-tech people, the audience for the platform. So everyone can just come in and like shoot some pre-made blocks, right? You change text, you change pictures, boom, that's it. And I'm co-building it with Shruti, you might know from the content creation on YouTube and from the community, so in the sentence, that's it.
- So are you going to, I guess, like say I have a site already, I can just like kind of pull this in and I will automatically get the sort of a block, you know, site builder, block builder type thing, or is it more like it needs to like hook into existing like CMSs and things like that? - Right, so it's different, so everything is hosted.
We are thinking, not thinking, we are going to have a free tier and a paid tier or multiple still in, still a work in progress, what goes where, but so everything happens in our end. So it's a no code, application, right? From the user standpoint, you don't get to make any decisions or you don't make any HTML, you don't make any queries, you don't make any code. We might think to allow to put some CSS for some advanced use cases, but that's not the goal.
The goal is for people who are not technical at all, right? So if you can make a Instagram profile or some Facebook page, then you can make your website, you can bring your domain, right? And we will hook that thing up, right? And your domain becomes served by the website that you built in the hosted builder, yeah. - Ah, I got you, understand, yes, yes.
So to me, it sort of sounds, ah, not really, but sort of kind of like a WordPress or a Wix or sort of one of those, sort of like just focus on building nice, beautiful websites through your sort of, this really cool UI thing you built with the blocks and things like that. - Right, not, I mean, we want to make it, we want to move away all the levers and knobs and every configuration, so it's basically just, just an organized, clean, how can I say, a sane way of handling with nowadays web, right?
Because there's all sorts of customizations and responsive modes and all of that stuff that you can control and decide, right? And I think there's, we think there's a gap that it's not filled, which is the simple things and sometimes, and how does that saying go, we're doing this because we thought it was going to be easy, not because it is. There's something like that, right? It turns out making things simple is much, much harder than it seems. But yeah, that's the goal.
That's to make simple things, yeah. - That's great, yeah, because from my history and personal experience, I'll get people coming to me all the time, be like, "Hey, I just, I need a website, "what do I do?" And I'm like, "I don't know." They're like, "Can we hire you?" I'm like, "I don't really want to do this. "This is not for me." So it would be nice to be like, "Hey, I have a friend who has this builder over here.
"You should just go sign up for that "and buy you a, get the domain, do it, "and let them handle everything." And that sounds-- - Sounds like the place. - Sounds perfect for that, yes, yes. - Yeah, right. You have a friend which has a shop or a race next month and they want to put up a website, some pictures, some forms, and that's it. So, but then you will eat some roadblocks, of course. "Hey, I wanted to add this, I wanted to, "okay, it's not gonna do that."
So then you need a programmer, right? Or some kind of other option, yeah. - Yes, yes. Which, you know, now there's, you know, once you get the website, there's so many sort of, like you said, no code tools. Like, you know, you could even, I don't know, I'm just thinking like out of the box, you could even do like some sort of form to Zapier, to email or something.
You know, it's sort of kind of wild what all you can build with no code these days, which is pretty amazing in itself is how you can hook all these things up together and have sort of a, you know, this, I guess your wording was Frankenstein of a website that's kind of hooked to 14 third-party services. (laughing) - Yeah, I've seen those as well. We've actually just put this morning a video online with the preview of how the builder works. So I can, so it's in our Twitter or Voxpopcites.com.
You will be able to see how, how the mechanism of the builder is because I believe my words didn't make honesty to how simple that thing is. So maybe see it for yourselves and yeah. - Yeah, yeah, and we'll be sure to have all these in the show notes as well. That way you can easily find all this stuff. Basically try to put everything that we talk about, you know, sometimes I miss some things here and there, but hopefully I'll get all the big things. But I'm gonna say, I think that about does it.
Anything else you wanna say that I may have missed anything you're working on or anything you're excited about right now? - Well, I am always about wanting to do so many things. But if I can say something is thank you to the community. I don't wanna miss anyone. So I'll just say to Laravel in general. I think from my early days in programming, I was always, I don't know, switching or changing tools. But since Laravel 4.0, I haven't used anything else. Like it's the backbone of it all.
Maybe there's some things that come and go around it depending on the project, right? But Laravel has been there since that time and it made me grow as a developer and meeting new friends, knowing how to better solve problems and that's it. So I wanna say thank you to everyone involved in making Laravel happen. - Awesome, well, thank you for joining us today. We had a lot of fun, Patricio. - Thank you, Eric, it was fun indeed.